@dynatrace/strato-components 0.85.41 → 0.85.60
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/buttons/button/Button.css +17 -17
- package/buttons/button/Button.sty.js +4 -4
- package/buttons/button/utils/focus-without-scrolling.js +1 -1
- package/content/progress/ProgressBar.css +14 -14
- package/content/progress/ProgressBar.sty.js +2 -2
- package/content/progress/ProgressBarIcon.css +2 -2
- package/content/progress/ProgressBarIcon.sty.js +1 -1
- package/content/progress/ProgressBarLabel.css +4 -4
- package/content/progress/ProgressBarLabel.sty.js +1 -1
- package/content/progress/ProgressBarValue.css +9 -9
- package/content/progress/ProgressBarValue.sty.js +1 -1
- package/content/progress/ProgressCircle.css +16 -16
- package/content/progress/ProgressCircle.sty.d.ts +1 -1
- package/content/progress/ProgressCircle.sty.js +6 -6
- package/content/skeleton/Skeleton.css +6 -6
- package/content/skeleton/Skeleton.sty.js +1 -1
- package/core/components/app-root/AppRoot.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +2 -0
- package/core/styles/focusRing.css +76 -76
- package/core/styles/focusRing.sty.js +2 -2
- package/core/utils/_is-string-children.d.ts +1 -1
- package/core/utils/colorUtils.css +64 -64
- package/core/utils/colorUtils.sty.js +2 -2
- package/core/utils/focus-management/attempt-focus.js +1 -1
- package/esm/buttons/button/Button.css +17 -17
- package/esm/buttons/button/Button.js.map +1 -1
- package/esm/buttons/button/Button.sty.js +4 -4
- package/esm/buttons/button/Button.sty.js.map +2 -2
- package/esm/buttons/button/utils/focus-without-scrolling.js +1 -1
- package/esm/buttons/button/utils/focus-without-scrolling.js.map +2 -2
- package/esm/content/progress/ProgressBar.css +14 -14
- package/esm/content/progress/ProgressBar.sty.js +2 -2
- package/esm/content/progress/ProgressBar.sty.js.map +2 -2
- package/esm/content/progress/ProgressBarIcon.css +2 -2
- package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
- package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarLabel.css +4 -4
- package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
- package/esm/content/progress/ProgressBarLabel.sty.js.map +2 -2
- package/esm/content/progress/ProgressBarValue.css +9 -9
- package/esm/content/progress/ProgressBarValue.sty.js +1 -1
- package/esm/content/progress/ProgressBarValue.sty.js.map +2 -2
- package/esm/content/progress/ProgressCircle.css +16 -16
- package/esm/content/progress/ProgressCircle.sty.js +6 -6
- package/esm/content/progress/ProgressCircle.sty.js.map +2 -2
- package/esm/content/skeleton/Skeleton.css +6 -6
- package/esm/content/skeleton/Skeleton.sty.js +1 -1
- package/esm/content/skeleton/Skeleton.sty.js.map +2 -2
- package/esm/core/components/app-root/AppRoot.js +1 -1
- package/esm/core/components/app-root/AppRoot.js.map +2 -2
- package/esm/core/index.js +2 -0
- package/esm/core/index.js.map +2 -2
- package/esm/core/styles/focusRing.css +76 -76
- package/esm/core/styles/focusRing.sty.js +2 -2
- package/esm/core/styles/focusRing.sty.js.map +2 -2
- package/esm/core/utils/_is-string-children.js.map +2 -2
- package/esm/core/utils/colorUtils.css +64 -64
- package/esm/core/utils/colorUtils.sty.js +2 -2
- package/esm/core/utils/colorUtils.sty.js.map +2 -2
- package/esm/core/utils/focus-management/attempt-focus.js +1 -1
- package/esm/core/utils/focus-management/attempt-focus.js.map +2 -2
- package/esm/core/utils/merge-props.js.map +1 -1
- package/esm/layouts/container/Container.css +4 -4
- package/esm/layouts/container/Container.sty.js +1 -1
- package/esm/layouts/container/Container.sty.js.map +1 -1
- package/esm/layouts/divider/Divider.css +6 -6
- package/esm/layouts/divider/Divider.sty.js +1 -1
- package/esm/layouts/divider/Divider.sty.js.map +2 -2
- package/esm/layouts/input-group/InputGroup.css +6 -2
- package/esm/layouts/input-group/InputGroup.sty.js +2 -2
- package/esm/layouts/input-group/InputGroup.sty.js.map +1 -1
- package/esm/layouts/surface/Surface.css +39 -39
- package/esm/layouts/surface/Surface.sty.js +2 -2
- package/esm/layouts/surface/Surface.sty.js.map +2 -2
- package/esm/layouts/surface/variables.sty.js +1 -1
- package/esm/layouts/surface/variables.sty.js.map +1 -1
- package/esm/styles/colorUtils.css +64 -64
- package/esm/styles/colorUtils.sty.js +2 -2
- package/esm/styles/colorUtils.sty.js.map +2 -2
- package/esm/styles/container.css +48 -48
- package/esm/styles/container.sty.js +2 -2
- package/esm/styles/container.sty.js.map +2 -2
- package/esm/styles/ellipsis.css +1 -1
- package/esm/styles/ellipsis.sty.js +1 -1
- package/esm/styles/ellipsis.sty.js.map +1 -1
- package/esm/styles/field.css +153 -153
- package/esm/styles/field.sty.js +2 -2
- package/esm/styles/field.sty.js.map +2 -2
- package/esm/styles/sprinkles.css +262 -262
- package/esm/styles/sprinkles.sty.js +1 -1
- package/esm/styles/sprinkles.sty.js.map +2 -2
- package/esm/styles/textStyle.css +8 -8
- package/esm/styles/textStyle.sty.js +1 -1
- package/esm/styles/textStyle.sty.js.map +2 -2
- package/esm/typography/block-quote/Blockquote.css +2 -2
- package/esm/typography/block-quote/Blockquote.sty.js +1 -1
- package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
- package/esm/typography/code/Code.css +1 -1
- package/esm/typography/code/Code.sty.js +1 -1
- package/esm/typography/code/Code.sty.js.map +1 -1
- package/esm/typography/emphasis/Emphasis.css +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
- package/esm/typography/external-link/ExternalLink.css +6 -6
- package/esm/typography/external-link/ExternalLink.sty.js +1 -1
- package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
- package/esm/typography/heading/Heading.css +8 -8
- package/esm/typography/heading/Heading.js.map +2 -2
- package/esm/typography/heading/Heading.sty.js +1 -1
- package/esm/typography/heading/Heading.sty.js.map +2 -2
- package/esm/typography/highlight/Highlight.css +1 -1
- package/esm/typography/highlight/Highlight.sty.js +1 -1
- package/esm/typography/highlight/Highlight.sty.js.map +1 -1
- package/esm/typography/link/Link.css +4 -4
- package/esm/typography/link/Link.sty.js +1 -1
- package/esm/typography/link/Link.sty.js.map +1 -1
- package/esm/typography/list/List.css +4 -4
- package/esm/typography/list/List.js +1 -1
- package/esm/typography/list/List.js.map +1 -1
- package/esm/typography/list/List.sty.js +2 -2
- package/esm/typography/list/List.sty.js.map +1 -1
- package/esm/typography/paragraph/Paragraph.css +4 -4
- package/esm/typography/paragraph/Paragraph.sty.js +1 -1
- package/esm/typography/paragraph/Paragraph.sty.js.map +2 -2
- package/esm/typography/strikethrough/Strikethrough.css +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
- package/esm/typography/strong/Strong.css +1 -1
- package/esm/typography/strong/Strong.sty.js +1 -1
- package/esm/typography/strong/Strong.sty.js.map +1 -1
- package/esm/typography/text/Text.css +3 -3
- package/esm/typography/text/Text.sty.js +1 -1
- package/esm/typography/text/Text.sty.js.map +2 -2
- package/esm/typography/text-ellipsis/TextEllipsis.css +4 -4
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +2 -2
- package/layouts/container/Container.css +4 -4
- package/layouts/container/Container.sty.js +1 -1
- package/layouts/divider/Divider.css +6 -6
- package/layouts/divider/Divider.sty.js +1 -1
- package/layouts/input-group/InputGroup.css +6 -2
- package/layouts/input-group/InputGroup.sty.js +2 -2
- package/layouts/surface/Surface.css +39 -39
- package/layouts/surface/Surface.sty.js +2 -2
- package/layouts/surface/variables.sty.js +1 -1
- package/package.json +3 -3
- package/styles/colorUtils.css +64 -64
- package/styles/colorUtils.sty.js +2 -2
- package/styles/container.css +48 -48
- package/styles/container.sty.d.ts +1 -1
- package/styles/container.sty.js +2 -2
- package/styles/ellipsis.css +1 -1
- package/styles/ellipsis.sty.js +1 -1
- package/styles/field.css +153 -153
- package/styles/field.sty.js +2 -2
- package/styles/sprinkles.css +262 -262
- package/styles/sprinkles.sty.js +1 -1
- package/styles/textStyle.css +8 -8
- package/styles/textStyle.sty.js +1 -1
- package/typography/block-quote/Blockquote.css +2 -2
- package/typography/block-quote/Blockquote.sty.js +1 -1
- package/typography/code/Code.css +1 -1
- package/typography/code/Code.sty.js +1 -1
- package/typography/emphasis/Emphasis.css +1 -1
- package/typography/emphasis/Emphasis.sty.js +1 -1
- package/typography/external-link/ExternalLink.css +6 -6
- package/typography/external-link/ExternalLink.sty.js +1 -1
- package/typography/heading/Heading.css +8 -8
- package/typography/heading/Heading.sty.js +1 -1
- package/typography/highlight/Highlight.css +1 -1
- package/typography/highlight/Highlight.sty.js +1 -1
- package/typography/link/Link.css +4 -4
- package/typography/link/Link.sty.js +1 -1
- package/typography/list/List.css +4 -4
- package/typography/list/List.js +1 -1
- package/typography/list/List.sty.js +2 -2
- package/typography/paragraph/Paragraph.css +4 -4
- package/typography/paragraph/Paragraph.sty.js +1 -1
- package/typography/strikethrough/Strikethrough.css +1 -1
- package/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/typography/strong/Strong.css +1 -1
- package/typography/strong/Strong.sty.js +1 -1
- package/typography/text/Text.css +3 -3
- package/typography/text/Text.sty.js +1 -1
- package/typography/text-ellipsis/TextEllipsis.css +4 -4
- package/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
.
|
|
1
|
+
._1ri4i7o1 {
|
|
2
2
|
color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._1ri4i7o2 {
|
|
5
5
|
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._1ri4i7o3 {
|
|
8
8
|
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
._1ri4i7o4 {
|
|
11
11
|
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
._1ri4i7o5 {
|
|
14
14
|
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
._1ri4i7o6 {
|
|
17
17
|
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
18
18
|
}
|
|
19
|
-
.
|
|
19
|
+
._1ri4i7o8 {
|
|
20
20
|
word-break: break-word;
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
._1ri4i7oa {
|
|
23
23
|
word-break: break-word;
|
|
24
24
|
}
|
|
25
|
-
.
|
|
25
|
+
._1ri4i7ob {
|
|
26
26
|
margin-left: auto;
|
|
27
27
|
align-self: center;
|
|
28
28
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "../../styles/ellipsis.css";
|
|
2
2
|
import "./ProgressBarValue.css";
|
|
3
3
|
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
4
|
-
var progressBarValueCSS = _7a468({ defaultClassName: "
|
|
4
|
+
var progressBarValueCSS = _7a468({ defaultClassName: "_1ri4i7o0", variantClassNames: { variant: { onAccent: "_1ri4i7o1", primary: "_1ri4i7o2", success: "_1ri4i7o3", warning: "_1ri4i7o4", critical: "_1ri4i7o5", neutral: "_1ri4i7o6" }, size: { condensed: "_1ri4i7o7", "default": "_1ri4i7o8" }, childIsText: { true: "_1ri4i7o9", false: "_1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7ob oqqp1n0"]] });
|
|
5
5
|
export {
|
|
6
6
|
progressBarValueCSS
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/content/progress/ProgressBarValue.css.ts"],
|
|
4
|
-
"sourcesContent": ["import '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'
|
|
5
|
-
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,
|
|
4
|
+
"sourcesContent": ["import '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'_1ri4i7o0',variantClassNames:{variant:{onAccent:'_1ri4i7o1',primary:'_1ri4i7o2',success:'_1ri4i7o3',warning:'_1ri4i7o4',critical:'_1ri4i7o5',neutral:'_1ri4i7o6'},size:{condensed:'_1ri4i7o7','default':'_1ri4i7o8'},childIsText:{true:'_1ri4i7o9',false:'_1ri4i7oa'}},defaultVariants:{},compoundVariants:[[{size:'condensed',childIsText:true},'_1ri4i7ob oqqp1n0']]});"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,UAAS,aAAY,SAAQ,aAAY,SAAQ,aAAY,SAAQ,aAAY,UAAS,aAAY,SAAQ,YAAW,GAAE,MAAK,EAAC,WAAU,aAAY,WAAU,YAAW,GAAE,aAAY,EAAC,MAAK,aAAY,OAAM,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,MAAK,aAAY,aAAY,KAAI,GAAE,mBAAmB,CAAC,EAAC,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes kvldjh0 {
|
|
2
2
|
0% {
|
|
3
3
|
transform: rotate(0deg);
|
|
4
4
|
}
|
|
@@ -6,47 +6,47 @@
|
|
|
6
6
|
transform: rotate(360deg);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
.kvldjh1 {
|
|
10
10
|
display: inline-block;
|
|
11
|
-
color: var(--
|
|
11
|
+
color: var(--_17bwkb02);
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.kvldjh2 {
|
|
14
14
|
display: block;
|
|
15
15
|
transform: rotate(-90deg);
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.kvldjh3 {
|
|
18
18
|
stroke: currentColor;
|
|
19
19
|
transform-origin: center;
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.kvldjh4 {
|
|
22
22
|
stroke-dasharray: 90 360;
|
|
23
|
-
transform-origin: 50 50
|
|
24
|
-
animation-name:
|
|
23
|
+
transform-origin: 50% 50%;
|
|
24
|
+
animation-name: kvldjh0;
|
|
25
25
|
animation-duration: var(--dt-timings-slow-gentle, 800ms);
|
|
26
26
|
animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
|
|
27
27
|
animation-iteration-count: infinite;
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
.kvldjh5 {
|
|
30
30
|
animation-duration: var(--dt-timings-fast-moderate, 200ms);
|
|
31
31
|
transition-property: stroke-dashoffset;
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.kvldjh6 {
|
|
34
34
|
stroke: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
35
35
|
}
|
|
36
|
-
.
|
|
36
|
+
.kvldjh7 {
|
|
37
37
|
stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
|
|
38
38
|
}
|
|
39
|
-
.
|
|
39
|
+
.kvldjhd {
|
|
40
40
|
display: flex;
|
|
41
41
|
flex-direction: column;
|
|
42
42
|
align-items: center;
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.kvldjhe {
|
|
45
45
|
gap: var(--dt-spacings-size-8, 8px);
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.kvldjhf {
|
|
48
48
|
gap: var(--dt-spacings-size-12, 12px);
|
|
49
49
|
}
|
|
50
|
-
.
|
|
51
|
-
color: var(--
|
|
50
|
+
.kvldjhg {
|
|
51
|
+
color: var(--_6levse0);
|
|
52
52
|
}
|
|
@@ -2,12 +2,12 @@ import "../../styles/colorUtils.css";
|
|
|
2
2
|
import "../../styles/container.css";
|
|
3
3
|
import "./ProgressCircle.css";
|
|
4
4
|
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
5
|
-
var ProgressCircleSVGCSS = "
|
|
6
|
-
var progressCircleBackgroundCSS = _7a468({ defaultClassName: "
|
|
7
|
-
var progressCircleCSS = _7a468({ defaultClassName: "
|
|
8
|
-
var progressCircleChildCSS = "
|
|
9
|
-
var progressCircleContainerCSS = _7a468({ defaultClassName: "
|
|
10
|
-
var progressCircleRootCSS = "
|
|
5
|
+
var ProgressCircleSVGCSS = "kvldjh2";
|
|
6
|
+
var progressCircleBackgroundCSS = _7a468({ defaultClassName: "kvldjh6", variantClassNames: { variant: { onAccent: "kvldjh7", primary: "kvldjh8", success: "kvldjh9", warning: "kvldjha", critical: "kvldjhb", neutral: "kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
7
|
+
var progressCircleCSS = _7a468({ defaultClassName: "kvldjh3", variantClassNames: { indeterminate: { true: "kvldjh4", false: "kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
|
|
8
|
+
var progressCircleChildCSS = "kvldjhg";
|
|
9
|
+
var progressCircleContainerCSS = _7a468({ defaultClassName: "kvldjhd", variantClassNames: { size: { small: "kvldjhe", large: "kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
|
|
10
|
+
var progressCircleRootCSS = "kvldjh1";
|
|
11
11
|
export {
|
|
12
12
|
ProgressCircleSVGCSS,
|
|
13
13
|
progressCircleBackgroundCSS,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/content/progress/ProgressCircle.css.ts"],
|
|
4
|
-
"sourcesContent": ["import '../../styles/colorUtils.css';\nimport '../../styles/container.css';\nimport './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ProgressCircleSVGCSS = '
|
|
5
|
-
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,
|
|
4
|
+
"sourcesContent": ["import '../../styles/colorUtils.css';\nimport '../../styles/container.css';\nimport './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ProgressCircleSVGCSS = 'kvldjh2';\nexport var progressCircleBackgroundCSS = _7a468({defaultClassName:'kvldjh6',variantClassNames:{variant:{onAccent:'kvldjh7',primary:'kvldjh8',success:'kvldjh9',warning:'kvldjha',critical:'kvldjhb',neutral:'kvldjhc'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleCSS = _7a468({defaultClassName:'kvldjh3',variantClassNames:{indeterminate:{true:'kvldjh4',false:'kvldjh5'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleChildCSS = 'kvldjhg';\nexport var progressCircleContainerCSS = _7a468({defaultClassName:'kvldjhd',variantClassNames:{size:{small:'kvldjhe',large:'kvldjhf'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleRootCSS = 'kvldjh1';"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,SAAQ,EAAC,UAAS,WAAU,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,UAAS,WAAU,SAAQ,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxP,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,eAAc,EAAC,MAAK,WAAU,OAAM,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrK,IAAI,yBAAyB;AAC7B,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,MAAK,EAAC,OAAM,WAAU,OAAM,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,wBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _1a1ozfd0 {
|
|
2
2
|
0% {
|
|
3
3
|
transform: translateX(-100%) scaleX(0);
|
|
4
4
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
transform: translateX(100%) scaleX(1.5);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
._1a1ozfd1 {
|
|
10
10
|
position: relative;
|
|
11
11
|
overflow: hidden;
|
|
12
12
|
background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
._1a1ozfd1:after {
|
|
15
15
|
content: "";
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: 0;
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
|
|
22
22
|
animation-iteration-count: infinite;
|
|
23
23
|
transform-origin: left center;
|
|
24
|
-
animation-name:
|
|
24
|
+
animation-name: _1a1ozfd0;
|
|
25
25
|
animation-duration: var(--dt-timings-slow-gentle, 800ms);
|
|
26
26
|
animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
._1a1ozfd2 {
|
|
29
29
|
border-radius: var(--dt-borders-radius-container-subdued, 8px);
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
._1a1ozfd3 {
|
|
32
32
|
border-radius: 9999px;
|
|
33
33
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./Skeleton.css";
|
|
2
2
|
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
|
-
var skeletonPlaceholderCSS = _7a468({ defaultClassName: "
|
|
3
|
+
var skeletonPlaceholderCSS = _7a468({ defaultClassName: "_1a1ozfd1", variantClassNames: { variant: { "default": "_1a1ozfd2", rounded: "_1a1ozfd3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
4
|
export {
|
|
5
5
|
skeletonPlaceholderCSS
|
|
6
6
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/content/skeleton/Skeleton.css.ts"],
|
|
4
|
-
"sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'
|
|
5
|
-
"mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,
|
|
4
|
+
"sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'_1a1ozfd1',variantClassNames:{variant:{'default':'_1a1ozfd2',rounded:'_1a1ozfd3'}},defaultVariants:{},compoundVariants:[]});"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,WAAU,aAAY,SAAQ,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ const AppRoot = /* @__PURE__ */ forwardRef(
|
|
|
33
33
|
let timezone = getTimezone();
|
|
34
34
|
try {
|
|
35
35
|
new Intl.DateTimeFormat(language, { timeZone: timezone });
|
|
36
|
-
} catch
|
|
36
|
+
} catch {
|
|
37
37
|
timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
38
38
|
}
|
|
39
39
|
useLayoutEffect(() => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/core/components/app-root/AppRoot.tsx"],
|
|
4
|
-
"sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useLayoutEffect,\n useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n const baseElement = document.querySelector('base');\n const href = baseElement?.href ?? '/';\n return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n (props, forwardedRef) => {\n const {\n style: consumerStyle,\n className: consumerClassName,\n 'data-testid': dataTestId = 'app-root',\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n } = props;\n\n /** Messages that are used for the translation. */\n const [messages, setMessages] = useState<\n Record<string, string> | Record<string, MessageFormatElement[]>\n >({});\n\n const { children } = props;\n\n const theme = useCurrentTheme();\n const language = getLanguage();\n let timezone = getTimezone();\n try {\n new Intl.DateTimeFormat(language, { timeZone: timezone });\n } catch
|
|
5
|
-
"mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,
|
|
4
|
+
"sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n type PropsWithChildren,\n forwardRef,\n useEffect,\n useLayoutEffect,\n useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n const baseElement = document.querySelector('base');\n const href = baseElement?.href ?? '/';\n return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n (props, forwardedRef) => {\n const {\n style: consumerStyle,\n className: consumerClassName,\n 'data-testid': dataTestId = 'app-root',\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n } = props;\n\n /** Messages that are used for the translation. */\n const [messages, setMessages] = useState<\n Record<string, string> | Record<string, MessageFormatElement[]>\n >({});\n\n const { children } = props;\n\n const theme = useCurrentTheme();\n const language = getLanguage();\n let timezone = getTimezone();\n try {\n new Intl.DateTimeFormat(language, { timeZone: timezone });\n } catch {\n // If the passed timezone is not valid, we can fall back to the browsers\n // configured one.\n timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n }\n\n /** Inject the font link into the head */\n useLayoutEffect(() => {\n // Right now the font css file is not automatically injected into\n // the app index.html file. And as there are no static ways to @import\n // css with vanilla extract, we need to inject the link here.\n const link = document.createElement('link');\n\n link.rel = 'stylesheet';\n link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n document.head.appendChild(link);\n return () => {\n document.head.removeChild(link);\n };\n }, []);\n\n /**\n * Synchronize the [data-theme] attribute to the root of the document\n * to have the design tokens defined in the cascade.\n */\n useLayoutEffect(() => {\n if (document !== undefined) {\n document.documentElement.setAttribute('data-theme', theme);\n }\n }, [theme]);\n\n useEffect(() => {\n if (language === 'en') {\n // Don't fetch translations for 'en' to avoid an additional render cycle.\n // The default messages are in english already.\n return;\n }\n\n fetch(`${getBaseHref()}lang/${language}.json`)\n .then((res) => {\n return res.json();\n })\n .then((receivedMessages) => {\n setMessages(receivedMessages);\n })\n .catch(() => {\n // Only set messages to a new empty object if the previous messages were not empty.\n // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n setMessages((prev) => (isEmpty(prev) ? prev : {}));\n });\n }, [language]);\n\n return (\n <div\n ref={forwardedRef}\n data-testid={dataTestId}\n className={consumerClassName}\n style={consumerStyle}\n data-theme={theme}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n >\n <IntlProvider\n locale={language}\n timeZone={timezone}\n messages={messages}\n defaultLocale={defaultLanguage}\n >\n <FocusProvider>{children}</FocusProvider>\n </IntlProvider>\n </div>\n );\n },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,QAAQ;AAGN,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAIpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/esm/core/index.js
CHANGED
|
@@ -23,6 +23,7 @@ import { roleVariants } from "./types/role-variant.js";
|
|
|
23
23
|
import { uuidv4 } from "./utils/uuidv4.js";
|
|
24
24
|
import { isStringChildren } from "./utils/_is-string-children.js";
|
|
25
25
|
import { parseBoolean } from "./utils/parse-boolean.js";
|
|
26
|
+
import { mulberry32 } from "./utils/seed-random.js";
|
|
26
27
|
export {
|
|
27
28
|
AppRoot,
|
|
28
29
|
FocusProvider as _FocusProvider,
|
|
@@ -35,6 +36,7 @@ export {
|
|
|
35
36
|
isFocusable as _isFocusable,
|
|
36
37
|
isStringChildren as _isStringChildren,
|
|
37
38
|
mergeProps as _mergeProps,
|
|
39
|
+
mulberry32 as _mulberry32,
|
|
38
40
|
parseBoolean as _parseBoolean,
|
|
39
41
|
useAriaLabelingProps as _useAriaLabelingProps,
|
|
40
42
|
useFocusContext as _useFocusContext,
|
package/esm/core/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/core/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n FocusScope as _FocusScope,\n type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n FocusProvider as _FocusProvider,\n type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\nexport type {\n PolymorphOwnProps,\n PolymorphProps,\n PolymorphicComponentProps,\n} from './types/polymorph.js';\
|
|
5
|
-
"mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;
|
|
4
|
+
"sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n FocusScope as _FocusScope,\n type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n FocusProvider as _FocusProvider,\n type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\nexport type {\n PolymorphOwnProps,\n PolymorphProps,\n PolymorphicComponentProps,\n} from './types/polymorph.js';\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n mergeProps as _mergeProps,\n type NullToObject as _NullToObject,\n type TupleTypes as _TupleTypes,\n type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useId as _useId } from './hooks/useId.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n AriaDisabledProps,\n AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { roleVariants } from './types/role-variant.js';\nexport type { RoleVariantType } from './types/role-variant.js';\nexport { uuidv4 as _uuidv4 } from './utils/uuidv4.js';\nexport { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';\nexport { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';\nexport { mulberry32 as _mulberry32 } from './utils/seed-random.js';\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAUP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAkB,aAAc;AAChC,SAAgC,2BAA4B;AAO5D,SAAS,oBAAoB;AAE7B,SAAmB,cAAe;AAClC,SAA6B,wBAAyB;AACtD,SAAyB,oBAAqB;AAC9C,SAAuB,kBAAmB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
.
|
|
1
|
+
.z2r50s3 {
|
|
2
2
|
outline: none;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
.z2r50s3:focus-visible {
|
|
5
5
|
outline: none;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
.z2r50s4 {
|
|
8
8
|
border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
|
|
9
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--
|
|
10
|
-
background-color: var(--
|
|
11
|
-
}
|
|
12
|
-
.
|
|
13
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--
|
|
14
|
-
}
|
|
15
|
-
.
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
}
|
|
20
|
-
.
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
}
|
|
25
|
-
.
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
}
|
|
30
|
-
.
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
}
|
|
35
|
-
.
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
}
|
|
40
|
-
.
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
}
|
|
45
|
-
.
|
|
9
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
|
|
10
|
+
background-color: var(--z2r50s2);
|
|
11
|
+
}
|
|
12
|
+
.z2r50s5.z2r50s5 {
|
|
13
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
|
|
14
|
+
}
|
|
15
|
+
.z2r50s6 {
|
|
16
|
+
--z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
|
|
17
|
+
--z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
18
|
+
--z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
|
|
19
|
+
}
|
|
20
|
+
.z2r50s7 {
|
|
21
|
+
--z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
|
|
22
|
+
--z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
|
|
23
|
+
--z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
|
|
24
|
+
}
|
|
25
|
+
.z2r50s8 {
|
|
26
|
+
--z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
|
|
27
|
+
--z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
|
|
28
|
+
--z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
|
|
29
|
+
}
|
|
30
|
+
.z2r50s9 {
|
|
31
|
+
--z2r50s0: var(--dt-colors-border-warning-accent, #805100);
|
|
32
|
+
--z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
|
|
33
|
+
--z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
|
|
34
|
+
}
|
|
35
|
+
.z2r50sa {
|
|
36
|
+
--z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
|
|
37
|
+
--z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
|
|
38
|
+
--z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
|
|
39
|
+
}
|
|
40
|
+
.z2r50sb {
|
|
41
|
+
--z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
|
|
42
|
+
--z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
|
|
43
|
+
--z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
|
|
44
|
+
}
|
|
45
|
+
.z2r50sc:focus-within {
|
|
46
46
|
outline: none;
|
|
47
47
|
:focus-visible {
|
|
48
48
|
outline: none;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.z2r50sd:focus-within {
|
|
52
52
|
border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
|
|
53
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--
|
|
54
|
-
background-color: var(--
|
|
55
|
-
}
|
|
56
|
-
.
|
|
57
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--
|
|
58
|
-
}
|
|
59
|
-
.
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
}
|
|
64
|
-
.
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
}
|
|
69
|
-
.
|
|
70
|
-
--
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
}
|
|
74
|
-
.
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
}
|
|
79
|
-
.
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
--
|
|
83
|
-
}
|
|
84
|
-
.
|
|
85
|
-
--
|
|
86
|
-
--
|
|
87
|
-
--
|
|
53
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
|
|
54
|
+
background-color: var(--z2r50s2);
|
|
55
|
+
}
|
|
56
|
+
.z2r50se:focus-within {
|
|
57
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
|
|
58
|
+
}
|
|
59
|
+
.z2r50sf {
|
|
60
|
+
--z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
|
|
61
|
+
--z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
62
|
+
--z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
|
|
63
|
+
}
|
|
64
|
+
.z2r50sg {
|
|
65
|
+
--z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
|
|
66
|
+
--z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
|
|
67
|
+
--z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
|
|
68
|
+
}
|
|
69
|
+
.z2r50sh {
|
|
70
|
+
--z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
|
|
71
|
+
--z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
|
|
72
|
+
--z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
|
|
73
|
+
}
|
|
74
|
+
.z2r50si {
|
|
75
|
+
--z2r50s0: var(--dt-colors-border-warning-accent, #805100);
|
|
76
|
+
--z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
|
|
77
|
+
--z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
|
|
78
|
+
}
|
|
79
|
+
.z2r50sj {
|
|
80
|
+
--z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
|
|
81
|
+
--z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
|
|
82
|
+
--z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
|
|
83
|
+
}
|
|
84
|
+
.z2r50sk {
|
|
85
|
+
--z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
|
|
86
|
+
--z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
|
|
87
|
+
--z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
|
|
88
88
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "./focusRing.css";
|
|
2
2
|
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
|
-
var focusRingCSS = _7a468({ defaultClassName: "
|
|
4
|
-
var focusRingFocusWithinCSS = _7a468({ defaultClassName: "
|
|
3
|
+
var focusRingCSS = _7a468({ defaultClassName: "z2r50s3", variantClassNames: { minimal: { true: "z2r50s4", false: "z2r50s5" }, variant: { neutral: "z2r50s6", primary: "z2r50s7", success: "z2r50s8", warning: "z2r50s9", critical: "z2r50sa", onAccent: "z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
|
+
var focusRingFocusWithinCSS = _7a468({ defaultClassName: "z2r50sc", variantClassNames: { minimal: { true: "z2r50sd", false: "z2r50se" }, variant: { neutral: "z2r50sf", primary: "z2r50sg", success: "z2r50sh", warning: "z2r50si", critical: "z2r50sj", onAccent: "z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
|
|
5
5
|
export {
|
|
6
6
|
focusRingCSS,
|
|
7
7
|
focusRingFocusWithinCSS
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/core/styles/focusRing.css.ts"],
|
|
4
|
-
"sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'
|
|
5
|
-
"mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,
|
|
4
|
+
"sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'z2r50s3',variantClassNames:{minimal:{true:'z2r50s4',false:'z2r50s5'},variant:{neutral:'z2r50s6',primary:'z2r50s7',success:'z2r50s8',warning:'z2r50s9',critical:'z2r50sa',onAccent:'z2r50sb'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'z2r50sc',variantClassNames:{minimal:{true:'z2r50sd',false:'z2r50se'},variant:{neutral:'z2r50sf',primary:'z2r50sg',success:'z2r50sh',warning:'z2r50si',critical:'z2r50sj',onAccent:'z2r50sk'}},defaultVariants:{},compoundVariants:[]});"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,SAAQ,EAAC,MAAK,WAAU,OAAM,UAAS,GAAE,SAAQ,EAAC,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,UAAS,WAAU,UAAS,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClR,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,SAAQ,EAAC,MAAK,WAAU,OAAM,UAAS,GAAE,SAAQ,EAAC,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,UAAS,WAAU,UAAS,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/core/utils/_is-string-children.ts"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { isElement } from 'react-is';\n\n/**\n * Returns whether children only consist of text nodes.\n * @internal\n */\nexport function isStringChildren(children: React.ReactNode):
|
|
5
|
-
"mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAMnB,SAAS,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { isElement } from 'react-is';\n\n/**\n * Returns whether children only consist of text nodes.\n * @internal\n */\nexport function isStringChildren(\n children: React.ReactNode,\n): children is string {\n const childrenArray = React.Children.toArray(children);\n\n if (!childrenArray.some(isElement)) {\n return true; // All children are strings\n }\n\n return childrenArray.every(\n (child) =>\n !isElement(child) ||\n (isElement(child) && child.type && child.type === FormattedMessage),\n );\n}\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAMnB,SAAS,iBACd,UACoB;AACpB,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AAErD,MAAI,CAAC,cAAc,KAAK,SAAS,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,SAAO,cAAc;AAAA,IACnB,CAAC,UACC,CAAC,UAAU,KAAK,KACf,UAAU,KAAK,KAAK,MAAM,QAAQ,MAAM,SAAS;AAAA,EACtD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|