@alfalab/core-components-gallery 6.0.2 → 6.0.4
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/Component.d.ts +2 -2
- package/Component.js.map +1 -1
- package/components/bottom-button/Component.d.ts +1 -1
- package/components/bottom-button/Component.js.map +1 -1
- package/components/bottom-button/index.css +5 -5
- package/components/bottom-button/index.module.css.js +1 -1
- package/components/bottom-button/index.module.css.js.map +1 -1
- package/components/buttons/index.css +6 -6
- package/components/buttons/index.d.ts +2 -2
- package/components/buttons/index.js.map +1 -1
- package/components/buttons/index.module.css.js +1 -1
- package/components/buttons/index.module.css.js.map +1 -1
- package/components/header/Component.d.ts +1 -1
- package/components/header/Component.js.map +1 -1
- package/components/header/index.css +1 -1
- package/components/header/index.module.css.js +1 -1
- package/components/header/index.module.css.js.map +1 -1
- package/components/header-info-block/Component.d.ts +1 -1
- package/components/header-info-block/Component.js.map +1 -1
- package/components/header-info-block/index.css +4 -4
- package/components/header-info-block/index.module.css.js +1 -1
- package/components/header-info-block/index.module.css.js.map +1 -1
- package/components/header-mobile/index.css +7 -7
- package/components/header-mobile/index.module.css.js +1 -1
- package/components/header-mobile/index.module.css.js.map +1 -1
- package/components/image-preview/Component.d.ts +2 -2
- package/components/image-preview/Component.js.map +1 -1
- package/components/image-preview/index.css +23 -23
- package/components/image-preview/index.module.css.js +1 -1
- package/components/image-preview/index.module.css.js.map +1 -1
- package/components/image-viewer/component.d.ts +1 -1
- package/components/image-viewer/component.js.map +1 -1
- package/components/image-viewer/hooks.d.ts +1 -1
- package/components/image-viewer/hooks.js.map +1 -1
- package/components/image-viewer/index.css +31 -30
- package/components/image-viewer/index.module.css.js +1 -1
- package/components/image-viewer/index.module.css.js.map +1 -1
- package/components/image-viewer/single.d.ts +1 -1
- package/components/image-viewer/single.js.map +1 -1
- package/components/image-viewer/slide.d.ts +2 -2
- package/components/image-viewer/slide.js.map +1 -1
- package/components/image-viewer/video/index.css +9 -8
- package/components/image-viewer/video/index.js +4 -6
- package/components/image-viewer/video/index.js.map +1 -1
- package/components/image-viewer/video/index.module.css.js +1 -1
- package/components/image-viewer/video/index.module.css.js.map +1 -1
- package/components/info-bar/index.css +4 -4
- package/components/info-bar/index.module.css.js +1 -1
- package/components/info-bar/index.module.css.js.map +1 -1
- package/components/navigation-bar/Component.d.ts +1 -1
- package/components/navigation-bar/Component.js.map +1 -1
- package/components/navigation-bar/index.css +10 -10
- package/components/navigation-bar/index.module.css.js +1 -1
- package/components/navigation-bar/index.module.css.js.map +1 -1
- package/components/subtitles/index.css +8 -5
- package/components/subtitles/index.module.css.js +1 -1
- package/components/subtitles/index.module.css.js.map +1 -1
- package/context.d.ts +2 -2
- package/context.js.map +1 -1
- package/cssm/Component.d.ts +2 -2
- package/cssm/Component.js.map +1 -1
- package/cssm/components/bottom-button/Component.d.ts +1 -1
- package/cssm/components/bottom-button/Component.js.map +1 -1
- package/cssm/components/buttons/index.d.ts +2 -2
- package/cssm/components/buttons/index.js.map +1 -1
- package/cssm/components/buttons/index.module.css +1 -1
- package/cssm/components/header/Component.d.ts +1 -1
- package/cssm/components/header/Component.js.map +1 -1
- package/cssm/components/header-info-block/Component.d.ts +1 -1
- package/cssm/components/header-info-block/Component.js.map +1 -1
- package/cssm/components/header-mobile/index.module.css +1 -1
- package/cssm/components/image-preview/Component.d.ts +2 -2
- package/cssm/components/image-preview/Component.js.map +1 -1
- package/cssm/components/image-preview/index.module.css +6 -6
- package/cssm/components/image-viewer/component.d.ts +1 -1
- package/cssm/components/image-viewer/component.js.map +1 -1
- package/cssm/components/image-viewer/hooks.d.ts +1 -1
- package/cssm/components/image-viewer/hooks.js.map +1 -1
- package/cssm/components/image-viewer/index.module.css +6 -5
- package/cssm/components/image-viewer/single.d.ts +1 -1
- package/cssm/components/image-viewer/single.js.map +1 -1
- package/cssm/components/image-viewer/slide.d.ts +2 -2
- package/cssm/components/image-viewer/slide.js.map +1 -1
- package/cssm/components/image-viewer/video/index.js +4 -6
- package/cssm/components/image-viewer/video/index.js.map +1 -1
- package/cssm/components/image-viewer/video/index.module.css +2 -1
- package/cssm/components/info-bar/index.module.css +1 -1
- package/cssm/components/navigation-bar/Component.d.ts +1 -1
- package/cssm/components/navigation-bar/Component.js.map +1 -1
- package/cssm/components/navigation-bar/index.module.css +2 -2
- package/cssm/components/subtitles/index.module.css +5 -2
- package/cssm/context.d.ts +2 -2
- package/cssm/context.js.map +1 -1
- package/cssm/index.module.css +4 -2
- package/cssm/types.d.ts +1 -1
- package/cssm/utils/utils.d.ts +1 -1
- package/cssm/utils/utils.js +1 -1
- package/cssm/utils/utils.js.map +1 -1
- package/esm/Component.d.ts +2 -2
- package/esm/Component.js.map +1 -1
- package/esm/components/bottom-button/Component.d.ts +1 -1
- package/esm/components/bottom-button/Component.js.map +1 -1
- package/esm/components/bottom-button/index.css +5 -5
- package/esm/components/bottom-button/index.module.css.js +1 -1
- package/esm/components/bottom-button/index.module.css.js.map +1 -1
- package/esm/components/buttons/index.css +6 -6
- package/esm/components/buttons/index.d.ts +2 -2
- package/esm/components/buttons/index.js.map +1 -1
- package/esm/components/buttons/index.module.css.js +1 -1
- package/esm/components/buttons/index.module.css.js.map +1 -1
- package/esm/components/header/Component.d.ts +1 -1
- package/esm/components/header/Component.js.map +1 -1
- package/esm/components/header/index.css +1 -1
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/header/index.module.css.js.map +1 -1
- package/esm/components/header-info-block/Component.d.ts +1 -1
- package/esm/components/header-info-block/Component.js.map +1 -1
- package/esm/components/header-info-block/index.css +4 -4
- package/esm/components/header-info-block/index.module.css.js +1 -1
- package/esm/components/header-info-block/index.module.css.js.map +1 -1
- package/esm/components/header-mobile/index.css +7 -7
- package/esm/components/header-mobile/index.module.css.js +1 -1
- package/esm/components/header-mobile/index.module.css.js.map +1 -1
- package/esm/components/image-preview/Component.d.ts +2 -2
- package/esm/components/image-preview/Component.js.map +1 -1
- package/esm/components/image-preview/index.css +23 -23
- package/esm/components/image-preview/index.module.css.js +1 -1
- package/esm/components/image-preview/index.module.css.js.map +1 -1
- package/esm/components/image-viewer/component.d.ts +1 -1
- package/esm/components/image-viewer/component.js.map +1 -1
- package/esm/components/image-viewer/hooks.d.ts +1 -1
- package/esm/components/image-viewer/hooks.js.map +1 -1
- package/esm/components/image-viewer/index.css +31 -30
- package/esm/components/image-viewer/index.module.css.js +1 -1
- package/esm/components/image-viewer/index.module.css.js.map +1 -1
- package/esm/components/image-viewer/single.d.ts +1 -1
- package/esm/components/image-viewer/single.js.map +1 -1
- package/esm/components/image-viewer/slide.d.ts +2 -2
- package/esm/components/image-viewer/slide.js.map +1 -1
- package/esm/components/image-viewer/video/index.css +9 -8
- package/esm/components/image-viewer/video/index.js +4 -6
- package/esm/components/image-viewer/video/index.js.map +1 -1
- package/esm/components/image-viewer/video/index.module.css.js +1 -1
- package/esm/components/image-viewer/video/index.module.css.js.map +1 -1
- package/esm/components/info-bar/index.css +4 -4
- package/esm/components/info-bar/index.module.css.js +1 -1
- package/esm/components/info-bar/index.module.css.js.map +1 -1
- package/esm/components/navigation-bar/Component.d.ts +1 -1
- package/esm/components/navigation-bar/Component.js.map +1 -1
- package/esm/components/navigation-bar/index.css +10 -10
- package/esm/components/navigation-bar/index.module.css.js +1 -1
- package/esm/components/navigation-bar/index.module.css.js.map +1 -1
- package/esm/components/subtitles/index.css +8 -5
- package/esm/components/subtitles/index.module.css.js +1 -1
- package/esm/components/subtitles/index.module.css.js.map +1 -1
- package/esm/context.d.ts +2 -2
- package/esm/context.js.map +1 -1
- package/esm/index.css +13 -11
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/esm/types.d.ts +1 -1
- package/esm/utils/utils.d.ts +1 -1
- package/esm/utils/utils.js +1 -1
- package/esm/utils/utils.js.map +1 -1
- package/index.css +13 -11
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/Component.d.ts +2 -2
- package/modern/Component.js.map +1 -1
- package/modern/components/bottom-button/Component.d.ts +1 -1
- package/modern/components/bottom-button/Component.js.map +1 -1
- package/modern/components/bottom-button/index.css +5 -5
- package/modern/components/bottom-button/index.module.css.js +1 -1
- package/modern/components/bottom-button/index.module.css.js.map +1 -1
- package/modern/components/buttons/index.css +6 -6
- package/modern/components/buttons/index.d.ts +2 -2
- package/modern/components/buttons/index.js.map +1 -1
- package/modern/components/buttons/index.module.css.js +1 -1
- package/modern/components/buttons/index.module.css.js.map +1 -1
- package/modern/components/header/Component.d.ts +1 -1
- package/modern/components/header/Component.js.map +1 -1
- package/modern/components/header/index.css +1 -1
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/header/index.module.css.js.map +1 -1
- package/modern/components/header-info-block/Component.d.ts +1 -1
- package/modern/components/header-info-block/Component.js.map +1 -1
- package/modern/components/header-info-block/index.css +4 -4
- package/modern/components/header-info-block/index.module.css.js +1 -1
- package/modern/components/header-info-block/index.module.css.js.map +1 -1
- package/modern/components/header-mobile/index.css +7 -7
- package/modern/components/header-mobile/index.module.css.js +1 -1
- package/modern/components/header-mobile/index.module.css.js.map +1 -1
- package/modern/components/image-preview/Component.d.ts +2 -2
- package/modern/components/image-preview/Component.js.map +1 -1
- package/modern/components/image-preview/index.css +23 -23
- package/modern/components/image-preview/index.module.css.js +1 -1
- package/modern/components/image-preview/index.module.css.js.map +1 -1
- package/modern/components/image-viewer/component.d.ts +1 -1
- package/modern/components/image-viewer/component.js.map +1 -1
- package/modern/components/image-viewer/hooks.d.ts +1 -1
- package/modern/components/image-viewer/hooks.js.map +1 -1
- package/modern/components/image-viewer/index.css +31 -30
- package/modern/components/image-viewer/index.module.css.js +1 -1
- package/modern/components/image-viewer/index.module.css.js.map +1 -1
- package/modern/components/image-viewer/single.d.ts +1 -1
- package/modern/components/image-viewer/single.js.map +1 -1
- package/modern/components/image-viewer/slide.d.ts +2 -2
- package/modern/components/image-viewer/slide.js.map +1 -1
- package/modern/components/image-viewer/video/index.css +9 -8
- package/modern/components/image-viewer/video/index.js +2 -6
- package/modern/components/image-viewer/video/index.js.map +1 -1
- package/modern/components/image-viewer/video/index.module.css.js +1 -1
- package/modern/components/image-viewer/video/index.module.css.js.map +1 -1
- package/modern/components/info-bar/index.css +4 -4
- package/modern/components/info-bar/index.module.css.js +1 -1
- package/modern/components/info-bar/index.module.css.js.map +1 -1
- package/modern/components/navigation-bar/Component.d.ts +1 -1
- package/modern/components/navigation-bar/Component.js.map +1 -1
- package/modern/components/navigation-bar/index.css +10 -10
- package/modern/components/navigation-bar/index.module.css.js +1 -1
- package/modern/components/navigation-bar/index.module.css.js.map +1 -1
- package/modern/components/subtitles/index.css +8 -5
- package/modern/components/subtitles/index.module.css.js +1 -1
- package/modern/components/subtitles/index.module.css.js.map +1 -1
- package/modern/context.d.ts +2 -2
- package/modern/context.js.map +1 -1
- package/modern/index.css +13 -11
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/modern/types.d.ts +1 -1
- package/modern/utils/utils.d.ts +1 -1
- package/modern/utils/utils.js +1 -1
- package/modern/utils/utils.js.map +1 -1
- package/moderncssm/Component.d.ts +2 -2
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/components/bottom-button/Component.d.ts +1 -1
- package/moderncssm/components/bottom-button/Component.js.map +1 -1
- package/moderncssm/components/bottom-button/index.module.css +2 -0
- package/moderncssm/components/buttons/index.d.ts +2 -2
- package/moderncssm/components/buttons/index.js.map +1 -1
- package/moderncssm/components/buttons/index.module.css +3 -1
- package/moderncssm/components/header/Component.d.ts +1 -1
- package/moderncssm/components/header/Component.js.map +1 -1
- package/moderncssm/components/header/index.module.css +2 -0
- package/moderncssm/components/header-info-block/Component.d.ts +1 -1
- package/moderncssm/components/header-info-block/Component.js.map +1 -1
- package/moderncssm/components/header-info-block/index.module.css +2 -0
- package/moderncssm/components/header-mobile/index.module.css +3 -1
- package/moderncssm/components/image-preview/Component.d.ts +2 -2
- package/moderncssm/components/image-preview/Component.js.map +1 -1
- package/moderncssm/components/image-preview/index.module.css +8 -6
- package/moderncssm/components/image-viewer/component.d.ts +1 -1
- package/moderncssm/components/image-viewer/component.js.map +1 -1
- package/moderncssm/components/image-viewer/hooks.d.ts +1 -1
- package/moderncssm/components/image-viewer/hooks.js.map +1 -1
- package/moderncssm/components/image-viewer/index.module.css +7 -5
- package/moderncssm/components/image-viewer/single.d.ts +1 -1
- package/moderncssm/components/image-viewer/single.js.map +1 -1
- package/moderncssm/components/image-viewer/slide.d.ts +2 -2
- package/moderncssm/components/image-viewer/slide.js.map +1 -1
- package/moderncssm/components/image-viewer/video/index.js +2 -6
- package/moderncssm/components/image-viewer/video/index.js.map +1 -1
- package/moderncssm/components/image-viewer/video/index.module.css +3 -1
- package/moderncssm/components/info-bar/index.module.css +3 -1
- package/moderncssm/components/navigation-bar/Component.d.ts +1 -1
- package/moderncssm/components/navigation-bar/Component.js.map +1 -1
- package/moderncssm/components/navigation-bar/index.module.css +4 -2
- package/moderncssm/components/subtitles/index.module.css +7 -2
- package/moderncssm/context.d.ts +2 -2
- package/moderncssm/context.js.map +1 -1
- package/moderncssm/index.module.css +13 -2
- package/moderncssm/types.d.ts +1 -1
- package/moderncssm/utils/utils.d.ts +1 -1
- package/moderncssm/utils/utils.js +1 -1
- package/moderncssm/utils/utils.js.map +1 -1
- package/package.json +4 -4
- package/src/Component.tsx +3 -3
- package/src/components/bottom-button/Component.tsx +1 -1
- package/src/components/bottom-button/index.module.css +1 -1
- package/src/components/buttons/index.module.css +1 -1
- package/src/components/buttons/index.tsx +2 -2
- package/src/components/header/Component.tsx +1 -1
- package/src/components/header/index.module.css +1 -1
- package/src/components/header-info-block/Component.tsx +1 -1
- package/src/components/header-info-block/index.module.css +1 -1
- package/src/components/header-mobile/index.module.css +1 -1
- package/src/components/image-preview/Component.tsx +4 -4
- package/src/components/image-preview/index.module.css +1 -1
- package/src/components/image-viewer/component.tsx +1 -1
- package/src/components/image-viewer/hooks.ts +2 -2
- package/src/components/image-viewer/index.module.css +2 -2
- package/src/components/image-viewer/single.tsx +1 -1
- package/src/components/image-viewer/slide.tsx +2 -2
- package/src/components/image-viewer/video/index.module.css +2 -2
- package/src/components/image-viewer/video/index.tsx +4 -8
- package/src/components/info-bar/index.module.css +1 -1
- package/src/components/navigation-bar/Component.tsx +1 -1
- package/src/components/navigation-bar/index.module.css +1 -1
- package/src/components/subtitles/index.module.css +4 -2
- package/src/context.ts +2 -2
- package/src/index.module.css +4 -2
- package/src/types.ts +1 -1
- package/src/utils/utils.ts +2 -2
- package/types.d.ts +1 -1
- package/utils/utils.d.ts +1 -1
- package/utils/utils.js +1 -1
- package/utils/utils.js.map +1 -1
- /package/src/components/bottom-button/{index.tsx → index.ts} +0 -0
- /package/src/components/header/{index.tsx → index.ts} +0 -0
- /package/src/components/image-preview/{index.tsx → index.ts} +0 -0
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
--gap-8: var(--gap-xs);
|
|
12
12
|
--gap-12: var(--gap-s);
|
|
13
13
|
--gap-24: var(--gap-xl);
|
|
14
|
-
} .
|
|
14
|
+
} .gallery__component_uts3z {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-wrap: nowrap;
|
|
17
17
|
align-content: center;
|
|
@@ -21,20 +21,20 @@
|
|
|
21
21
|
box-sizing: border-box;
|
|
22
22
|
padding: var(--gap-12) var(--gap-24);
|
|
23
23
|
scrollbar-width: none;
|
|
24
|
-
background-color: var(--color-static-neutral-0-inverted)
|
|
25
|
-
} .
|
|
24
|
+
background-color: var(--color-static-neutral-0-inverted);
|
|
25
|
+
} .gallery__component_uts3z.gallery__mobile_uts3z {
|
|
26
26
|
padding: var(--gap-8) var(--gap-24);
|
|
27
|
-
} .
|
|
27
|
+
} .gallery__component_uts3z::-webkit-scrollbar {
|
|
28
28
|
display: none;
|
|
29
|
-
} .
|
|
29
|
+
} .gallery__previews_uts3z {
|
|
30
30
|
display: flex;
|
|
31
|
-
} .
|
|
31
|
+
} .gallery__preview_uts3z {
|
|
32
32
|
flex-shrink: 0;
|
|
33
|
-
margin-right: var(--gap-4)
|
|
34
|
-
} .
|
|
33
|
+
margin-right: var(--gap-4);
|
|
34
|
+
} .gallery__preview_uts3z.gallery__mobile_uts3z {
|
|
35
35
|
margin-right: var(--gap-2);
|
|
36
|
-
} .
|
|
36
|
+
} .gallery__preview_uts3z:first-child {
|
|
37
37
|
margin-left: auto;
|
|
38
|
-
} .
|
|
38
|
+
} .gallery__preview_uts3z:last-child {
|
|
39
39
|
margin-right: auto;
|
|
40
40
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"
|
|
3
|
+
var styles = {"component":"gallery__component_uts3z","mobile":"gallery__mobile_uts3z","preview":"gallery__preview_uts3z"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/navigation-bar/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n flex-wrap: nowrap;\n align-content: center;\n align-items: center;\n flex-shrink: 0;\n overflow-x: auto;\n box-sizing: border-box;\n padding: var(--gap-12) var(--gap-24);\n scrollbar-width: none;\n background-color: var(--color-static-neutral-0-inverted);\n\n &.mobile {\n padding: var(--gap-8) var(--gap-24);\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n}\n\n.previews {\n display: flex;\n}\n\n.preview {\n flex-shrink: 0;\n margin-right: var(--gap-4);\n\n &.mobile {\n margin-right: var(--gap-2);\n }\n\n &:first-child {\n margin-left: auto;\n }\n\n &:last-child {\n margin-right: auto;\n }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAsC,SAAS,CAAC,wBAAwB,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/navigation-bar/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n display: flex;\n flex-wrap: nowrap;\n align-content: center;\n align-items: center;\n flex-shrink: 0;\n overflow-x: auto;\n box-sizing: border-box;\n padding: var(--gap-12) var(--gap-24);\n scrollbar-width: none;\n background-color: var(--color-static-neutral-0-inverted);\n\n &.mobile {\n padding: var(--gap-8) var(--gap-24);\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n}\n\n.previews {\n display: flex;\n}\n\n.preview {\n flex-shrink: 0;\n margin-right: var(--gap-4);\n\n &.mobile {\n margin-right: var(--gap-2);\n }\n\n &:first-child {\n margin-left: auto;\n }\n\n &:last-child {\n margin-right: auto;\n }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAsC,SAAS,CAAC,wBAAwB,CAAC;;;;"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--gap-0: 0px;
|
|
5
5
|
--gap-16: var(--gap-m);
|
|
6
6
|
--gap-32: var(--gap-2xl);
|
|
7
|
-
} .
|
|
7
|
+
} .gallery__subtitles_16znv {
|
|
8
8
|
position: absolute;
|
|
9
9
|
align-self: flex-end;
|
|
10
10
|
padding: var(--gap-0) var(--gap-32);
|
|
@@ -13,9 +13,12 @@
|
|
|
13
13
|
text-align: center;
|
|
14
14
|
opacity: 1;
|
|
15
15
|
z-index: 1;
|
|
16
|
-
transition:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
transition:
|
|
17
|
+
opacity 500ms ease-in-out,
|
|
18
|
+
margin-bottom 270ms ease-in-out;
|
|
19
|
+
} .gallery__subtitles_16znv.gallery__mobile_16znv {
|
|
20
|
+
position: static;
|
|
21
|
+
position: initial;
|
|
22
|
+
} .gallery__hideSubtitles_16znv {
|
|
20
23
|
opacity: 0;
|
|
21
24
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"subtitles":"
|
|
3
|
+
var styles = {"subtitles":"gallery__subtitles_16znv","mobile":"gallery__mobile_16znv","hideSubtitles":"gallery__hideSubtitles_16znv"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/subtitles/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.subtitles {\n position: absolute;\n align-self: flex-end;\n padding: var(--gap-0) var(--gap-32);\n margin-bottom: var(--gap-16);\n width: 100%;\n text-align: center;\n opacity: 1;\n z-index: 1;\n transition
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/subtitles/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.subtitles {\n position: absolute;\n align-self: flex-end;\n padding: var(--gap-0) var(--gap-32);\n margin-bottom: var(--gap-16);\n width: 100%;\n text-align: center;\n opacity: 1;\n z-index: 1;\n transition:\n opacity 500ms ease-in-out,\n margin-bottom 270ms ease-in-out;\n\n &.mobile {\n position: unset;\n }\n}\n\n.hideSubtitles {\n opacity: 0;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,eAAe,CAAC,8BAA8B,CAAC;;;;"}
|
package/esm/context.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import SwiperCore from 'swiper';
|
|
3
|
-
import { GalleryImage, ImageMeta } from './types';
|
|
2
|
+
import type SwiperCore from 'swiper';
|
|
3
|
+
import { type GalleryImage, type ImageMeta } from './types';
|
|
4
4
|
export declare type GalleryContext = {
|
|
5
5
|
view: 'desktop' | 'mobile';
|
|
6
6
|
singleSlide: boolean;
|
package/esm/context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../src/context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport SwiperCore from 'swiper';\n\nimport { GalleryImage, ImageMeta } from './types';\n\nexport type GalleryContext = {\n view: 'desktop' | 'mobile';\n singleSlide: boolean;\n currentSlideIndex: number;\n images: GalleryImage[];\n imagesMeta: ImageMeta[];\n fullScreen: boolean;\n mutedVideo: boolean;\n playingVideo: boolean;\n hideNavigation: boolean;\n setHideNavigation: (hideNavigation: boolean) => void;\n initialSlide: number;\n setFullScreen: (fullScreen: boolean) => void;\n setMutedVideo: (muteVideo: boolean) => void;\n setPlayingVideo: (playingVideo: boolean) => void;\n setImageMeta: (meta: ImageMeta, index: number) => void;\n slideTo: (index: number) => void;\n slideNext: () => void;\n slidePrev: () => void;\n getSwiper: () => SwiperCore | undefined;\n setSwiper: (swiper: SwiperCore) => void;\n onClose: () => void;\n setCurrentSlideIndex?: (index: number) => void;\n getCurrentImage: () => GalleryImage | undefined;\n getCurrentImageMeta: () => ImageMeta | undefined;\n};\n\nconst mockFn = () => undefined;\n\n// eslint-disable-next-line @typescript-eslint/no-redeclare\nexport const GalleryContext = createContext<GalleryContext>({\n view: 'desktop',\n singleSlide: false,\n currentSlideIndex: 0,\n images: [],\n imagesMeta: [],\n fullScreen: false,\n mutedVideo: false,\n playingVideo: false,\n hideNavigation: false,\n setHideNavigation: mockFn,\n setMutedVideo: mockFn,\n setPlayingVideo: mockFn,\n initialSlide: 0,\n setFullScreen: mockFn,\n setImageMeta: mockFn,\n slideTo: mockFn,\n slideNext: mockFn,\n slidePrev: mockFn,\n getSwiper: mockFn,\n setSwiper: mockFn,\n onClose: mockFn,\n setCurrentSlideIndex: mockFn,\n getCurrentImage: mockFn,\n getCurrentImageMeta: mockFn,\n});\n"],"names":[],"mappings":";;AAgCA,IAAM,MAAM,GAAG,YAAA,EAAM,OAAA,SAAS,CAAA,EAAA;AAE9B;AACO,IAAM,cAAc,GAAG,aAAa,CAAiB;AACxD,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,iBAAiB,EAAE,CAAC;AACpB,IAAA,MAAM,EAAE,EAAE;AACV,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,iBAAiB,EAAE,MAAM;AACzB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,oBAAoB,EAAE,MAAM;AAC5B,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,mBAAmB,EAAE,MAAM;AAC9B,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../src/context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type SwiperCore from 'swiper';\n\nimport { type GalleryImage, type ImageMeta } from './types';\n\nexport type GalleryContext = {\n view: 'desktop' | 'mobile';\n singleSlide: boolean;\n currentSlideIndex: number;\n images: GalleryImage[];\n imagesMeta: ImageMeta[];\n fullScreen: boolean;\n mutedVideo: boolean;\n playingVideo: boolean;\n hideNavigation: boolean;\n setHideNavigation: (hideNavigation: boolean) => void;\n initialSlide: number;\n setFullScreen: (fullScreen: boolean) => void;\n setMutedVideo: (muteVideo: boolean) => void;\n setPlayingVideo: (playingVideo: boolean) => void;\n setImageMeta: (meta: ImageMeta, index: number) => void;\n slideTo: (index: number) => void;\n slideNext: () => void;\n slidePrev: () => void;\n getSwiper: () => SwiperCore | undefined;\n setSwiper: (swiper: SwiperCore) => void;\n onClose: () => void;\n setCurrentSlideIndex?: (index: number) => void;\n getCurrentImage: () => GalleryImage | undefined;\n getCurrentImageMeta: () => ImageMeta | undefined;\n};\n\nconst mockFn = () => undefined;\n\n// eslint-disable-next-line @typescript-eslint/no-redeclare\nexport const GalleryContext = createContext<GalleryContext>({\n view: 'desktop',\n singleSlide: false,\n currentSlideIndex: 0,\n images: [],\n imagesMeta: [],\n fullScreen: false,\n mutedVideo: false,\n playingVideo: false,\n hideNavigation: false,\n setHideNavigation: mockFn,\n setMutedVideo: mockFn,\n setPlayingVideo: mockFn,\n initialSlide: 0,\n setFullScreen: mockFn,\n setImageMeta: mockFn,\n slideTo: mockFn,\n slideNext: mockFn,\n slidePrev: mockFn,\n getSwiper: mockFn,\n setSwiper: mockFn,\n onClose: mockFn,\n setCurrentSlideIndex: mockFn,\n getCurrentImage: mockFn,\n getCurrentImageMeta: mockFn,\n});\n"],"names":[],"mappings":";;AAgCA,IAAM,MAAM,GAAG,YAAA,EAAM,OAAA,SAAS,CAAA,EAAA;AAE9B;AACO,IAAM,cAAc,GAAG,aAAa,CAAiB;AACxD,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,iBAAiB,EAAE,CAAC;AACpB,IAAA,MAAM,EAAE,EAAE;AACV,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,iBAAiB,EAAE,MAAM;AACzB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,oBAAoB,EAAE,MAAM;AAC5B,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,mBAAmB,EAAE,MAAM;AAC9B,CAAA;;;;"}
|
package/esm/index.css
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
} :root {
|
|
11
11
|
--sat: env(safe-area-inset-top, var(--gap-0));
|
|
12
12
|
--sab: env(safe-area-inset-bottom, var(--gap-0));
|
|
13
|
-
} .
|
|
13
|
+
} .gallery__container_fk8g9 {
|
|
14
14
|
position: relative;
|
|
15
15
|
overflow-x: hidden;
|
|
16
16
|
overflow-y: auto;
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
width: 100%;
|
|
22
22
|
background-color: var(--color-static-neutral-0-inverted);
|
|
23
23
|
padding-top: var(--sat);
|
|
24
|
-
padding-bottom: var(--sab)
|
|
25
|
-
} .
|
|
24
|
+
padding-bottom: var(--sab);
|
|
25
|
+
} .gallery__container_fk8g9.gallery__mobile_fk8g9 {
|
|
26
26
|
overflow: hidden;
|
|
27
|
-
} .
|
|
27
|
+
} .gallery__modal_fk8g9 {
|
|
28
28
|
flex-grow: 1;
|
|
29
29
|
width: 100vw;
|
|
30
30
|
height: 100vh;
|
|
31
31
|
background: transparent;
|
|
32
|
-
} .
|
|
32
|
+
} .gallery__navigationVideo_fk8g9 {
|
|
33
33
|
z-index: 3;
|
|
34
34
|
width: 100%;
|
|
35
35
|
position: absolute;
|
|
@@ -37,22 +37,24 @@
|
|
|
37
37
|
left: 0;
|
|
38
38
|
transition: transform 0.3s ease-in-out;
|
|
39
39
|
text-align: center;
|
|
40
|
-
} .
|
|
40
|
+
} .gallery__hide_fk8g9 {
|
|
41
41
|
transform: translateY(114px);
|
|
42
|
-
} .
|
|
42
|
+
} .gallery__hideInfo_fk8g9 {
|
|
43
43
|
transform: translateY(48px);
|
|
44
|
-
} .
|
|
44
|
+
} .gallery__bottomButton_fk8g9 {
|
|
45
45
|
width: calc(100% - var(--gap-32));
|
|
46
46
|
margin: var(--gap-16);
|
|
47
47
|
background-color: var(--color-static-neutral-translucent-500-inverted);
|
|
48
|
-
} .
|
|
48
|
+
} .gallery__subtitles_fk8g9 {
|
|
49
49
|
padding: var(--gap-0) var(--gap-32);
|
|
50
50
|
margin-bottom: var(--gap-16);
|
|
51
51
|
width: 100%;
|
|
52
52
|
text-align: center;
|
|
53
53
|
opacity: 1;
|
|
54
54
|
z-index: 1;
|
|
55
|
-
transition:
|
|
56
|
-
|
|
55
|
+
transition:
|
|
56
|
+
opacity 500ms ease-in-out,
|
|
57
|
+
margin-bottom 270ms ease-in-out;
|
|
58
|
+
} .gallery__hideSubtitles_fk8g9 {
|
|
57
59
|
opacity: 0;
|
|
58
60
|
}
|
package/esm/index.module.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"container":"
|
|
3
|
+
var styles = {"container":"gallery__container_fk8g9","mobile":"gallery__mobile_fk8g9","modal":"gallery__modal_fk8g9","navigationVideo":"gallery__navigationVideo_fk8g9","hide":"gallery__hide_fk8g9","hideInfo":"gallery__hideInfo_fk8g9","bottomButton":"gallery__bottomButton_fk8g9"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.container {\n position: relative;\n overflow-x: hidden;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n padding-top: var(--sat);\n padding-bottom: var(--sab);\n\n &.mobile {\n overflow: hidden;\n }\n}\n\n.modal {\n flex-grow: 1;\n width: 100vw;\n height: 100vh;\n background: transparent;\n}\n\n.navigationVideo {\n z-index: 3;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n transition: transform 0.3s ease-in-out;\n text-align: center;\n}\n\n.hide {\n transform: translateY(114px);\n}\n\n.hideInfo {\n transform: translateY(48px);\n}\n\n.bottomButton {\n width: calc(100% - var(--gap-32));\n margin: var(--gap-16);\n background-color: var(--color-static-neutral-translucent-500-inverted);\n}\n\n.subtitles {\n padding: var(--gap-0) var(--gap-32);\n margin-bottom: var(--gap-16);\n width: 100%;\n text-align: center;\n opacity: 1;\n z-index: 1;\n transition
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.container {\n position: relative;\n overflow-x: hidden;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n padding-top: var(--sat);\n padding-bottom: var(--sab);\n\n &.mobile {\n overflow: hidden;\n }\n}\n\n.modal {\n flex-grow: 1;\n width: 100vw;\n height: 100vh;\n background: transparent;\n}\n\n.navigationVideo {\n z-index: 3;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n transition: transform 0.3s ease-in-out;\n text-align: center;\n}\n\n.hide {\n transform: translateY(114px);\n}\n\n.hideInfo {\n transform: translateY(48px);\n}\n\n.bottomButton {\n width: calc(100% - var(--gap-32));\n margin: var(--gap-16);\n background-color: var(--color-static-neutral-translucent-500-inverted);\n}\n\n.subtitles {\n padding: var(--gap-0) var(--gap-32);\n margin-bottom: var(--gap-16);\n width: 100%;\n text-align: center;\n opacity: 1;\n z-index: 1;\n transition:\n opacity 500ms ease-in-out,\n margin-bottom 270ms ease-in-out;\n}\n\n.hideSubtitles {\n opacity: 0;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,MAAM,CAAC,qBAAqB,CAAC,UAAU,CAAC,yBAAyB,CAAC,cAAc,CAAC,6BAAmH,CAAC;;;;"}
|
package/esm/types.d.ts
CHANGED
package/esm/utils/utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GalleryImage, ImageMeta } from '../types';
|
|
1
|
+
import { type GalleryImage, type ImageMeta } from '../types';
|
|
2
2
|
export declare const PLACEHOLDER_WIDTH = 400;
|
|
3
3
|
export declare const PLACEHOLDER_HEIGHT = 300;
|
|
4
4
|
export declare const getImageKey: ({ name, src }: GalleryImage, index: number) => string;
|
package/esm/utils/utils.js
CHANGED
|
@@ -9,7 +9,7 @@ var getImageAlt = function (_a, index) {
|
|
|
9
9
|
return alt || name || "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 ".concat(index + 1);
|
|
10
10
|
};
|
|
11
11
|
var isSmallImage = function (meta) {
|
|
12
|
-
if (meta
|
|
12
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.width) && meta.height) {
|
|
13
13
|
return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;
|
|
14
14
|
}
|
|
15
15
|
return false;
|
package/esm/utils/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../src/utils/utils.ts"],"sourcesContent":["import { GalleryImage, ImageMeta } from '../types';\n\nexport const PLACEHOLDER_WIDTH = 400;\nexport const PLACEHOLDER_HEIGHT = 300;\n\nexport const getImageKey = ({ name = '', src }: GalleryImage, index: number): string =>\n `${name}-${index}-${src}`;\n\nexport const getImageAlt = ({ alt, name }: GalleryImage, index: number): string =>\n alt || name || `Изображение ${index + 1}`;\n\nexport const isSmallImage = (meta?: ImageMeta) => {\n if (meta
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/utils/utils.ts"],"sourcesContent":["import { type GalleryImage, type ImageMeta } from '../types';\n\nexport const PLACEHOLDER_WIDTH = 400;\nexport const PLACEHOLDER_HEIGHT = 300;\n\nexport const getImageKey = ({ name = '', src }: GalleryImage, index: number): string =>\n `${name}-${index}-${src}`;\n\nexport const getImageAlt = ({ alt, name }: GalleryImage, index: number): string =>\n alt || name || `Изображение ${index + 1}`;\n\nexport const isSmallImage = (meta?: ImageMeta) => {\n if (meta?.width && meta.height) {\n return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;\n }\n\n return false;\n};\n\nexport const isVideo = (url: string | undefined) =>\n ['.webm', '.mp4', '.m3u8'].some((item) => url?.endsWith(item));\n"],"names":[],"mappings":"AAEO,IAAM,iBAAiB,GAAG;AAC1B,IAAM,kBAAkB,GAAG;AAErB,IAAA,WAAW,GAAG,UAAC,EAAgC,EAAE,KAAa,EAAA;AAA7C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAAE,GAAG,GAAA,EAAA,CAAA,GAAA;AACxC,IAAA,OAAA,UAAG,IAAI,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,KAAK,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,GAAG,CAAE;AAAzB;AAES,IAAA,WAAW,GAAG,UAAC,EAA2B,EAAE,KAAa,EAAA;QAAxC,GAAG,GAAA,EAAA,CAAA,GAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA;IACnC,OAAA,GAAG,IAAI,IAAI,IAAI,6EAAe,KAAK,GAAG,CAAC,CAAE;AAAzC;AAEG,IAAM,YAAY,GAAG,UAAC,IAAgB,EAAA;AACzC,IAAA,IAAI,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,MAAM,EAAE;QAC5B,OAAO,IAAI,CAAC,KAAK,GAAG,iBAAiB,IAAI,IAAI,CAAC,MAAM,GAAG,kBAAkB;AAC5E;AAED,IAAA,OAAO,KAAK;AAChB;AAEO,IAAM,OAAO,GAAG,UAAC,GAAuB,EAAA;IAC3C,OAAA,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,UAAC,IAAI,EAAA,EAAK,OAAA,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAnB,EAAmB,CAAC;AAA9D;;;;"}
|
package/index.css
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
} :root {
|
|
11
11
|
--sat: env(safe-area-inset-top, var(--gap-0));
|
|
12
12
|
--sab: env(safe-area-inset-bottom, var(--gap-0));
|
|
13
|
-
} .
|
|
13
|
+
} .gallery__container_fk8g9 {
|
|
14
14
|
position: relative;
|
|
15
15
|
overflow-x: hidden;
|
|
16
16
|
overflow-y: auto;
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
width: 100%;
|
|
22
22
|
background-color: var(--color-static-neutral-0-inverted);
|
|
23
23
|
padding-top: var(--sat);
|
|
24
|
-
padding-bottom: var(--sab)
|
|
25
|
-
} .
|
|
24
|
+
padding-bottom: var(--sab);
|
|
25
|
+
} .gallery__container_fk8g9.gallery__mobile_fk8g9 {
|
|
26
26
|
overflow: hidden;
|
|
27
|
-
} .
|
|
27
|
+
} .gallery__modal_fk8g9 {
|
|
28
28
|
flex-grow: 1;
|
|
29
29
|
width: 100vw;
|
|
30
30
|
height: 100vh;
|
|
31
31
|
background: transparent;
|
|
32
|
-
} .
|
|
32
|
+
} .gallery__navigationVideo_fk8g9 {
|
|
33
33
|
z-index: 3;
|
|
34
34
|
width: 100%;
|
|
35
35
|
position: absolute;
|
|
@@ -37,22 +37,24 @@
|
|
|
37
37
|
left: 0;
|
|
38
38
|
transition: transform 0.3s ease-in-out;
|
|
39
39
|
text-align: center;
|
|
40
|
-
} .
|
|
40
|
+
} .gallery__hide_fk8g9 {
|
|
41
41
|
transform: translateY(114px);
|
|
42
|
-
} .
|
|
42
|
+
} .gallery__hideInfo_fk8g9 {
|
|
43
43
|
transform: translateY(48px);
|
|
44
|
-
} .
|
|
44
|
+
} .gallery__bottomButton_fk8g9 {
|
|
45
45
|
width: calc(100% - var(--gap-32));
|
|
46
46
|
margin: var(--gap-16);
|
|
47
47
|
background-color: var(--color-static-neutral-translucent-500-inverted);
|
|
48
|
-
} .
|
|
48
|
+
} .gallery__subtitles_fk8g9 {
|
|
49
49
|
padding: var(--gap-0) var(--gap-32);
|
|
50
50
|
margin-bottom: var(--gap-16);
|
|
51
51
|
width: 100%;
|
|
52
52
|
text-align: center;
|
|
53
53
|
opacity: 1;
|
|
54
54
|
z-index: 1;
|
|
55
|
-
transition:
|
|
56
|
-
|
|
55
|
+
transition:
|
|
56
|
+
opacity 500ms ease-in-out,
|
|
57
|
+
margin-bottom 270ms ease-in-out;
|
|
58
|
+
} .gallery__hideSubtitles_fk8g9 {
|
|
57
59
|
opacity: 0;
|
|
58
60
|
}
|
package/index.module.css.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"container":"
|
|
5
|
+
var styles = {"container":"gallery__container_fk8g9","mobile":"gallery__mobile_fk8g9","modal":"gallery__modal_fk8g9","navigationVideo":"gallery__navigationVideo_fk8g9","hide":"gallery__hide_fk8g9","hideInfo":"gallery__hideInfo_fk8g9","bottomButton":"gallery__bottomButton_fk8g9"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
package/index.module.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.container {\n position: relative;\n overflow-x: hidden;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n padding-top: var(--sat);\n padding-bottom: var(--sab);\n\n &.mobile {\n overflow: hidden;\n }\n}\n\n.modal {\n flex-grow: 1;\n width: 100vw;\n height: 100vh;\n background: transparent;\n}\n\n.navigationVideo {\n z-index: 3;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n transition: transform 0.3s ease-in-out;\n text-align: center;\n}\n\n.hide {\n transform: translateY(114px);\n}\n\n.hideInfo {\n transform: translateY(48px);\n}\n\n.bottomButton {\n width: calc(100% - var(--gap-32));\n margin: var(--gap-16);\n background-color: var(--color-static-neutral-translucent-500-inverted);\n}\n\n.subtitles {\n padding: var(--gap-0) var(--gap-32);\n margin-bottom: var(--gap-16);\n width: 100%;\n text-align: center;\n opacity: 1;\n z-index: 1;\n transition
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.container {\n position: relative;\n overflow-x: hidden;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n padding-top: var(--sat);\n padding-bottom: var(--sab);\n\n &.mobile {\n overflow: hidden;\n }\n}\n\n.modal {\n flex-grow: 1;\n width: 100vw;\n height: 100vh;\n background: transparent;\n}\n\n.navigationVideo {\n z-index: 3;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n transition: transform 0.3s ease-in-out;\n text-align: center;\n}\n\n.hide {\n transform: translateY(114px);\n}\n\n.hideInfo {\n transform: translateY(48px);\n}\n\n.bottomButton {\n width: calc(100% - var(--gap-32));\n margin: var(--gap-16);\n background-color: var(--color-static-neutral-translucent-500-inverted);\n}\n\n.subtitles {\n padding: var(--gap-0) var(--gap-32);\n margin-bottom: var(--gap-16);\n width: 100%;\n text-align: center;\n opacity: 1;\n z-index: 1;\n transition:\n opacity 500ms ease-in-out,\n margin-bottom 270ms ease-in-out;\n}\n\n.hideSubtitles {\n opacity: 0;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,MAAM,CAAC,qBAAqB,CAAC,UAAU,CAAC,yBAAyB,CAAC,cAAc,CAAC,6BAAmH,CAAC;;;;"}
|
package/modern/Component.d.ts
CHANGED
package/modern/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { GalleryImage, ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n /**\n * Управление видимостью\n */\n open: boolean;\n\n /**\n * Массив изображений\n */\n images: GalleryImage[];\n\n /**\n * Зациклить галерею\n * @default true\n */\n loop?: boolean;\n\n /**\n * Индекс открытого изображение\n * @default 0\n */\n initialSlide?: number;\n\n /**\n * Обработчик закрытия\n */\n onClose: () => void;\n\n /**\n * Индекс текущего изображения\n */\n slideIndex?: number;\n\n /**\n * Обработчик изменения текущего изображения\n */\n onSlideIndexChange?: (index: number) => void;\n\n /**\n * Дополнительный класс для попапа\n */\n popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n open,\n images,\n slideIndex,\n initialSlide = 0,\n loop = true,\n onClose,\n onSlideIndexChange,\n popupClassName,\n}) => {\n const currentSlideIndexState = useState(initialSlide);\n const uncontrolled = slideIndex === undefined;\n const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n ? currentSlideIndexState\n : [slideIndex, onSlideIndexChange];\n\n const [swiper, setSwiper] = useState<SwiperCore>();\n const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n const isDesktop = useIsDesktop();\n\n const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n const slideTo = useCallback(\n (index: number) => {\n if (images[index]) {\n setCurrentSlideIndex?.(index);\n\n if (swiper) {\n setPlayingVideo(true);\n swiper.slideTo(index);\n }\n }\n },\n [images, setCurrentSlideIndex, swiper],\n );\n\n const slideNext = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex + 1;\n\n if (nextIndex >= images.length) {\n nextIndex = loop ? 0 : lastIndex;\n }\n\n slideTo(nextIndex);\n }, [images.length, loop, currentSlideIndex, slideTo]);\n\n const slidePrev = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex - 1;\n\n if (nextIndex < 0) {\n nextIndex = loop ? lastIndex : 0;\n }\n\n slideTo(nextIndex);\n }, [images.length, loop, currentSlideIndex, slideTo]);\n\n const setImageMeta = useCallback(\n (meta: ImageMeta, index: number) => {\n imagesMeta[index] = meta;\n\n setImagesMeta(imagesMeta.slice());\n },\n [imagesMeta],\n );\n\n const handleBottomButtonClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n if (bottomButton?.onClick) {\n bottomButton.onClick(e);\n }\n },\n [bottomButton],\n );\n\n const handleClose = useCallback(() => {\n onClose();\n\n if (uncontrolled) {\n setCurrentSlideIndex?.(initialSlide);\n }\n\n setFullScreen(false);\n }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n const handleEscapeKeyDown = () => {\n if (fullScreen) {\n setFullScreen(false);\n } else {\n handleClose();\n }\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!open || fullScreen) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n slidePrev();\n break;\n case 'ArrowRight':\n slideNext();\n break;\n }\n },\n [fullScreen, open, slideNext, slidePrev],\n );\n\n const onUnmount = useCallback(() => {\n setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n setMutedVideo(DEFAULT_MUTED_VIDEO);\n }, [setPlayingVideo]);\n\n useEffect(() => {\n if (!uncontrolled && !swiper?.destroyed) {\n swiper?.slideTo(currentSlideIndex);\n }\n }, [uncontrolled, currentSlideIndex, swiper]);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [handleKeyDown]);\n\n useEffect(() => {\n let startY: number;\n const abortController = new AbortController();\n const { signal } = abortController;\n\n document.addEventListener(\n 'touchstart',\n (e) => {\n startY = e.touches[0].clientY;\n },\n { signal },\n );\n\n document.addEventListener(\n 'touchmove',\n (e) => {\n const endY = e.changedTouches[0].clientY;\n const deltaY = startY - endY;\n\n // Если свайп вниз, закрываем галерею\n if (deltaY < SWIPE_THRESHOLD) {\n onClose();\n }\n },\n { signal },\n );\n\n return () => {\n abortController.abort();\n };\n }, [onClose]);\n\n const singleSlide = images.length === 1;\n\n const showNavigationBar = !singleSlide && !fullScreen;\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const galleryContext: GalleryContext = {\n view: isDesktop ? 'desktop' : 'mobile',\n singleSlide,\n currentSlideIndex,\n images,\n imagesMeta,\n fullScreen,\n initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n setFullScreen,\n playingVideo,\n setPlayingVideo,\n mutedVideo,\n setMutedVideo,\n hideNavigation,\n setHideNavigation,\n setImageMeta,\n slideNext,\n slidePrev,\n slideTo,\n getSwiper: () => swiper,\n setSwiper,\n onClose: handleClose,\n setCurrentSlideIndex,\n getCurrentImage: () => images[currentSlideIndex],\n getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n };\n\n return (\n <GalleryContext.Provider value={galleryContext}>\n <BaseModal\n open={open}\n className={cn(styles.modal, popupClassName)}\n onEscapeKeyDown={handleEscapeKeyDown}\n Backdrop={Backdrop}\n onUnmount={onUnmount}\n >\n <div\n className={cn(styles.container, {\n [styles.mobile]: !isDesktop,\n })}\n >\n {isDesktop ? <Header /> : <HeaderMobile />}\n {images.length === 1 ? <Single /> : <ImageViewer />}\n <nav\n className={cn({\n [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n })}\n >\n {!isDesktop && <Subtitles />}\n {isCurrentVideo && !isDesktop && bottomButton && (\n <BottomButton\n bottomButton={bottomButton}\n onClick={handleBottomButtonClick}\n className={styles.bottomButton}\n />\n )}\n\n {showNavigationBar && <NavigationBar />}\n {!isDesktop && <InfoBar />}\n </nav>\n </div>\n </BaseModal>\n </GalleryContext.Provider>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n /**\n * Управление видимостью\n */\n open: boolean;\n\n /**\n * Массив изображений\n */\n images: GalleryImage[];\n\n /**\n * Зациклить галерею\n * @default true\n */\n loop?: boolean;\n\n /**\n * Индекс открытого изображение\n * @default 0\n */\n initialSlide?: number;\n\n /**\n * Обработчик закрытия\n */\n onClose: () => void;\n\n /**\n * Индекс текущего изображения\n */\n slideIndex?: number;\n\n /**\n * Обработчик изменения текущего изображения\n */\n onSlideIndexChange?: (index: number) => void;\n\n /**\n * Дополнительный класс для попапа\n */\n popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n open,\n images,\n slideIndex,\n initialSlide = 0,\n loop = true,\n onClose,\n onSlideIndexChange,\n popupClassName,\n}) => {\n const currentSlideIndexState = useState(initialSlide);\n const uncontrolled = slideIndex === undefined;\n const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n ? currentSlideIndexState\n : [slideIndex, onSlideIndexChange];\n\n const [swiper, setSwiper] = useState<SwiperCore>();\n const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n const isDesktop = useIsDesktop();\n\n const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n const slideTo = useCallback(\n (index: number) => {\n if (images[index]) {\n setCurrentSlideIndex?.(index);\n\n if (swiper) {\n setPlayingVideo(true);\n swiper.slideTo(index);\n }\n }\n },\n [images, setCurrentSlideIndex, swiper],\n );\n\n const slideNext = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex + 1;\n\n if (nextIndex >= images.length) {\n nextIndex = loop ? 0 : lastIndex;\n }\n\n slideTo(nextIndex);\n }, [images.length, loop, currentSlideIndex, slideTo]);\n\n const slidePrev = useCallback(() => {\n const lastIndex = images.length - 1;\n\n let nextIndex = currentSlideIndex - 1;\n\n if (nextIndex < 0) {\n nextIndex = loop ? lastIndex : 0;\n }\n\n slideTo(nextIndex);\n }, [images.length, loop, currentSlideIndex, slideTo]);\n\n const setImageMeta = useCallback(\n (meta: ImageMeta, index: number) => {\n imagesMeta[index] = meta;\n\n setImagesMeta(imagesMeta.slice());\n },\n [imagesMeta],\n );\n\n const handleBottomButtonClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n if (bottomButton?.onClick) {\n bottomButton.onClick(e);\n }\n },\n [bottomButton],\n );\n\n const handleClose = useCallback(() => {\n onClose();\n\n if (uncontrolled) {\n setCurrentSlideIndex?.(initialSlide);\n }\n\n setFullScreen(false);\n }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n const handleEscapeKeyDown = () => {\n if (fullScreen) {\n setFullScreen(false);\n } else {\n handleClose();\n }\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!open || fullScreen) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n slidePrev();\n break;\n case 'ArrowRight':\n slideNext();\n break;\n }\n },\n [fullScreen, open, slideNext, slidePrev],\n );\n\n const onUnmount = useCallback(() => {\n setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n setMutedVideo(DEFAULT_MUTED_VIDEO);\n }, [setPlayingVideo]);\n\n useEffect(() => {\n if (!uncontrolled && !swiper?.destroyed) {\n swiper?.slideTo(currentSlideIndex);\n }\n }, [uncontrolled, currentSlideIndex, swiper]);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [handleKeyDown]);\n\n useEffect(() => {\n let startY: number;\n const abortController = new AbortController();\n const { signal } = abortController;\n\n document.addEventListener(\n 'touchstart',\n (e) => {\n startY = e.touches[0].clientY;\n },\n { signal },\n );\n\n document.addEventListener(\n 'touchmove',\n (e) => {\n const endY = e.changedTouches[0].clientY;\n const deltaY = startY - endY;\n\n // Если свайп вниз, закрываем галерею\n if (deltaY < SWIPE_THRESHOLD) {\n onClose();\n }\n },\n { signal },\n );\n\n return () => {\n abortController.abort();\n };\n }, [onClose]);\n\n const singleSlide = images.length === 1;\n\n const showNavigationBar = !singleSlide && !fullScreen;\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const galleryContext: GalleryContext = {\n view: isDesktop ? 'desktop' : 'mobile',\n singleSlide,\n currentSlideIndex,\n images,\n imagesMeta,\n fullScreen,\n initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n setFullScreen,\n playingVideo,\n setPlayingVideo,\n mutedVideo,\n setMutedVideo,\n hideNavigation,\n setHideNavigation,\n setImageMeta,\n slideNext,\n slidePrev,\n slideTo,\n getSwiper: () => swiper,\n setSwiper,\n onClose: handleClose,\n setCurrentSlideIndex,\n getCurrentImage: () => images[currentSlideIndex],\n getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n };\n\n return (\n <GalleryContext.Provider value={galleryContext}>\n <BaseModal\n open={open}\n className={cn(styles.modal, popupClassName)}\n onEscapeKeyDown={handleEscapeKeyDown}\n Backdrop={Backdrop}\n onUnmount={onUnmount}\n >\n <div\n className={cn(styles.container, {\n [styles.mobile]: !isDesktop,\n })}\n >\n {isDesktop ? <Header /> : <HeaderMobile />}\n {images.length === 1 ? <Single /> : <ImageViewer />}\n <nav\n className={cn({\n [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n })}\n >\n {!isDesktop && <Subtitles />}\n {isCurrentVideo && !isDesktop && bottomButton && (\n <BottomButton\n bottomButton={bottomButton}\n onClick={handleBottomButtonClick}\n className={styles.bottomButton}\n />\n )}\n\n {showNavigationBar && <NavigationBar />}\n {!isDesktop && <InfoBar />}\n </nav>\n </div>\n </BaseModal>\n </GalleryContext.Provider>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/bottom-button/Component.tsx"],"sourcesContent":["import React, { MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type TBottomButton } from '../../types';\n\nimport styles from './index.module.css';\n\ntype Props = {\n onClick: (e: MouseEvent) => void;\n className?: string;\n bottomButton: TBottomButton;\n};\n\nexport const BottomButton = ({ onClick, className, bottomButton }: Props) => {\n const timer = useRef<ReturnType<typeof setTimeout>>();\n\n const [visible, setVisible] = useState<boolean>(false);\n const { currentSlideIndex, getSwiper, singleSlide } = useContext(GalleryContext);\n\n useEffect(() => {\n const swiper = getSwiper();\n\n if ((currentSlideIndex === swiper?.activeIndex || singleSlide) && bottomButton.timeout) {\n if (timer.current) {\n clearTimeout(timer.current);\n }\n setVisible(false);\n timer.current = setTimeout(() => setVisible(true), bottomButton.timeout * 1000);\n }\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, [bottomButton.timeout, currentSlideIndex, singleSlide]);\n\n return (\n <Button\n size={56}\n className={cn(\n styles.component,\n { [styles.notVisible]: !visible && bottomButton.timeout },\n className,\n )}\n onClick={onClick}\n >\n <Typography.Text color='static-primary-light'>{bottomButton.text}</Typography.Text>\n </Button>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAS,KAAI;AACxE,IAAA,MAAM,KAAK,GAAG,MAAM,EAAiC;IAErD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AACtD,IAAA,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;IAEhF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,SAAS,EAAE;AAE1B,QAAA,IAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,WAAW,IAAI,WAAW,KAAK,YAAY,CAAC,OAAO,EAAE;YACpF,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;AAC9B;YACD,UAAU,CAAC,KAAK,CAAC;AACjB,YAAA,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;AAClF;;KAEJ,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE1D,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,EACzD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAE,EAAA,YAAY,CAAC,IAAI,CAAmB,CAC9E;AAEjB;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/bottom-button/Component.tsx"],"sourcesContent":["import React, { type MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type TBottomButton } from '../../types';\n\nimport styles from './index.module.css';\n\ntype Props = {\n onClick: (e: MouseEvent) => void;\n className?: string;\n bottomButton: TBottomButton;\n};\n\nexport const BottomButton = ({ onClick, className, bottomButton }: Props) => {\n const timer = useRef<ReturnType<typeof setTimeout>>();\n\n const [visible, setVisible] = useState<boolean>(false);\n const { currentSlideIndex, getSwiper, singleSlide } = useContext(GalleryContext);\n\n useEffect(() => {\n const swiper = getSwiper();\n\n if ((currentSlideIndex === swiper?.activeIndex || singleSlide) && bottomButton.timeout) {\n if (timer.current) {\n clearTimeout(timer.current);\n }\n setVisible(false);\n timer.current = setTimeout(() => setVisible(true), bottomButton.timeout * 1000);\n }\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, [bottomButton.timeout, currentSlideIndex, singleSlide]);\n\n return (\n <Button\n size={56}\n className={cn(\n styles.component,\n { [styles.notVisible]: !visible && bottomButton.timeout },\n className,\n )}\n onClick={onClick}\n >\n <Typography.Text color='static-primary-light'>{bottomButton.text}</Typography.Text>\n </Button>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAS,KAAI;AACxE,IAAA,MAAM,KAAK,GAAG,MAAM,EAAiC;IAErD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AACtD,IAAA,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;IAEhF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,SAAS,EAAE;AAE1B,QAAA,IAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,WAAW,IAAI,WAAW,KAAK,YAAY,CAAC,OAAO,EAAE;YACpF,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;AAC9B;YACD,UAAU,CAAC,KAAK,CAAC;AACjB,YAAA,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;AAClF;;KAEJ,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE1D,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,EACzD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAE,EAAA,YAAY,CAAC,IAAI,CAAmB,CAC9E;AAEjB;;;;"}
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
--color-static-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
3
3
|
--color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
|
|
4
4
|
--color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
|
|
5
|
-
} .
|
|
5
|
+
} .gallery__component_1ix35 {
|
|
6
6
|
background-color: var(--color-static-neutral-translucent-500-inverted);
|
|
7
|
-
} .
|
|
7
|
+
} .gallery__component_1ix35:hover {
|
|
8
8
|
background-color: var(--color-static-neutral-translucent-500-inverted-hover);
|
|
9
|
-
} .
|
|
9
|
+
} .gallery__component_1ix35:active {
|
|
10
10
|
background-color: var(--color-static-neutral-translucent-500-inverted-press);
|
|
11
|
-
} .
|
|
11
|
+
} .gallery__component_1ix35 {
|
|
12
12
|
|
|
13
13
|
transition: transform 1s ease-in-out;
|
|
14
14
|
will-change: transform;
|
|
15
|
-
} .
|
|
15
|
+
} .gallery__notVisible_1ix35 {
|
|
16
16
|
transform: translateY(250%);
|
|
17
17
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"
|
|
3
|
+
const styles = {"component":"gallery__component_1ix35","notVisible":"gallery__notVisible_1ix35"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/bottom-button/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n background-color: var(--color-static-neutral-translucent-500-inverted);\n &:hover {\n background-color: var(--color-static-neutral-translucent-500-inverted-hover);\n }\n &:active {\n background-color: var(--color-static-neutral-translucent-500-inverted-press);\n }\n\n transition: transform 1s ease-in-out;\n will-change: transform;\n}\n\n.notVisible {\n transform: translateY(250%);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/bottom-button/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n background-color: var(--color-static-neutral-translucent-500-inverted);\n &:hover {\n background-color: var(--color-static-neutral-translucent-500-inverted-hover);\n }\n &:active {\n background-color: var(--color-static-neutral-translucent-500-inverted-press);\n }\n\n transition: transform 1s ease-in-out;\n will-change: transform;\n}\n\n.notVisible {\n transform: translateY(250%);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
} :root {
|
|
7
7
|
--gap-2xl: 32px;
|
|
8
8
|
--gap-32: var(--gap-2xl);
|
|
9
|
-
} .
|
|
9
|
+
} .gallery__buttons_19pu0 {
|
|
10
10
|
display: flex;
|
|
11
|
-
padding-left: var(--gap-32)
|
|
12
|
-
} .
|
|
11
|
+
padding-left: var(--gap-32);
|
|
12
|
+
} .gallery__buttons_19pu0 path {
|
|
13
13
|
color: var(--color-static-neutral-translucent-1300-inverted);
|
|
14
|
-
} .
|
|
14
|
+
} .gallery__iconButton_19pu0 path {
|
|
15
15
|
color: var(--color-static-neutral-100);
|
|
16
|
-
} .
|
|
16
|
+
} .gallery__iconButton_19pu0:hover path {
|
|
17
17
|
color: var(--color-static-neutral-100-hover);
|
|
18
|
-
} .
|
|
18
|
+
} .gallery__iconButton_19pu0:active path {
|
|
19
19
|
color: var(--color-static-neutral-100-press);
|
|
20
20
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC, MutableRefObject } from 'react';
|
|
2
|
-
import { IconButtonProps } from '@alfalab/core-components-icon-button/modern';
|
|
1
|
+
import { type FC, type MutableRefObject } from 'react';
|
|
2
|
+
import { type IconButtonProps } from '@alfalab/core-components-icon-button/modern';
|
|
3
3
|
declare type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
|
|
4
4
|
buttonRef?: MutableRefObject<HTMLButtonElement | null>;
|
|
5
5
|
download?: string | boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { FC, MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';\nimport { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';\nimport { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';\nimport { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\nimport { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';\nimport { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';\nimport { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';\nimport { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';\nimport { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';\nimport { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';\n\nimport styles from './index.module.css';\n\ntype Props = Omit<IconButtonProps, 'icon' | 'colors'> & {\n buttonRef?: MutableRefObject<HTMLButtonElement | null>;\n download?: string | boolean;\n};\n\nexport const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Открыть в полноэкранном режиме'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={ArrowsOutwardMIcon}\n aria-label='Открыть в полноэкранном режиме'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={ArrowLeftMIcon}\n aria-label='Вернуться назад'\n className={styles.iconButton}\n />\n);\n\nexport const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={PlayCompactMIcon}\n aria-label='Проиграть видео'\n className={cn(styles.iconButton, className)}\n />\n);\n\nexport const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={PauseCompactMIcon}\n aria-label='Поставить паузу на видео'\n className={cn(styles.iconButton, className)}\n />\n);\n\nexport const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Выйти из полноэкранного режима'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={ArrowsInwardMIcon}\n aria-label='Выйти из полноэкранного режима'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Выключить звук'\n fallbackPlacements={['bottom-end']}\n targetClassName={className}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={SoundMIcon}\n aria-label='Выключить звук'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Включить звук'\n fallbackPlacements={['bottom-end']}\n targetClassName={className}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={SoundCrossMIcon}\n aria-label='Включить звук'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const Download: FC<Props> = (props) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Скачать'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...props}\n icon={PointerDownMIcon}\n aria-label='Скачать'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const Share: FC<Props> = (props) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Поделиться'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...props}\n icon={ShareMIcon}\n aria-label='Скачать'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const Exit: FC<Props> = (props) => (\n <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { type FC, type MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';\nimport { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';\nimport { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';\nimport { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\nimport { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';\nimport { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';\nimport { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';\nimport { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';\nimport { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';\nimport { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';\n\nimport styles from './index.module.css';\n\ntype Props = Omit<IconButtonProps, 'icon' | 'colors'> & {\n buttonRef?: MutableRefObject<HTMLButtonElement | null>;\n download?: string | boolean;\n};\n\nexport const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Открыть в полноэкранном режиме'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={ArrowsOutwardMIcon}\n aria-label='Открыть в полноэкранном режиме'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={ArrowLeftMIcon}\n aria-label='Вернуться назад'\n className={styles.iconButton}\n />\n);\n\nexport const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={PlayCompactMIcon}\n aria-label='Проиграть видео'\n className={cn(styles.iconButton, className)}\n />\n);\n\nexport const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={PauseCompactMIcon}\n aria-label='Поставить паузу на видео'\n className={cn(styles.iconButton, className)}\n />\n);\n\nexport const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Выйти из полноэкранного режима'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={ArrowsInwardMIcon}\n aria-label='Выйти из полноэкранного режима'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Выключить звук'\n fallbackPlacements={['bottom-end']}\n targetClassName={className}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={SoundMIcon}\n aria-label='Выключить звук'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Включить звук'\n fallbackPlacements={['bottom-end']}\n targetClassName={className}\n >\n <IconButton\n {...restProps}\n ref={buttonRef}\n icon={SoundCrossMIcon}\n aria-label='Включить звук'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const Download: FC<Props> = (props) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Скачать'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...props}\n icon={PointerDownMIcon}\n aria-label='Скачать'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const Share: FC<Props> = (props) => (\n <TooltipDesktop\n trigger='hover'\n position='bottom'\n content='Поделиться'\n fallbackPlacements={['bottom-end']}\n >\n <IconButton\n {...props}\n icon={ShareMIcon}\n aria-label='Скачать'\n className={styles.iconButton}\n />\n </TooltipDesktop>\n);\n\nexport const Exit: FC<Props> = (props) => (\n <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/buttons/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.buttons {\n display: flex;\n padding-left: var(--gap-32);\n\n & path {\n color: var(--color-static-neutral-translucent-1300-inverted);\n }\n}\n\n.iconButton {\n & path {\n color: var(--color-static-neutral-100);\n }\n\n &:hover path {\n color: var(--color-static-neutral-100-hover);\n }\n\n &:active path {\n color: var(--color-static-neutral-100-press);\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAoC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/buttons/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.buttons {\n display: flex;\n padding-left: var(--gap-32);\n\n & path {\n color: var(--color-static-neutral-translucent-1300-inverted);\n }\n}\n\n.iconButton {\n & path {\n color: var(--color-static-neutral-100);\n }\n\n &:hover path {\n color: var(--color-static-neutral-100-hover);\n }\n\n &:active path {\n color: var(--color-static-neutral-100-press);\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAoC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { type FC } from 'react';
|
|
2
2
|
export declare const Header: FC;
|