@fluentui/react-skeleton 9.1.11 → 9.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -2
- package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js +34 -44
- package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.js +67 -64
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-skeleton
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 05 Aug 2024 22:31:39 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.1.12)
|
|
8
|
+
|
|
9
|
+
Mon, 05 Aug 2024 22:31:39 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.1.11..@fluentui/react-skeleton_v9.1.12)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- update wave animation ([PR #32077](https://github.com/microsoft/fluentui/pull/32077) by kirpadv@gmail.com)
|
|
15
|
+
|
|
7
16
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.1.11)
|
|
8
17
|
|
|
9
|
-
Tue, 30 Jul 2024 18:
|
|
18
|
+
Tue, 30 Jul 2024 18:47:35 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.1.10..@fluentui/react-skeleton_v9.1.11)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -1,23 +1,11 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
-
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
2
|
import { tokens } from '@fluentui/react-theme';
|
|
4
3
|
export const skeletonItemClassNames = {
|
|
5
4
|
root: 'fui-SkeletonItem'
|
|
6
5
|
};
|
|
7
6
|
const skeletonWaveAnimation = {
|
|
8
|
-
from: {
|
|
9
|
-
backgroundPositionX: '300% /* @noflip */'
|
|
10
|
-
},
|
|
11
|
-
to: {
|
|
12
|
-
backgroundPositionX: '0% /* @noflip */'
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const skeletonWaveAnimationRTL = {
|
|
16
|
-
from: {
|
|
17
|
-
backgroundPositionX: '0% /* @noflip */'
|
|
18
|
-
},
|
|
19
7
|
to: {
|
|
20
|
-
|
|
8
|
+
transform: 'translate(100%)'
|
|
21
9
|
}
|
|
22
10
|
};
|
|
23
11
|
const skeletonPulseAnimation = {
|
|
@@ -40,49 +28,54 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
40
28
|
B68tc82: 0,
|
|
41
29
|
Bmxbyg5: 0,
|
|
42
30
|
Bpg54ce: "f1a3p1vp",
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
31
|
+
Bsft5z2: "f13zj6fq",
|
|
32
|
+
ap17g6: "f2gz7yw",
|
|
33
|
+
E3zdtr: "f1mdlcz9",
|
|
34
|
+
By385i5: 0,
|
|
35
|
+
Eqx8gd: 0,
|
|
36
|
+
B1piin3: 0,
|
|
37
|
+
bn5sak: 0,
|
|
38
|
+
B58onuk: "f1nt53hs",
|
|
39
|
+
s9ouvv: "f18xs7ez",
|
|
40
|
+
xr36ep: "ffm3629",
|
|
41
|
+
Bitv4sc: "f1f9zsvm",
|
|
42
|
+
Jx5sug: "f1ub80pn",
|
|
43
|
+
Hzyzrh: "f1e7twep"
|
|
52
44
|
},
|
|
53
45
|
wave: {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
Bv12yb3: "f105t0nc",
|
|
60
|
-
Bcmaq0h: ["f101ziu5", "f152emvt"],
|
|
61
|
-
Bpep1pd: "f9jxvrw"
|
|
46
|
+
De3pzq: "f1gjxg63",
|
|
47
|
+
Br128sd: ["f3fo419", "f6m9r4"],
|
|
48
|
+
h62rwi: ["ftnv2js", "f12jzhyt"],
|
|
49
|
+
b1kco5: ["fig1c6l", "f1rv5y9h"],
|
|
50
|
+
oi31me: "f103n15n"
|
|
62
51
|
},
|
|
63
52
|
pulse: {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
53
|
+
Br128sd: "f171zwvm",
|
|
54
|
+
xr36ep: "fs3pcyf",
|
|
55
|
+
Bjyk6c5: "f1yu5riq"
|
|
67
56
|
},
|
|
68
57
|
translucent: {
|
|
69
|
-
|
|
58
|
+
De3pzq: "f162mh4z",
|
|
59
|
+
h62rwi: ["flvf4r0", "f1uek97b"]
|
|
70
60
|
},
|
|
71
61
|
translucentPulse: {
|
|
72
|
-
De3pzq: "
|
|
62
|
+
De3pzq: "flu3bqm",
|
|
63
|
+
Bjyk6c5: "fxucc0w"
|
|
73
64
|
}
|
|
74
65
|
}, {
|
|
75
66
|
d: [".f10pi13n{position:relative;}", [".f1a3p1vp{overflow:hidden;}", {
|
|
76
67
|
p: -1
|
|
77
|
-
}], ".
|
|
78
|
-
|
|
68
|
+
}], ".f13zj6fq::after{content:\"\";}", ".f2gz7yw::after{display:block;}", ".f1mdlcz9::after{position:absolute;}", [".f1nt53hs::after{inset:0;}", {
|
|
69
|
+
p: -1
|
|
70
|
+
}], ".f18xs7ez::after{animation-iteration-count:infinite;}", ".ffm3629::after{animation-duration:3s;}", ".f1f9zsvm::after{animation-timing-function:ease-in-out;}", ".f1gjxg63{background-color:var(--colorNeutralStencil1);}", ".f3fo419::after{animation-name:f1efwx7q;}", ".f6m9r4::after{animation-name:f1kkgpz1;}", ".ftnv2js::after{background-image:linear-gradient(\n to right,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}", ".f12jzhyt::after{background-image:linear-gradient(\n to left,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}", ".fig1c6l::after{transform:translate(-100%);}", ".f1rv5y9h::after{transform:translate(100%);}", ".f171zwvm::after{animation-name:f12o7gg6;}", ".fs3pcyf::after{animation-duration:1s;}", ".f1yu5riq::after{background-color:var(--colorNeutralStencil1);}", ".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}", ".flvf4r0::after{background-image:linear-gradient(\n to right,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}", ".f1uek97b::after{background-image:linear-gradient(\n to left,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}", ".flu3bqm{background-color:none;}", ".fxucc0w::after{background-color:var(--colorNeutralStencil1Alpha);}"],
|
|
71
|
+
m: [["@media screen and (prefers-reduced-motion: reduce){.f1ub80pn::after{animation-duration:0.01ms;}}", {
|
|
79
72
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
80
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
73
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1e7twep::after{animation-iteration-count:1;}}", {
|
|
81
74
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
82
|
-
}], ["@media screen and (forced-colors: active){.
|
|
75
|
+
}], ["@media screen and (forced-colors: active){.f103n15n::after{background-color:WindowText;}}", {
|
|
83
76
|
m: "screen and (forced-colors: active)"
|
|
84
77
|
}]],
|
|
85
|
-
k: ["@keyframes
|
|
78
|
+
k: ["@keyframes f1efwx7q{to{transform:translate(100%);}}", "@keyframes f1kkgpz1{to{transform:translate(-100%);}}", "@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"]
|
|
86
79
|
});
|
|
87
80
|
const useRectangleStyles = /*#__PURE__*/__styles({
|
|
88
81
|
"8": {
|
|
@@ -239,14 +232,11 @@ export const useSkeletonItemStyles_unstable = state => {
|
|
|
239
232
|
size,
|
|
240
233
|
shape
|
|
241
234
|
} = state;
|
|
242
|
-
const {
|
|
243
|
-
dir
|
|
244
|
-
} = useFluent();
|
|
245
235
|
const rootStyles = useStyles();
|
|
246
236
|
const rectStyles = useRectangleStyles();
|
|
247
237
|
const sizeStyles = useSizeStyles();
|
|
248
238
|
const circleStyles = useCircleSizeStyles();
|
|
249
|
-
state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === '
|
|
239
|
+
state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
|
|
250
240
|
return state;
|
|
251
241
|
};
|
|
252
242
|
//# sourceMappingURL=useSkeletonItemStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Jx5sug","Hzyzrh","wave","De3pzq","Br128sd","h62rwi","b1kco5","oi31me","pulse","Bjyk6c5","translucent","translucentPulse","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n }\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n }\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n }\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`\n }\n },\n translucentPulse: {\n backgroundColor: 'none',\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,qBAAqB,GAAG;EAC1BC,EAAE,EAAE;IACAC,SAAS,EAAE;EACf;AACJ,CAAC;AACD,MAAMC,sBAAsB,GAAG;EAC3B,IAAI,EAAE;IACFC,OAAO,EAAE;EACb,CAAC;EACD,KAAK,EAAE;IACHA,OAAO,EAAE;EACb,CAAC;EACD,MAAM,EAAE;IACJA,OAAO,EAAE;EACb;AACJ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAI,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAJ,OAAA;IAAAN,MAAA;IAAAW,OAAA;EAAA;EAAAC,WAAA;IAAAP,MAAA;IAAAE,MAAA;EAAA;EAAAM,gBAAA;IAAAR,MAAA;IAAAM,OAAA;EAAA;AAAA;EAAAG,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAwDrB,CAAC;AACF,MAAMC,kBAAkB,gBAAG1C,QAAA;EAAA;IAAA2C,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAAvC,IAAA;IAAAwC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;AAAA,CAqD1B,CAAC;AACF,MAAMW,aAAa,gBAAGlD,QAAA;EAAA;IAAA4C,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAiErB,CAAC;AACF,MAAMa,mBAAmB,gBAAGnD,QAAA;EAAAI,IAAA;IAAAyC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;AAAA,CAI3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGJ,KAAK;EACpD,MAAMK,UAAU,GAAGhD,SAAS,CAAC,CAAC;EAC9B,MAAMiD,UAAU,GAAGjB,kBAAkB,CAAC,CAAC;EACvC,MAAMkB,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAMW,YAAY,GAAGV,mBAAmB,CAAC,CAAC;EAC1CE,KAAK,CAACjD,IAAI,CAAC0D,SAAS,GAAG7D,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEsD,UAAU,CAACtD,IAAI,EAAEkD,SAAS,KAAK,MAAM,IAAII,UAAU,CAAC9B,IAAI,EAAE0B,SAAS,KAAK,OAAO,IAAII,UAAU,CAACxB,KAAK,EAAEqB,UAAU,KAAK,aAAa,IAAIG,UAAU,CAACtB,WAAW,EAAEkB,SAAS,KAAK,OAAO,IAAIC,UAAU,KAAK,aAAa,IAAIG,UAAU,CAACrB,gBAAgB,EAAEoB,KAAK,KAAK,WAAW,IAAIE,UAAU,CAACvD,IAAI,EAAEqD,KAAK,KAAK,WAAW,IAAIE,UAAU,CAACH,IAAI,CAAC,EAAEC,KAAK,KAAK,QAAQ,IAAIG,UAAU,CAACJ,IAAI,CAAC,EAAEC,KAAK,KAAK,QAAQ,IAAII,YAAY,CAACzD,IAAI,EAAEqD,KAAK,KAAK,QAAQ,IAAIG,UAAU,CAACJ,IAAI,CAAC,EAAEH,KAAK,CAACjD,IAAI,CAAC0D,SAAS,CAAC;EACvhB,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -17,24 +17,12 @@ _export(exports, {
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
const _react = require("@griffel/react");
|
|
20
|
-
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
21
20
|
const skeletonItemClassNames = {
|
|
22
21
|
root: 'fui-SkeletonItem'
|
|
23
22
|
};
|
|
24
23
|
const skeletonWaveAnimation = {
|
|
25
|
-
from: {
|
|
26
|
-
backgroundPositionX: '300% /* @noflip */'
|
|
27
|
-
},
|
|
28
|
-
to: {
|
|
29
|
-
backgroundPositionX: '0% /* @noflip */'
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
const skeletonWaveAnimationRTL = {
|
|
33
|
-
from: {
|
|
34
|
-
backgroundPositionX: '0% /* @noflip */'
|
|
35
|
-
},
|
|
36
24
|
to: {
|
|
37
|
-
|
|
25
|
+
transform: 'translate(100%)'
|
|
38
26
|
}
|
|
39
27
|
};
|
|
40
28
|
const skeletonPulseAnimation = {
|
|
@@ -56,45 +44,51 @@ const skeletonPulseAnimation = {
|
|
|
56
44
|
B68tc82: 0,
|
|
57
45
|
Bmxbyg5: 0,
|
|
58
46
|
Bpg54ce: "f1a3p1vp",
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
47
|
+
Bsft5z2: "f13zj6fq",
|
|
48
|
+
ap17g6: "f2gz7yw",
|
|
49
|
+
E3zdtr: "f1mdlcz9",
|
|
50
|
+
By385i5: 0,
|
|
51
|
+
Eqx8gd: 0,
|
|
52
|
+
B1piin3: 0,
|
|
53
|
+
bn5sak: 0,
|
|
54
|
+
B58onuk: "f1nt53hs",
|
|
55
|
+
s9ouvv: "f18xs7ez",
|
|
56
|
+
xr36ep: "ffm3629",
|
|
57
|
+
Bitv4sc: "f1f9zsvm",
|
|
58
|
+
Jx5sug: "f1ub80pn",
|
|
59
|
+
Hzyzrh: "f1e7twep"
|
|
68
60
|
},
|
|
69
61
|
wave: {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
"
|
|
73
|
-
"
|
|
62
|
+
De3pzq: "f1gjxg63",
|
|
63
|
+
Br128sd: [
|
|
64
|
+
"f3fo419",
|
|
65
|
+
"f6m9r4"
|
|
74
66
|
],
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
Bv12yb3: "f105t0nc",
|
|
79
|
-
Bcmaq0h: [
|
|
80
|
-
"f101ziu5",
|
|
81
|
-
"f152emvt"
|
|
67
|
+
h62rwi: [
|
|
68
|
+
"ftnv2js",
|
|
69
|
+
"f12jzhyt"
|
|
82
70
|
],
|
|
83
|
-
|
|
71
|
+
b1kco5: [
|
|
72
|
+
"fig1c6l",
|
|
73
|
+
"f1rv5y9h"
|
|
74
|
+
],
|
|
75
|
+
oi31me: "f103n15n"
|
|
84
76
|
},
|
|
85
77
|
pulse: {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
78
|
+
Br128sd: "f171zwvm",
|
|
79
|
+
xr36ep: "fs3pcyf",
|
|
80
|
+
Bjyk6c5: "f1yu5riq"
|
|
89
81
|
},
|
|
90
82
|
translucent: {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
"
|
|
83
|
+
De3pzq: "f162mh4z",
|
|
84
|
+
h62rwi: [
|
|
85
|
+
"flvf4r0",
|
|
86
|
+
"f1uek97b"
|
|
94
87
|
]
|
|
95
88
|
},
|
|
96
89
|
translucentPulse: {
|
|
97
|
-
De3pzq: "
|
|
90
|
+
De3pzq: "flu3bqm",
|
|
91
|
+
Bjyk6c5: "fxucc0w"
|
|
98
92
|
}
|
|
99
93
|
}, {
|
|
100
94
|
d: [
|
|
@@ -105,47 +99,57 @@ const skeletonPulseAnimation = {
|
|
|
105
99
|
p: -1
|
|
106
100
|
}
|
|
107
101
|
],
|
|
108
|
-
".
|
|
109
|
-
".
|
|
110
|
-
".
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
".
|
|
118
|
-
".
|
|
119
|
-
".
|
|
120
|
-
".f1iuewzk{animation-duration:1s;}",
|
|
102
|
+
".f13zj6fq::after{content:\"\";}",
|
|
103
|
+
".f2gz7yw::after{display:block;}",
|
|
104
|
+
".f1mdlcz9::after{position:absolute;}",
|
|
105
|
+
[
|
|
106
|
+
".f1nt53hs::after{inset:0;}",
|
|
107
|
+
{
|
|
108
|
+
p: -1
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
".f18xs7ez::after{animation-iteration-count:infinite;}",
|
|
112
|
+
".ffm3629::after{animation-duration:3s;}",
|
|
113
|
+
".f1f9zsvm::after{animation-timing-function:ease-in-out;}",
|
|
121
114
|
".f1gjxg63{background-color:var(--colorNeutralStencil1);}",
|
|
122
|
-
".
|
|
123
|
-
".
|
|
124
|
-
".
|
|
115
|
+
".f3fo419::after{animation-name:f1efwx7q;}",
|
|
116
|
+
".f6m9r4::after{animation-name:f1kkgpz1;}",
|
|
117
|
+
".ftnv2js::after{background-image:linear-gradient(\n to right,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}",
|
|
118
|
+
".f12jzhyt::after{background-image:linear-gradient(\n to left,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}",
|
|
119
|
+
".fig1c6l::after{transform:translate(-100%);}",
|
|
120
|
+
".f1rv5y9h::after{transform:translate(100%);}",
|
|
121
|
+
".f171zwvm::after{animation-name:f12o7gg6;}",
|
|
122
|
+
".fs3pcyf::after{animation-duration:1s;}",
|
|
123
|
+
".f1yu5riq::after{background-color:var(--colorNeutralStencil1);}",
|
|
124
|
+
".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}",
|
|
125
|
+
".flvf4r0::after{background-image:linear-gradient(\n to right,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}",
|
|
126
|
+
".f1uek97b::after{background-image:linear-gradient(\n to left,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}",
|
|
127
|
+
".flu3bqm{background-color:none;}",
|
|
128
|
+
".fxucc0w::after{background-color:var(--colorNeutralStencil1Alpha);}"
|
|
125
129
|
],
|
|
126
130
|
m: [
|
|
127
131
|
[
|
|
128
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
132
|
+
"@media screen and (prefers-reduced-motion: reduce){.f1ub80pn::after{animation-duration:0.01ms;}}",
|
|
129
133
|
{
|
|
130
134
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
131
135
|
}
|
|
132
136
|
],
|
|
133
137
|
[
|
|
134
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
138
|
+
"@media screen and (prefers-reduced-motion: reduce){.f1e7twep::after{animation-iteration-count:1;}}",
|
|
135
139
|
{
|
|
136
140
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
137
141
|
}
|
|
138
142
|
],
|
|
139
143
|
[
|
|
140
|
-
"@media screen and (forced-colors: active){.
|
|
144
|
+
"@media screen and (forced-colors: active){.f103n15n::after{background-color:WindowText;}}",
|
|
141
145
|
{
|
|
142
146
|
m: "screen and (forced-colors: active)"
|
|
143
147
|
}
|
|
144
148
|
]
|
|
145
149
|
],
|
|
146
150
|
k: [
|
|
147
|
-
"@keyframes
|
|
148
|
-
"@keyframes
|
|
151
|
+
"@keyframes f1efwx7q{to{transform:translate(100%);}}",
|
|
152
|
+
"@keyframes f1kkgpz1{to{transform:translate(-100%);}}",
|
|
149
153
|
"@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"
|
|
150
154
|
]
|
|
151
155
|
});
|
|
@@ -355,11 +359,10 @@ const useCircleSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
355
359
|
const useSkeletonItemStyles_unstable = (state)=>{
|
|
356
360
|
'use no memo';
|
|
357
361
|
const { animation, appearance, size, shape } = state;
|
|
358
|
-
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
359
362
|
const rootStyles = useStyles();
|
|
360
363
|
const rectStyles = useRectangleStyles();
|
|
361
364
|
const sizeStyles = useSizeStyles();
|
|
362
365
|
const circleStyles = useCircleSizeStyles();
|
|
363
|
-
state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === '
|
|
366
|
+
state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
|
|
364
367
|
return state;
|
|
365
368
|
}; //# sourceMappingURL=useSkeletonItemStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n from: {\n backgroundPositionX: '300% /* @noflip */'\n },\n to: {\n backgroundPositionX: '0% /* @noflip */'\n }\n};\nconst skeletonWaveAnimationRTL = {\n from: {\n backgroundPositionX: '0% /* @noflip */'\n },\n to: {\n backgroundPositionX: '300% /* @noflip */'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n backgroundSize: '300% 100%',\n backgroundPositionX: 'center',\n backgroundPositionY: 'center',\n backgroundAttachment: 'fixed',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n },\n wave: {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n },\n waveRtl: {\n animationName: skeletonWaveAnimationRTL,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n },\n pulse: {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n },\n translucent: {\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1Alpha} 0%,\n ${tokens.colorNeutralStencil2Alpha} 50%,\n ${tokens.colorNeutralStencil1Alpha} 100%)`\n },\n translucentPulse: {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const { dir } = useFluent();\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'wave' && dir === 'rtl' && rootStyles.waveRtl, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"names":["skeletonItemClassNames","useSkeletonItemStyles_unstable","root","skeletonWaveAnimation","from","backgroundPositionX","to","skeletonWaveAnimationRTL","skeletonPulseAnimation","opacity","useStyles","__styles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bkjc3bi","B8a6bjv","Bpptf2m","Bgh53k4","w3vfg9","vin17d","Ezkn3b","Gqtpxc","B3vm3ge","wave","Bv12yb3","Bcmaq0h","Bpep1pd","waveRtl","pulse","De3pzq","translucent","translucentPulse","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","state","animation","appearance","size","shape","dir","useFluent","rootStyles","rectStyles","sizeStyles","circleStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n }\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n }\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n }\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`\n }\n },\n translucentPulse: {\n backgroundColor: 'none',\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"names":["skeletonItemClassNames","useSkeletonItemStyles_unstable","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","__styles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Jx5sug","Hzyzrh","wave","De3pzq","Br128sd","h62rwi","b1kco5","oi31me","pulse","Bjyk6c5","translucent","translucentPulse","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|