@fluentui/react-tags 0.0.0-nightly-20240823-0407.1 → 0.0.0-nightly-20240823-1802.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -37
- package/dist/index.d.ts +2 -8
- package/lib/components/InteractionTag/useInteractionTag.js +2 -3
- package/lib/components/InteractionTag/useInteractionTag.js.map +1 -1
- package/lib/components/InteractionTag/useInteractionTagStyles.styles.js +4 -4
- package/lib/components/InteractionTag/useInteractionTagStyles.styles.js.map +1 -1
- package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js +48 -48
- package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map +1 -1
- package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js +36 -36
- package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js.map +1 -1
- package/lib/components/Tag/useTag.js +2 -3
- package/lib/components/Tag/useTag.js.map +1 -1
- package/lib/components/Tag/useTagStyles.styles.js +45 -45
- package/lib/components/Tag/useTagStyles.styles.js.map +1 -1
- package/lib/components/TagGroup/TagGroup.types.js.map +1 -1
- package/lib/components/TagGroup/useTagGroup.js +1 -3
- package/lib/components/TagGroup/useTagGroup.js.map +1 -1
- package/lib/components/TagGroup/useTagGroupContextValues.js +1 -3
- package/lib/components/TagGroup/useTagGroupContextValues.js.map +1 -1
- package/lib/components/TagGroup/useTagGroupStyles.styles.js +4 -4
- package/lib/components/TagGroup/useTagGroupStyles.styles.js.map +1 -1
- package/lib/contexts/tagGroupContext.js.map +1 -1
- package/lib-commonjs/components/InteractionTag/useInteractionTag.js +2 -3
- package/lib-commonjs/components/InteractionTag/useInteractionTag.js.map +1 -1
- package/lib-commonjs/components/InteractionTag/useInteractionTagStyles.styles.js +4 -4
- package/lib-commonjs/components/InteractionTag/useInteractionTagStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js +101 -93
- package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map +1 -1
- package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js +84 -74
- package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Tag/useTag.js +2 -3
- package/lib-commonjs/components/Tag/useTag.js.map +1 -1
- package/lib-commonjs/components/Tag/useTagStyles.styles.js +100 -84
- package/lib-commonjs/components/Tag/useTagStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagGroup/TagGroup.types.js.map +1 -1
- package/lib-commonjs/components/TagGroup/useTagGroup.js +1 -3
- package/lib-commonjs/components/TagGroup/useTagGroup.js.map +1 -1
- package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js +1 -3
- package/lib-commonjs/components/TagGroup/useTagGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/TagGroup/useTagGroupStyles.styles.js +6 -6
- package/lib-commonjs/components/TagGroup/useTagGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/tagGroupContext.js.map +1 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,50 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tags
|
|
2
2
|
|
|
3
|
-
This log was last generated on Fri, 23 Aug 2024
|
|
3
|
+
This log was last generated on Fri, 23 Aug 2024 18:07:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-20240823-
|
|
7
|
+
## [0.0.0-nightly-20240823-1802.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v0.0.0-nightly-20240823-1802.1)
|
|
8
8
|
|
|
9
|
-
Fri, 23 Aug 2024
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.
|
|
9
|
+
Fri, 23 Aug 2024 18:07:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.14..@fluentui/react-tags_v0.0.0-nightly-20240823-1802.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240823-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-20240823-
|
|
17
|
-
- Bump @fluentui/react-avatar to v0.0.0-nightly-20240823-
|
|
18
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240823-
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240823-
|
|
20
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240823-
|
|
21
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-20240823-
|
|
22
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240823-
|
|
23
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-20240823-
|
|
24
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240823-
|
|
25
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240823-
|
|
26
|
-
|
|
27
|
-
## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.16)
|
|
28
|
-
|
|
29
|
-
Thu, 15 Aug 2024 13:49:46 GMT
|
|
30
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.15..@fluentui/react-tags_v9.3.16)
|
|
31
|
-
|
|
32
|
-
### Patches
|
|
33
|
-
|
|
34
|
-
- Bump @fluentui/react-aria to v9.13.4 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
35
|
-
- Bump @fluentui/react-avatar to v9.6.37 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
36
|
-
- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
37
|
-
|
|
38
|
-
## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.15)
|
|
39
|
-
|
|
40
|
-
Thu, 15 Aug 2024 08:22:16 GMT
|
|
41
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.14..@fluentui/react-tags_v9.3.15)
|
|
42
|
-
|
|
43
|
-
### Patches
|
|
44
|
-
|
|
45
|
-
- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
46
|
-
- Bump @fluentui/react-avatar to v9.6.36 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
47
|
-
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
17
|
+
- Bump @fluentui/react-avatar to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
19
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
23
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
24
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
25
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240823-1802.1 ([commit](https://github.com/microsoft/fluentui/commit/5dea0aaa8bad5a9e5744195db91ffbc60b7cfa93) by beachball)
|
|
48
26
|
|
|
49
27
|
## [9.3.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.14)
|
|
50
28
|
|
package/dist/index.d.ts
CHANGED
|
@@ -214,7 +214,7 @@ export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
|
|
|
214
214
|
/**
|
|
215
215
|
* Context shared between TagGroup and its children components
|
|
216
216
|
*/
|
|
217
|
-
declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, '
|
|
217
|
+
declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;
|
|
218
218
|
|
|
219
219
|
export declare type TagGroupContextValues = {
|
|
220
220
|
tagGroup: TagGroupContextValue;
|
|
@@ -228,12 +228,6 @@ export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlo
|
|
|
228
228
|
* Callback for when a tag is dismissed
|
|
229
229
|
*/
|
|
230
230
|
onDismiss?: TagDismissHandler<Value>;
|
|
231
|
-
/**
|
|
232
|
-
* A TagGroup can show that it cannot be interacted with.
|
|
233
|
-
*
|
|
234
|
-
* @default false
|
|
235
|
-
*/
|
|
236
|
-
disabled?: boolean;
|
|
237
231
|
size?: TagSize;
|
|
238
232
|
appearance?: TagAppearance;
|
|
239
233
|
dismissible?: boolean;
|
|
@@ -246,7 +240,7 @@ export declare type TagGroupSlots = {
|
|
|
246
240
|
/**
|
|
247
241
|
* State used in rendering TagGroup
|
|
248
242
|
*/
|
|
249
|
-
export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, '
|
|
243
|
+
export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
|
|
250
244
|
handleTagDismiss: TagDismissHandler<Value>;
|
|
251
245
|
role?: React_2.AriaRole;
|
|
252
246
|
};
|
|
@@ -10,13 +10,13 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
|
|
|
10
10
|
* @param props - props from this instance of InteractionTag
|
|
11
11
|
* @param ref - reference to root HTMLDivElement of InteractionTag
|
|
12
12
|
*/ export const useInteractionTag_unstable = (props, ref)=>{
|
|
13
|
-
const { handleTagDismiss, size: contextSize,
|
|
13
|
+
const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
|
|
14
14
|
const id = useId('fui-InteractionTag-', props.id);
|
|
15
15
|
const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
|
|
16
16
|
const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
|
|
17
17
|
return {
|
|
18
18
|
appearance,
|
|
19
|
-
disabled
|
|
19
|
+
disabled,
|
|
20
20
|
handleTagDismiss,
|
|
21
21
|
interactionTagPrimaryId,
|
|
22
22
|
shape,
|
|
@@ -28,7 +28,6 @@ import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
|
|
|
28
28
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
29
29
|
ref,
|
|
30
30
|
...props,
|
|
31
|
-
disabled: contextDisabled ? true : disabled,
|
|
32
31
|
id
|
|
33
32
|
}), {
|
|
34
33
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n props: InteractionTagProps,\n ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n const {
|
|
1
|
+
{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n props: InteractionTagProps,\n ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();\n\n const id = useId('fui-InteractionTag-', props.id);\n\n const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n const {\n appearance = contextAppearance ?? 'filled',\n disabled = false,\n shape = 'rounded',\n size = contextSize,\n value = id,\n } = props;\n\n return {\n appearance,\n disabled,\n handleTagDismiss,\n interactionTagPrimaryId,\n shape,\n size,\n value,\n\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n id,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","appearance","contextAppearance","id","interactionTagPrimaryId","disabled","shape","value","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAEC,YAAYC,iBAAiB,EAAE,GAAGR;IAE/E,MAAMS,KAAKX,MAAM,uBAAuBI,MAAMO,EAAE;IAEhD,MAAMC,0BAA0BZ,MAAM;IAEtC,MAAM,EACJS,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CG,WAAW,KAAK,EAChBC,QAAQ,SAAS,EACjBP,OAAOC,WAAW,EAClBO,QAAQJ,EAAE,EACX,GAAGP;IAEJ,OAAO;QACLK;QACAI;QACAP;QACAM;QACAE;QACAP;QACAQ;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRO;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -10,14 +10,14 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
10
10
|
Bbmb7ep: 0,
|
|
11
11
|
Btl43ni: 0,
|
|
12
12
|
B7oj6ja: 0,
|
|
13
|
-
Dimara: "
|
|
13
|
+
Dimara: "f21v5kk"
|
|
14
14
|
},
|
|
15
15
|
circular: {
|
|
16
16
|
Beyfa6y: 0,
|
|
17
17
|
Bbmb7ep: 0,
|
|
18
18
|
Btl43ni: 0,
|
|
19
19
|
B7oj6ja: 0,
|
|
20
|
-
Dimara: "
|
|
20
|
+
Dimara: "f1e7huf7"
|
|
21
21
|
},
|
|
22
22
|
medium: {
|
|
23
23
|
Bqenvij: "f1d2rq10"
|
|
@@ -29,9 +29,9 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
29
29
|
Bqenvij: "fjamq6b"
|
|
30
30
|
}
|
|
31
31
|
}, {
|
|
32
|
-
d: [[".
|
|
32
|
+
d: [[".f21v5kk{border-radius:var(--2289, var(--2290, var(--borderRadiusMedium)));}", {
|
|
33
33
|
p: -1
|
|
34
|
-
}], [".
|
|
34
|
+
}], [".f1e7huf7{border-radius:var(--2291, var(--2292, var(--borderRadiusCircular)));}", {
|
|
35
35
|
p: -1
|
|
36
36
|
}], ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".fjamq6b{height:20px;}"]
|
|
37
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","circular","medium","Bqenvij","small","d","p","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","circular","medium","Bqenvij","small","d","p","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n rounded: {\n borderRadius: `var(--2289, var(--2290, ${tokens.borderRadiusMedium}))`\n },\n circular: {\n borderRadius: `var(--2291, var(--2292, ${tokens.borderRadiusCircular}))`\n },\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n height: '20px'\n }\n});\n/**\n * Apply styling to the InteractionTag slots based on the state\n */ export const useInteractionTagStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const { shape, size } = state;\n state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,iHAK5B,CAAC;AACF,MAAMO,aAAa,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,iBAAiB,GAAGhB,oBAAoB,CAAC,CAAC;EAChD,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEiB,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7BA,KAAK,CAAChB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEC,UAAU,CAACC,KAAK,CAAC,EAAED,UAAU,CAACE,IAAI,CAAC,EAAEJ,KAAK,CAAChB,IAAI,CAACqB,SAAS,CAAC;EAChJ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -32,13 +32,13 @@ const baseStyles = {
|
|
|
32
32
|
zIndex: 1
|
|
33
33
|
})
|
|
34
34
|
};
|
|
35
|
-
const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("
|
|
36
|
-
r: [".
|
|
37
|
-
s: ["@media (forced-colors: active){.
|
|
35
|
+
const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("rsxpfoc", "r1fl35u4", {
|
|
36
|
+
r: [".rsxpfoc{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--2293, var(--2294, var(--borderRadiusMedium)));}", ".rsxpfoc[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1fl35u4{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--2293, var(--2294, var(--borderRadiusMedium)));}", ".r1fl35u4[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
|
|
37
|
+
s: ["@media (forced-colors: active){.rsxpfoc{position:relative;}.rsxpfoc::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--2295, var(--2296, var(--borderRadiusMedium)));border-top-right-radius:var(--2297, var(--2298, var(--borderRadiusMedium)));}}", "@media (forced-colors: active){.r1fl35u4{position:relative;}.r1fl35u4::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--2295, var(--2296, var(--borderRadiusMedium)));border-top-left-radius:var(--2297, var(--2298, var(--borderRadiusMedium)));}}"]
|
|
38
38
|
});
|
|
39
|
-
const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("
|
|
40
|
-
r: [".
|
|
41
|
-
s: ["@media (forced-colors: active){.
|
|
39
|
+
const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r1j7qto1", "rm9ndfq", {
|
|
40
|
+
r: [".r1j7qto1{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--2299, var(--2300, var(--borderRadiusCircular)));}", ".r1j7qto1[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".rm9ndfq{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--2299, var(--2300, var(--borderRadiusCircular)));}", ".rm9ndfq[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
|
|
41
|
+
s: ["@media (forced-colors: active){.r1j7qto1{position:relative;}.r1j7qto1::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--2301, var(--2302, var(--borderRadiusCircular)));border-bottom-left-radius:var(--2303, var(--2304, var(--borderRadiusCircular)));}}", "@media (forced-colors: active){.rm9ndfq{position:relative;}.rm9ndfq::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--2301, var(--2302, var(--borderRadiusCircular)));border-bottom-right-radius:var(--2303, var(--2304, var(--borderRadiusCircular)));}}"]
|
|
42
42
|
});
|
|
43
43
|
/**
|
|
44
44
|
* Style override for pseudo element that draws the border for windows high contrast mode
|
|
@@ -50,8 +50,8 @@ const useRootCircularContrastStyles = /*#__PURE__*/__styles({
|
|
|
50
50
|
B33s42s: 0,
|
|
51
51
|
G4pote: 0,
|
|
52
52
|
gw1m2h: ["f19rnj73", "f1jjg5yc"],
|
|
53
|
-
w20ur: ["
|
|
54
|
-
Byczuf6: ["
|
|
53
|
+
w20ur: ["f1i0g20", "fk1u56e"],
|
|
54
|
+
Byczuf6: ["fm5g83i", "f8iqq9q"]
|
|
55
55
|
}
|
|
56
56
|
}, {
|
|
57
57
|
m: [["@media (forced-colors: active){.ff3fe07{position:relative;}}", {
|
|
@@ -59,53 +59,53 @@ const useRootCircularContrastStyles = /*#__PURE__*/__styles({
|
|
|
59
59
|
}], ["@media (forced-colors: active){.f19rnj73::before{border-right:var(--strokeWidthThin) solid transparent;}.f1jjg5yc::before{border-left:var(--strokeWidthThin) solid transparent;}}", {
|
|
60
60
|
p: -1,
|
|
61
61
|
m: "(forced-colors: active)"
|
|
62
|
-
}], ["@media (forced-colors: active){.
|
|
62
|
+
}], ["@media (forced-colors: active){.f1i0g20::before{border-top-right-radius:var(--2305, var(--2306, var(--borderRadiusCircular)));}.fk1u56e::before{border-top-left-radius:var(--2305, var(--2306, var(--borderRadiusCircular)));}}", {
|
|
63
63
|
m: "(forced-colors: active)"
|
|
64
|
-
}], ["@media (forced-colors: active){.
|
|
64
|
+
}], ["@media (forced-colors: active){.f8iqq9q::before{border-bottom-left-radius:var(--2307, var(--2308, var(--borderRadiusCircular)));}.fm5g83i::before{border-bottom-right-radius:var(--2307, var(--2308, var(--borderRadiusCircular)));}}", {
|
|
65
65
|
m: "(forced-colors: active)"
|
|
66
66
|
}]]
|
|
67
67
|
});
|
|
68
68
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
69
69
|
filled: {
|
|
70
|
-
De3pzq: "
|
|
71
|
-
sj55zd: "
|
|
70
|
+
De3pzq: "fd56a0",
|
|
71
|
+
sj55zd: "f1pc1m54",
|
|
72
72
|
eoavqd: "f8491dx",
|
|
73
|
-
Jwef8y: "
|
|
74
|
-
Bi91k9c: "
|
|
75
|
-
ecr2s2: "
|
|
76
|
-
lj723h: "
|
|
73
|
+
Jwef8y: "f7ff51q",
|
|
74
|
+
Bi91k9c: "fzve1oa",
|
|
75
|
+
ecr2s2: "ftcjavi",
|
|
76
|
+
lj723h: "f4nkzlk",
|
|
77
77
|
Bqrx1nm: "fq7113v",
|
|
78
78
|
kx9iu6: "fp3oj7s"
|
|
79
79
|
},
|
|
80
80
|
outline: {
|
|
81
|
-
De3pzq: "
|
|
82
|
-
sj55zd: "
|
|
81
|
+
De3pzq: "f2hsxma",
|
|
82
|
+
sj55zd: "fm0paxy",
|
|
83
83
|
g2u3we: "fj3muxo",
|
|
84
84
|
h3c5rm: ["f1akhkt", "f1lxtadh"],
|
|
85
85
|
B9xav0g: "f1aperda",
|
|
86
86
|
zhjwy3: ["f1lxtadh", "f1akhkt"],
|
|
87
87
|
eoavqd: "f8491dx",
|
|
88
|
-
Jwef8y: "
|
|
89
|
-
Bi91k9c: "
|
|
88
|
+
Jwef8y: "f7ci8h2",
|
|
89
|
+
Bi91k9c: "f14mp0av",
|
|
90
90
|
Bk3fhr4: "ft1hn21",
|
|
91
|
-
I6i3kg: "
|
|
91
|
+
I6i3kg: "f1s239en",
|
|
92
92
|
Bmfj8id: "fuxngvv",
|
|
93
|
-
ecr2s2: "
|
|
94
|
-
lj723h: "
|
|
93
|
+
ecr2s2: "f1ot0kqo",
|
|
94
|
+
lj723h: "feqjcci",
|
|
95
95
|
Bnrwwps: "fvpl5sy",
|
|
96
|
-
weioyw: "
|
|
96
|
+
weioyw: "fdyr4le",
|
|
97
97
|
Bpre390: "f8upcvr",
|
|
98
98
|
Bqrx1nm: "fq7113v",
|
|
99
99
|
kx9iu6: "fp3oj7s"
|
|
100
100
|
},
|
|
101
101
|
brand: {
|
|
102
|
-
De3pzq: "
|
|
103
|
-
sj55zd: "
|
|
102
|
+
De3pzq: "f1pkuplt",
|
|
103
|
+
sj55zd: "fgv3rxy",
|
|
104
104
|
eoavqd: "f8491dx",
|
|
105
|
-
Jwef8y: "
|
|
106
|
-
Bi91k9c: "
|
|
107
|
-
ecr2s2: "
|
|
108
|
-
lj723h: "
|
|
105
|
+
Jwef8y: "f1mx1bi1",
|
|
106
|
+
Bi91k9c: "f1j7uwbi",
|
|
107
|
+
ecr2s2: "fh5yevm",
|
|
108
|
+
lj723h: "fi00oud",
|
|
109
109
|
Bqrx1nm: "fq7113v",
|
|
110
110
|
kx9iu6: "fp3oj7s"
|
|
111
111
|
},
|
|
@@ -119,9 +119,9 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
119
119
|
z189sj: ["fwiuce9", "f15vdbe4"]
|
|
120
120
|
}
|
|
121
121
|
}, {
|
|
122
|
-
d: [".
|
|
123
|
-
h: [".f8491dx:hover{cursor:pointer;}", ".
|
|
124
|
-
a: [".
|
|
122
|
+
d: [".fd56a0{background-color:var(--2309, var(--2310, var(--colorNeutralBackground3)));}", ".f1pc1m54{color:var(--2311, var(--2312, var(--colorNeutralForeground2)));}", ".f2hsxma{background-color:var(--2321, var(--2322, var(--colorSubtleBackground)));}", ".fm0paxy{color:var(--2323, var(--2324, var(--colorNeutralForeground2)));}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1pkuplt{background-color:var(--2337, var(--2338, var(--colorBrandBackground2)));}", ".fgv3rxy{color:var(--2339, var(--2340, var(--colorBrandForeground2)));}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
|
|
123
|
+
h: [".f8491dx:hover{cursor:pointer;}", ".f7ff51q:hover{background-color:var(--2313, var(--2314, var(--colorNeutralBackground3Hover)));}", ".fzve1oa:hover{color:var(--2315, var(--2316, var(--colorNeutralForeground2Hover)));}", ".f7ci8h2:hover{background-color:var(--2325, var(--2326, var(--colorSubtleBackgroundHover)));}", ".f14mp0av:hover{color:var(--2327, var(--2328, var(--colorNeutralForeground2Hover)));}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".f1s239en:hover .fui-Icon-filled{color:var(--2329, var(--2330, var(--colorNeutralForeground2BrandHover)));}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f1mx1bi1:hover{background-color:var(--2341, var(--2342, var(--colorBrandBackground2Hover)));}", ".f1j7uwbi:hover{color:var(--2343, var(--2344, var(--colorCompoundBrandForeground1Hover)));}"],
|
|
124
|
+
a: [".ftcjavi:active{background-color:var(--2317, var(--2318, var(--colorNeutralBackground3Pressed)));}", ".f4nkzlk:active{color:var(--2319, var(--2320, var(--colorNeutralForeground2Pressed)));}", ".f1ot0kqo:active{background-color:var(--2331, var(--2332, var(--colorSubtleBackgroundPressed)));}", ".feqjcci:active{color:var(--2333, var(--2334, var(--colorNeutralForeground2Pressed)));}", ".fvpl5sy:active .fui-Icon-filled{display:inline;}", ".fdyr4le:active .fui-Icon-filled{color:var(--2335, var(--2336, var(--colorNeutralForeground2BrandPressed)));}", ".f8upcvr:active .fui-Icon-regular{display:none;}", ".fh5yevm:active{background-color:var(--2345, var(--2346, var(--colorBrandBackground2Pressed)));}", ".fi00oud:active{color:var(--2347, var(--2348, var(--colorCompoundBrandForeground1Pressed)));}"],
|
|
125
125
|
m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
|
|
126
126
|
m: "(forced-colors: active)"
|
|
127
127
|
}], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
|
|
@@ -131,8 +131,8 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
131
131
|
const useRootDisabledAppearances = /*#__PURE__*/__styles({
|
|
132
132
|
filled: {
|
|
133
133
|
Bceei9c: "fdrzuqr",
|
|
134
|
-
De3pzq: "
|
|
135
|
-
sj55zd: "
|
|
134
|
+
De3pzq: "fcoq67a",
|
|
135
|
+
sj55zd: "f1kdo70m",
|
|
136
136
|
g2u3we: "fgig46g",
|
|
137
137
|
h3c5rm: ["f1mxt3zg", "fziff3p"],
|
|
138
138
|
B9xav0g: "f250w3l",
|
|
@@ -140,8 +140,8 @@ const useRootDisabledAppearances = /*#__PURE__*/__styles({
|
|
|
140
140
|
},
|
|
141
141
|
outline: {
|
|
142
142
|
Bceei9c: "fdrzuqr",
|
|
143
|
-
De3pzq: "
|
|
144
|
-
sj55zd: "
|
|
143
|
+
De3pzq: "f1kp2vjc",
|
|
144
|
+
sj55zd: "f2hvs9t",
|
|
145
145
|
g2u3we: "f1jj8ep1",
|
|
146
146
|
h3c5rm: ["f15xbau", "fy0fskl"],
|
|
147
147
|
B9xav0g: "f4ikngz",
|
|
@@ -149,15 +149,15 @@ const useRootDisabledAppearances = /*#__PURE__*/__styles({
|
|
|
149
149
|
},
|
|
150
150
|
brand: {
|
|
151
151
|
Bceei9c: "fdrzuqr",
|
|
152
|
-
De3pzq: "
|
|
153
|
-
sj55zd: "
|
|
152
|
+
De3pzq: "f12w8ro6",
|
|
153
|
+
sj55zd: "f2jblom",
|
|
154
154
|
g2u3we: "fgig46g",
|
|
155
155
|
h3c5rm: ["f1mxt3zg", "fziff3p"],
|
|
156
156
|
B9xav0g: "f250w3l",
|
|
157
157
|
zhjwy3: ["fziff3p", "f1mxt3zg"]
|
|
158
158
|
}
|
|
159
159
|
}, {
|
|
160
|
-
d: [".fdrzuqr{cursor:not-allowed;}", ".
|
|
160
|
+
d: [".fdrzuqr{cursor:not-allowed;}", ".fcoq67a{background-color:var(--2349, var(--2350, var(--colorNeutralBackgroundDisabled)));}", ".f1kdo70m{color:var(--2351, var(--2352, var(--colorNeutralForegroundDisabled)));}", ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f250w3l{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".f1kp2vjc{background-color:var(--2353, var(--2354, var(--colorSubtleBackground)));}", ".f2hvs9t{color:var(--2355, var(--2356, var(--colorNeutralForegroundDisabled)));}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f12w8ro6{background-color:var(--2357, var(--2358, var(--colorNeutralBackgroundDisabled)));}", ".f2jblom{color:var(--2359, var(--2360, var(--colorNeutralForegroundDisabled)));}"]
|
|
161
161
|
});
|
|
162
162
|
/**
|
|
163
163
|
* Styles for InteractionTagPrimary without leading media/icon
|
|
@@ -180,23 +180,23 @@ const useRootWithoutMediaStyles = /*#__PURE__*/__styles({
|
|
|
180
180
|
*/
|
|
181
181
|
const useRootWithSecondaryActionStyles = /*#__PURE__*/__styles({
|
|
182
182
|
base: {
|
|
183
|
-
B7oj6ja: ["
|
|
184
|
-
Bbmb7ep: ["
|
|
183
|
+
B7oj6ja: ["f1f9i9yp", "f1x9xia2"],
|
|
184
|
+
Bbmb7ep: ["fkcgrki", "fhvuqye"],
|
|
185
185
|
vrafjx: ["f1n71otn", "f1deefiw"],
|
|
186
|
-
B6xbmo0: ["
|
|
187
|
-
kdpuga: ["
|
|
186
|
+
B6xbmo0: ["f1wwpm5y", "f1ygw34o"],
|
|
187
|
+
kdpuga: ["f1wfvr02", "f1pxw9ey"]
|
|
188
188
|
},
|
|
189
189
|
medium: {
|
|
190
|
-
z189sj: ["
|
|
190
|
+
z189sj: ["f1ia156x", "f1chbfv8"]
|
|
191
191
|
},
|
|
192
192
|
small: {
|
|
193
|
-
z189sj: ["
|
|
193
|
+
z189sj: ["fgoq13l", "f1nzuroq"]
|
|
194
194
|
},
|
|
195
195
|
"extra-small": {
|
|
196
|
-
z189sj: ["
|
|
196
|
+
z189sj: ["f10l08si", "f1hf5pr2"]
|
|
197
197
|
}
|
|
198
198
|
}, {
|
|
199
|
-
d: [".
|
|
199
|
+
d: [".f1f9i9yp{border-top-right-radius:var(--2361, var(--2362, var(--borderRadiusNone)));}", ".f1x9xia2{border-top-left-radius:var(--2361, var(--2362, var(--borderRadiusNone)));}", ".fkcgrki{border-bottom-right-radius:var(--2363, var(--2364, var(--borderRadiusNone)));}", ".fhvuqye{border-bottom-left-radius:var(--2363, var(--2364, var(--borderRadiusNone)));}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1wwpm5y[data-fui-focus-visible]{border-top-right-radius:var(--2365, var(--2366, var(--borderRadiusNone)));}", ".f1ygw34o[data-fui-focus-visible]{border-top-left-radius:var(--2365, var(--2366, var(--borderRadiusNone)));}", ".f1wfvr02[data-fui-focus-visible]{border-bottom-right-radius:var(--2367, var(--2368, var(--borderRadiusNone)));}", ".f1pxw9ey[data-fui-focus-visible]{border-bottom-left-radius:var(--2367, var(--2368, var(--borderRadiusNone)));}", ".f1ia156x{padding-right:var(--2369, var(--2370, var(--spacingHorizontalS)));}", ".f1chbfv8{padding-left:var(--2369, var(--2370, var(--spacingHorizontalS)));}", ".fgoq13l{padding-right:var(--2371, var(--2372, var(--spacingHorizontalSNudge)));}", ".f1nzuroq{padding-left:var(--2371, var(--2372, var(--spacingHorizontalSNudge)));}", ".f10l08si{padding-right:var(--2373, var(--2374, var(--spacingHorizontalSNudge)));}", ".f1hf5pr2{padding-left:var(--2373, var(--2374, var(--spacingHorizontalSNudge)));}"]
|
|
200
200
|
});
|
|
201
201
|
export const useInteractionTagPrimaryStyles_unstable = state => {
|
|
202
202
|
'use no memo';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","shape","size","className","hasSecondaryAction","disabled","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px'\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n })\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n const { shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","shape","size","className","hasSecondaryAction","disabled","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: `var(--2293, var(--2294, ${tokens.borderRadiusMedium}))`,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: `var(--2295, var(--2296, ${tokens.borderRadiusMedium}))`,\n borderTopRightRadius: `var(--2297, var(--2298, ${tokens.borderRadiusMedium}))`\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: `var(--2299, var(--2300, ${tokens.borderRadiusCircular}))`,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: `var(--2301, var(--2302, ${tokens.borderRadiusCircular}))`,\n borderBottomLeftRadius: `var(--2303, var(--2304, ${tokens.borderRadiusCircular}))`\n }\n }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: `var(--2305, var(--2306, ${tokens.borderRadiusCircular}))`,\n borderBottomRightRadius: `var(--2307, var(--2308, ${tokens.borderRadiusCircular}))`\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: `var(--2309, var(--2310, ${tokens.colorNeutralBackground3}))`,\n color: `var(--2311, var(--2312, ${tokens.colorNeutralForeground2}))`,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: `var(--2313, var(--2314, ${tokens.colorNeutralBackground3Hover}))`,\n color: `var(--2315, var(--2316, ${tokens.colorNeutralForeground2Hover}))`\n },\n ':active': {\n backgroundColor: `var(--2317, var(--2318, ${tokens.colorNeutralBackground3Pressed}))`,\n color: `var(--2319, var(--2320, ${tokens.colorNeutralForeground2Pressed}))`\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: `var(--2321, var(--2322, ${tokens.colorSubtleBackground}))`,\n color: `var(--2323, var(--2324, ${tokens.colorNeutralForeground2}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: `var(--2325, var(--2326, ${tokens.colorSubtleBackgroundHover}))`,\n color: `var(--2327, var(--2328, ${tokens.colorNeutralForeground2Hover}))`,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: `var(--2329, var(--2330, ${tokens.colorNeutralForeground2BrandHover}))`\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: `var(--2331, var(--2332, ${tokens.colorSubtleBackgroundPressed}))`,\n color: `var(--2333, var(--2334, ${tokens.colorNeutralForeground2Pressed}))`,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: `var(--2335, var(--2336, ${tokens.colorNeutralForeground2BrandPressed}))`\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: `var(--2337, var(--2338, ${tokens.colorBrandBackground2}))`,\n color: `var(--2339, var(--2340, ${tokens.colorBrandForeground2}))`,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: `var(--2341, var(--2342, ${tokens.colorBrandBackground2Hover}))`,\n color: `var(--2343, var(--2344, ${tokens.colorCompoundBrandForeground1Hover}))`\n },\n ':active': {\n backgroundColor: `var(--2345, var(--2346, ${tokens.colorBrandBackground2Pressed}))`,\n color: `var(--2347, var(--2348, ${tokens.colorCompoundBrandForeground1Pressed}))`\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px'\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: `var(--2349, var(--2350, ${tokens.colorNeutralBackgroundDisabled}))`,\n color: `var(--2351, var(--2352, ${tokens.colorNeutralForegroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: `var(--2353, var(--2354, ${tokens.colorSubtleBackground}))`,\n color: `var(--2355, var(--2356, ${tokens.colorNeutralForegroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: `var(--2357, var(--2358, ${tokens.colorNeutralBackgroundDisabled}))`,\n color: `var(--2359, var(--2360, ${tokens.colorNeutralForegroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: `var(--2361, var(--2362, ${tokens.borderRadiusNone}))`,\n borderBottomRightRadius: `var(--2363, var(--2364, ${tokens.borderRadiusNone}))`,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: `var(--2365, var(--2366, ${tokens.borderRadiusNone}))`,\n borderBottomRightRadius: `var(--2367, var(--2368, ${tokens.borderRadiusNone}))`\n })\n },\n medium: {\n paddingRight: `var(--2369, var(--2370, ${tokens.spacingHorizontalS}))`\n },\n small: {\n paddingRight: `var(--2371, var(--2372, ${tokens.spacingHorizontalSNudge}))`\n },\n 'extra-small': {\n paddingRight: `var(--2373, var(--2374, ${tokens.spacingHorizontalSNudge}))`\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n const { shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,aAAa,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,6BAA6B,QAAQ,4BAA4B;AAC/H,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,KAAK,EAAE,kCAAkC;EACzCC,IAAI,EAAE,iCAAiC;EACvCC,WAAW,EAAE,wCAAwC;EACrDC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,UAAU,GAAG;EACf;EACAC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,KAAK;EACdC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,OAAO;EAClBC,eAAe,EAAE,aAAa;EAC9BC,OAAO,EAAE,aAAa;EACtBC,MAAM,EAAE,MAAM;EACdC,UAAU,EAAE,QAAQ;EACpBC,iBAAiB,EAAE;AACvB;AACA;AACA,GAAG;EACCC,MAAM,EAAE,GAAGzB,MAAM,CAAC0B,eAAe,UAAU1B,MAAM,CAAC2B,sBAAsB,EAAE;EAC1E,iBAAG5B,+BAA+B,CAAC;IAC/B6B,OAAO,EAAE,GAAG5B,MAAM,CAAC6B,gBAAgB,UAAU7B,MAAM,CAAC8B,iBAAiB,EAAE;IACvEC,MAAM,EAAE;EACZ,CAAC;AACL,CAAC;AACD,MAAMC,2BAA2B,gBAAGrC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAoBnC,CAAC;AACF,MAAMC,4BAA4B,gBAAGxC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAqBpC,CAAC;AACF;AACA;AACA;AAAI,MAAME,6BAA6B,gBAAGxC,QAAA;EAAAyC,sBAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAC,CAAA;IAAAD,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWzC,CAAC;AACF,MAAME,aAAa,gBAAGnD,QAAA;EAAAoD,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,OAAA;IAAAqB,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAU,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,OAAA;IAAAC,MAAA;EAAA;EAAAW,KAAA;IAAAnB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAY,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAA7B,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAwFrB,CAAC;AACF,MAAM8B,0BAA0B,gBAAG/E,QAAA;EAAAoD,MAAA;IAAA4B,OAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjC,OAAA;IAAAgD,OAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,KAAA;IAAAQ,OAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAmBlC,CAAC;AACF;AACA;AACA;AAAI,MAAMK,yBAAyB,gBAAGjF,QAAA;EAAAyE,MAAA;IAAAS,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAUrC,CAAC;AACF;AACA;AACA;AAAI,MAAMO,gCAAgC,gBAAGnF,QAAA;EAAAoF,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAhB,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAmB5C,CAAC;AACF,OAAO,MAAMc,uCAAuC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,wBAAwB,GAAGxD,2BAA2B,CAAC,CAAC;EAC9D,MAAMyD,yBAAyB,GAAGtD,4BAA4B,CAAC,CAAC;EAChE,MAAMuD,UAAU,GAAG3C,aAAa,CAAC,CAAC;EAClC,MAAM4C,uBAAuB,GAAGhB,0BAA0B,CAAC,CAAC;EAC5D,MAAMiB,sBAAsB,GAAGf,yBAAyB,CAAC,CAAC;EAC1D,MAAMgB,6BAA6B,GAAGd,gCAAgC,CAAC,CAAC;EACxE,MAAMe,UAAU,GAAG3F,aAAa,CAAC,CAAC;EAClC,MAAM4F,WAAW,GAAG3F,cAAc,CAAC,CAAC;EACpC,MAAM4F,iBAAiB,GAAG3F,oBAAoB,CAAC,CAAC;EAChD,MAAM4F,0BAA0B,GAAG3F,6BAA6B,CAAC,CAAC;EAClE,MAAM4F,0BAA0B,GAAG9D,6BAA6B,CAAC,CAAC;EAClE,MAAM;IAAE+D,KAAK;IAAEC,IAAI;IAAElF;EAAW,CAAC,GAAGqE,KAAK;EACzCA,KAAK,CAAC/E,IAAI,CAAC6F,SAAS,GAAGxG,YAAY,CAACU,+BAA+B,CAACC,IAAI,EAAE2F,KAAK,KAAK,SAAS,GAAGX,wBAAwB,GAAGC,yBAAyB,EAAEU,KAAK,KAAK,UAAU,IAAI,CAACZ,KAAK,CAACe,kBAAkB,IAAIJ,0BAA0B,CAAC7D,sBAAsB,EAAEkD,KAAK,CAACgB,QAAQ,GAAGZ,uBAAuB,CAACzE,UAAU,CAAC,GAAGwE,UAAU,CAACxE,UAAU,CAAC,EAAEwE,UAAU,CAACU,IAAI,CAAC,EAAE,CAACb,KAAK,CAAC9E,KAAK,IAAI,CAAC8E,KAAK,CAAC7E,IAAI,IAAIkF,sBAAsB,CAACQ,IAAI,CAAC,EAAEb,KAAK,CAACe,kBAAkB,IAAIT,6BAA6B,CAACb,IAAI,EAAEO,KAAK,CAACe,kBAAkB,IAAIT,6BAA6B,CAACO,IAAI,CAAC,EAAEb,KAAK,CAAC/E,IAAI,CAAC6F,SAAS,CAAC;EACljB,IAAId,KAAK,CAAC9E,KAAK,EAAE;IACb8E,KAAK,CAAC9E,KAAK,CAAC4F,SAAS,GAAGxG,YAAY,CAACU,+BAA+B,CAACE,KAAK,EAAEsF,WAAW,CAACf,IAAI,EAAEe,WAAW,CAACK,IAAI,CAAC,EAAEb,KAAK,CAAC9E,KAAK,CAAC4F,SAAS,CAAC;EAC3I;EACA,IAAId,KAAK,CAAC7E,IAAI,EAAE;IACZ6E,KAAK,CAAC7E,IAAI,CAAC2F,SAAS,GAAGxG,YAAY,CAACU,+BAA+B,CAACG,IAAI,EAAEoF,UAAU,CAACd,IAAI,EAAEc,UAAU,CAACM,IAAI,CAAC,EAAEb,KAAK,CAAC7E,IAAI,CAAC2F,SAAS,CAAC;EACtI;EACA,IAAId,KAAK,CAAC5E,WAAW,EAAE;IACnB4E,KAAK,CAAC5E,WAAW,CAAC0F,SAAS,GAAGxG,YAAY,CAACU,+BAA+B,CAACI,WAAW,EAAEqF,iBAAiB,CAAChB,IAAI,EAAEgB,iBAAiB,CAACI,IAAI,CAAC,EAAEb,KAAK,CAAC3E,aAAa,GAAGoF,iBAAiB,CAACQ,iBAAiB,GAAGR,iBAAiB,CAACS,oBAAoB,EAAElB,KAAK,CAAC5E,WAAW,CAAC0F,SAAS,CAAC;EAC7Q;EACA,IAAId,KAAK,CAAC3E,aAAa,EAAE;IACrB2E,KAAK,CAAC3E,aAAa,CAACyF,SAAS,GAAGxG,YAAY,CAACU,+BAA+B,CAACK,aAAa,EAAEqF,0BAA0B,EAAEV,KAAK,CAAC3E,aAAa,CAACyF,SAAS,CAAC;EAC1J;EACA,OAAOd,KAAK;AAChB,CAAC","ignoreList":[]}
|