@fluentui/react-card 0.0.0-nightly-20240819-2137.1 → 0.0.0-nightly-20240820-2210.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 CHANGED
@@ -1,26 +1,45 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Mon, 19 Aug 2024 21:48:22 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Aug 2024 22:15:04 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240819-2137.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20240819-2137.1)
7
+ ## [0.0.0-nightly-20240820-2210.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20240820-2210.1)
8
8
 
9
- Mon, 19 Aug 2024 21:48:22 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.87..@fluentui/react-card_v0.0.0-nightly-20240819-2137.1)
9
+ Tue, 20 Aug 2024 22:15:04 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.89..@fluentui/react-card_v0.0.0-nightly-20240820-2210.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-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
19
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
20
- - Bump @fluentui/react-provider to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
21
- - Bump @fluentui/react-button to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
23
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
17
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
18
+ - Bump @fluentui/react-text to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
21
+ - Bump @fluentui/react-button to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
23
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
24
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
25
+
26
+ ## [9.0.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.89)
27
+
28
+ Tue, 06 Aug 2024 21:40:43 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.88..@fluentui/react-card_v9.0.89)
30
+
31
+ ### Patches
32
+
33
+ - fix: Card does not override specified focusMode based on event listeners ([PR #32200](https://github.com/microsoft/fluentui/pull/32200) by sarah.higley@microsoft.com)
34
+
35
+ ## [9.0.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.88)
36
+
37
+ Tue, 30 Jul 2024 18:47:32 GMT
38
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.87..@fluentui/react-card_v9.0.88)
39
+
40
+ ### Patches
41
+
42
+ - fix: improve hover for HC mode ([PR #31953](https://github.com/microsoft/fluentui/pull/31953) by marcosvmmoura@gmail.com)
24
43
 
25
44
  ## [9.0.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.87)
26
45
 
@@ -16,7 +16,7 @@ const focusMap = {
16
16
  * and control focus properties based on that.
17
17
  *
18
18
  * @param props - props from this instance of Card
19
- */ const useCardInteractive = ({ focusMode = 'off', ...props })=>{
19
+ */ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
20
20
  const interactive = [
21
21
  'onClick',
22
22
  'onDoubleClick',
@@ -29,8 +29,10 @@ const focusMap = {
29
29
  'onDragStart',
30
30
  'onDragEnd'
31
31
  ].some((prop)=>props[prop]);
32
+ // default focusMode to tab-only when interactive, and off when not
33
+ const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
32
34
  const groupperAttrs = useFocusableGroup({
33
- tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
35
+ tabBehavior: focusMap[focusMode]
34
36
  });
35
37
  const interactiveFocusAttributes = {
36
38
  ...groupperAttrs,
@@ -38,7 +40,7 @@ const focusMap = {
38
40
  };
39
41
  return {
40
42
  interactive,
41
- focusAttributes: !interactive && focusMode === 'off' ? null : interactiveFocusAttributes
43
+ focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
42
44
  };
43
45
  };
44
46
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n const interactive = (\n [\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n ).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: !interactive && focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...(!selectable ? focusAttributes : null),\n ...props,\n ...selectableCardProps,\n }),\n { elementType: 'div' },\n ),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAkB;IACpE,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,MAAMC,gBAAgBb,kBAAkB;QACtCc,aAAaV,QAAQ,CAACM,cAAc,WAAWF,UAAU;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiB,CAACP,eAAeF,cAAc,QAAQ,OAAOO;IAChE;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG5B,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGhC,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc5B;IACpB,MAAM,EAAE6B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUtC,cAAc+B,aAAaV;IAE3C,MAAM,EAAET,WAAW,EAAEO,eAAe,EAAE,GAAGV,mBAAmBE;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMvC,KAAK0C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BsB,KAAKiB;YACLM,MAAM;YACN,GAAI,CAACZ,aAAab,kBAAkB,IAAI;YACxC,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
1
+ {"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode: initialFocusMode, ...props }: CardProps) => {\n const interactive = (\n [\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n ).some(prop => props[prop]);\n\n // default focusMode to tab-only when interactive, and off when not\n const focusMode = initialFocusMode ?? (interactive ? 'no-tab' : 'off');\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...(!selectable ? focusAttributes : null),\n ...props,\n ...selectableCardProps,\n }),\n { elementType: 'div' },\n ),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","initialFocusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,WAAWC,gBAAgB,EAAE,GAAGC,OAAkB;IAC9E,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,mEAAmE;IACnE,MAAML,YAAYC,6BAAAA,8BAAAA,mBAAqBE,cAAc,WAAW;IAEhE,MAAMG,gBAAgBd,kBAAkB;QACtCe,aAAaX,QAAQ,CAACI,UAAU;IAClC;IAEA,MAAMQ,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBV,cAAc,QAAQ,OAAOQ;IAChD;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG7B,MAAM8B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGjC,MAAM8B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc7B;IACpB,MAAM,EAAE8B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGlC,kBAAkBQ,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUvC,cAAcgC,aAAaV;IAE3C,MAAM,EAAET,WAAW,EAAEO,eAAe,EAAE,GAAGX,mBAAmBG;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMxC,KAAK2C,MAAM,CACf7C,yBAAyB,OAAO;YAC9BuB,KAAKiB;YACLM,MAAM;YACN,GAAI,CAACZ,aAAab,kBAAkB,IAAI;YACxC,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
@@ -1,10 +1,11 @@
1
- import { shorthands, __styles, mergeClasses } from '@griffel/react';
1
+ import * as React from 'react';
2
+ import { shorthands, __styles, mergeClasses, __resetStyles } from '@griffel/react';
2
3
  import { tokens } from '@fluentui/react-theme';
4
+ import { textClassNames } from '@fluentui/react-text';
3
5
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
4
6
  import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
5
7
  import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
6
8
  import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
7
- import * as React from 'react';
8
9
  /**
9
10
  * Static CSS class names used internally for the component slots.
10
11
  */
@@ -22,53 +23,11 @@ export const cardCSSVars = {
22
23
  };
23
24
  const focusOutlineStyle = {
24
25
  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
25
- outlineWidth: `var(--ctrl-token-Card-697, var(--semantic-token-Card-698, ${tokens.strokeWidthThick}))`,
26
+ outlineWidth: `var(--697, var(--698, ${tokens.strokeWidthThick}))`,
26
27
  outlineOffset: '-2px'
27
28
  };
28
- const useStyles = /*#__PURE__*/__styles({
29
- root: {
30
- B68tc82: 0,
31
- Bmxbyg5: 0,
32
- Bpg54ce: "f1a3p1vp",
33
- Beyfa6y: 0,
34
- Bbmb7ep: 0,
35
- Btl43ni: 0,
36
- B7oj6ja: 0,
37
- Dimara: "flpxrij",
38
- Byoj8tv: 0,
39
- uwmqm3: 0,
40
- z189sj: 0,
41
- z8tnut: 0,
42
- B0ocmuz: "fi54ll6",
43
- i8kkvl: 0,
44
- Belr9w4: 0,
45
- rmohyg: "fs0zar4",
46
- mc9l5x: "f22iagw",
47
- qhf8xq: "f10pi13n",
48
- B7ck84d: "f1ewtqcl",
49
- sj55zd: "f1py3b4z",
50
- E3zdtr: "f1mdlcz9",
51
- bn5sak: "frwkxtg",
52
- Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
53
- B1piin3: ["f15yvnhg", "f1n6gb5g"],
54
- By385i5: "fo72kxq",
55
- Bsft5z2: "f13zj6fq",
56
- B80jsxd: "f1nwj1ja",
57
- Bm2nyyq: "f8rth92",
58
- Barhvk9: ["flthirb", "ftkbnf5"],
59
- Bw17bha: "f1lh990p",
60
- vfts7: ["ftkbnf5", "flthirb"],
61
- xrcqlc: "f6czdpx",
62
- Ihftqj: ["f13hvwk3", "f1en4csx"],
63
- Bcgy8vk: "f1i1u9k0",
64
- Bhxzhr1: ["f1en4csx", "f13hvwk3"],
65
- d9w3h3: 0,
66
- B3778ie: 0,
67
- B4j8arr: 0,
68
- Bl18szs: 0,
69
- Blrzh8d: "fw3u9gn",
70
- Bwr1qzv: "fnk4z59"
71
- },
29
+ const useCardResetStyles = /*#__PURE__*/__resetStyles("r1fgywha", "rwpg34w", [".r1fgywha{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--699, var(--700, var(--colorNeutralForeground1));&::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}&> .fui-CardHeader,& > .fui-CardFooter{flex-shrink:0;}};}", ".rwpg34w{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--699, var(--700, var(--colorNeutralForeground1));&::after{position:absolute;top:0;right:0;left:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}&> .fui-CardHeader,& > .fui-CardFooter{flex-shrink:0;}};}"]);
30
+ const useCardStyles = /*#__PURE__*/__styles({
72
31
  focused: {
73
32
  Brovlpu: "ftqa4ok",
74
33
  B486eqv: "f2hkw1w",
@@ -100,16 +59,16 @@ const useStyles = /*#__PURE__*/__styles({
100
59
  B6dhp37: 0,
101
60
  Bf4ptjt: 0,
102
61
  Bqtpl0w: 0,
103
- i4rwgc: "f1xbuv65",
62
+ i4rwgc: "f1pjxlw4",
104
63
  Dah5zi: 0,
105
64
  B1tsrr9: 0,
106
65
  qqdqy8: 0,
107
66
  Bkh64rk: 0,
108
67
  e3fwne: "fnd8nzh",
109
- J0r882: "f1ja06rw",
110
- Bule8hv: ["f1fgi2v", "f13s1pi5"],
111
- Bjwuhne: "f5o6laa",
112
- Ghsupd: ["f13s1pi5", "f1fgi2v"]
68
+ J0r882: "f1x3nap9",
69
+ Bule8hv: ["f7wspi5", "f1hn9lz"],
70
+ Bjwuhne: "fsnb5w7",
71
+ Ghsupd: ["f1hn9lz", "f7wspi5"]
113
72
  },
114
73
  selectableFocused: {
115
74
  Brovlpu: "ftqa4ok",
@@ -142,16 +101,16 @@ const useStyles = /*#__PURE__*/__styles({
142
101
  nr063g: 0,
143
102
  ghq09: 0,
144
103
  Bbgo44z: 0,
145
- Bseh09z: "f5o6rnv",
104
+ Bseh09z: "f1f7o0bi",
146
105
  az1dzo: 0,
147
106
  Ba3ybja: 0,
148
107
  B6352mv: 0,
149
108
  vppk2z: 0,
150
109
  Biaj6j7: "f1nh8hsq",
151
- B2pnrqr: "f1vngpbu",
152
- B29w5g4: ["f1pf2b7l", "fb1a886"],
153
- Bhhzhcn: "f1bquznm",
154
- Bec0n69: ["fb1a886", "f1pf2b7l"]
110
+ B2pnrqr: "f1wk50th",
111
+ B29w5g4: ["f10jz3mr", "fc1dnuj"],
112
+ Bhhzhcn: "f10o2p02",
113
+ Bec0n69: ["fc1dnuj", "f10jz3mr"]
155
114
  },
156
115
  orientationHorizontal: {
157
116
  Beiy3e4: "f1063pyq",
@@ -172,19 +131,22 @@ const useStyles = /*#__PURE__*/__styles({
172
131
  },
173
132
  sizeSmall: {
174
133
  B7balbw: "f1pi9uxy",
175
- B1h88n7: "f15mxzhv"
134
+ B1h88n7: "fir8pkv"
176
135
  },
177
136
  sizeMedium: {
178
137
  B7balbw: "frsmuga",
179
- B1h88n7: "fw2n66"
138
+ B1h88n7: "f1uqf95q"
180
139
  },
181
140
  sizeLarge: {
182
141
  B7balbw: "f1qua4xo",
183
- B1h88n7: "f18zjdj0"
142
+ B1h88n7: "f1u1hr7d"
143
+ },
144
+ interactive: {
145
+ rhjd8f: "f1epqm3e"
184
146
  },
185
147
  filled: {
186
- De3pzq: "f1y5ql7n",
187
- E5pizo: "f1l2ude5",
148
+ De3pzq: "fltf6vh",
149
+ E5pizo: "fwitwng",
188
150
  B0n5ga8: "f16gxe2i",
189
151
  s924m2: ["fpgykix", "fzybk4o"],
190
152
  B1q35kw: "f1osi826",
@@ -192,27 +154,29 @@ const useStyles = /*#__PURE__*/__styles({
192
154
  },
193
155
  filledInteractive: {
194
156
  Bceei9c: "f1k6fduh",
195
- De3pzq: "fiekp45",
196
- E5pizo: "f7rwcsy",
157
+ De3pzq: "f1h5vatx",
158
+ E5pizo: "f1uxkkbl",
197
159
  B0n5ga8: "f16gxe2i",
198
160
  s924m2: ["fpgykix", "fzybk4o"],
199
161
  B1q35kw: "f1osi826",
200
162
  Gp14am: ["fzybk4o", "fpgykix"],
201
- Jwef8y: "f9iybsv",
202
- Bvxd0ez: "f1b9qmj4",
203
- ecr2s2: "fljdlzu"
163
+ Bi91k9c: "feu1g3u",
164
+ Jwef8y: "f7oweeb",
165
+ Bvxd0ez: "f18emohc",
166
+ ecr2s2: "fqbzxcg"
204
167
  },
205
168
  filledInteractiveSelected: {
206
- De3pzq: "f12vh31t",
169
+ De3pzq: "f1ksn0ep",
207
170
  B0n5ga8: "f16eln5f",
208
171
  s924m2: ["fa2okxs", "fg4zq3l"],
209
172
  B1q35kw: "ff6932p",
210
173
  Gp14am: ["fg4zq3l", "fa2okxs"],
211
- Jwef8y: "fe4l7lm"
174
+ Bi91k9c: "fx9teim",
175
+ Jwef8y: "f1bwa2ac"
212
176
  },
213
177
  filledAlternative: {
214
- De3pzq: "f145rpb8",
215
- E5pizo: "f1jrlzwb",
178
+ De3pzq: "far5xx1",
179
+ E5pizo: "fsznyw7",
216
180
  B0n5ga8: "f16gxe2i",
217
181
  s924m2: ["fpgykix", "fzybk4o"],
218
182
  B1q35kw: "f1osi826",
@@ -220,26 +184,27 @@ const useStyles = /*#__PURE__*/__styles({
220
184
  },
221
185
  filledAlternativeInteractive: {
222
186
  Bceei9c: "f1k6fduh",
223
- De3pzq: "f1kgqpjs",
224
- E5pizo: "f1a2zne9",
187
+ De3pzq: "f7smas5",
188
+ E5pizo: "f1ubef17",
225
189
  B0n5ga8: "f16gxe2i",
226
190
  s924m2: ["fpgykix", "fzybk4o"],
227
191
  B1q35kw: "f1osi826",
228
192
  Gp14am: ["fzybk4o", "fpgykix"],
229
- Jwef8y: "fqm50rs",
230
- Bvxd0ez: "fq5fk87",
231
- ecr2s2: "f15wjqsw"
193
+ Bi91k9c: "fnwyq0v",
194
+ Jwef8y: "fzx3r4q",
195
+ Bvxd0ez: "fug60o5",
196
+ ecr2s2: "f1ha9751"
232
197
  },
233
198
  filledAlternativeInteractiveSelected: {
234
- De3pzq: "flecxhl",
199
+ De3pzq: "fufun8q",
235
200
  B0n5ga8: "f16eln5f",
236
201
  s924m2: ["fa2okxs", "fg4zq3l"],
237
202
  B1q35kw: "ff6932p",
238
203
  Gp14am: ["fg4zq3l", "fa2okxs"],
239
- Jwef8y: "f1oin7as"
204
+ Jwef8y: "frbale"
240
205
  },
241
206
  outline: {
242
- De3pzq: "f11a8mzo",
207
+ De3pzq: "faq45x3",
243
208
  E5pizo: "f1couhl3",
244
209
  B0n5ga8: "ft83z1f",
245
210
  s924m2: ["f1g4150c", "f192dr6e"],
@@ -248,33 +213,35 @@ const useStyles = /*#__PURE__*/__styles({
248
213
  },
249
214
  outlineInteractive: {
250
215
  Bceei9c: "f1k6fduh",
251
- De3pzq: "f134r7n3",
216
+ De3pzq: "f80i76d",
252
217
  E5pizo: "f1couhl3",
253
218
  B0n5ga8: "ft83z1f",
254
219
  s924m2: ["f1g4150c", "f192dr6e"],
255
220
  B1q35kw: "f1qnawh6",
256
221
  Gp14am: ["f192dr6e", "f1g4150c"],
257
- Jwef8y: "frxoo8s",
222
+ Bi91k9c: "feu1g3u",
223
+ Jwef8y: "f1qzbeqf",
258
224
  Be0v6ae: "f1llr77y",
259
225
  B5kxglz: ["fzk0khw", "fjj8tog"],
260
226
  B3pwyw6: "fb1u8ub",
261
227
  Bymgtzf: ["fjj8tog", "fzk0khw"],
262
- ecr2s2: "f1djjq2p",
228
+ ecr2s2: "fny1dgt",
263
229
  dmfk: "f1uohb70",
264
230
  B4ofi8: ["f1jm7v1n", "f1bus3rq"],
265
231
  jgq6uv: "f1fbu7rr",
266
232
  Baxewws: ["f1bus3rq", "f1jm7v1n"]
267
233
  },
268
234
  outlineInteractiveSelected: {
269
- De3pzq: "f3jdprh",
235
+ De3pzq: "f1l0mf4q",
270
236
  B0n5ga8: "f16eln5f",
271
237
  s924m2: ["fa2okxs", "fg4zq3l"],
272
238
  B1q35kw: "ff6932p",
273
239
  Gp14am: ["fg4zq3l", "fa2okxs"],
274
- Jwef8y: "f1tbkf9f"
240
+ Bi91k9c: "fx9teim",
241
+ Jwef8y: "f12erfqo"
275
242
  },
276
243
  subtle: {
277
- De3pzq: "focdvv2",
244
+ De3pzq: "fkapjeb",
278
245
  E5pizo: "f1couhl3",
279
246
  B0n5ga8: "f16gxe2i",
280
247
  s924m2: ["fpgykix", "fzybk4o"],
@@ -283,22 +250,24 @@ const useStyles = /*#__PURE__*/__styles({
283
250
  },
284
251
  subtleInteractive: {
285
252
  Bceei9c: "f1k6fduh",
286
- De3pzq: "f1rfvwxm",
253
+ De3pzq: "f51qof6",
287
254
  E5pizo: "f1couhl3",
288
255
  B0n5ga8: "f16gxe2i",
289
256
  s924m2: ["fpgykix", "fzybk4o"],
290
257
  B1q35kw: "f1osi826",
291
258
  Gp14am: ["fzybk4o", "fpgykix"],
292
- Jwef8y: "f1cdzzdq",
293
- ecr2s2: "fe89iq9"
259
+ Bi91k9c: "feu1g3u",
260
+ Jwef8y: "fopo1yw",
261
+ ecr2s2: "ftzbayt"
294
262
  },
295
263
  subtleInteractiveSelected: {
296
- De3pzq: "f8hjf28",
264
+ De3pzq: "f998m3t",
297
265
  B0n5ga8: "f16eln5f",
298
266
  s924m2: ["fa2okxs", "fg4zq3l"],
299
267
  B1q35kw: "ff6932p",
300
268
  Gp14am: ["fg4zq3l", "fa2okxs"],
301
- Jwef8y: "f241ven"
269
+ Bi91k9c: "fx9teim",
270
+ Jwef8y: "fbohybn"
302
271
  },
303
272
  highContrastSelected: {
304
273
  ycbfsm: "fkc42ay",
@@ -338,29 +307,19 @@ const useStyles = /*#__PURE__*/__styles({
338
307
  Huce71: "fz5stix"
339
308
  }
340
309
  }, {
341
- d: [[".f1a3p1vp{overflow:hidden;}", {
342
- p: -1
343
- }], [".flpxrij{border-radius:var(--fui-Card--border-radius);}", {
344
- p: -1
345
- }], [".fi54ll6{padding:var(--fui-Card--size);}", {
346
- p: -1
347
- }], [".fs0zar4{gap:var(--fui-Card--size);}", {
348
- p: -1
349
- }], ".f22iagw{display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1py3b4z{color:var(--ctrl-token-Card-699, var(--semantic-token-Card-700, var(--colorNeutralForeground1)));}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", [".fw3u9gn::after{border-radius:var(--fui-Card--border-radius);}", {
350
- p: -1
351
- }], ".fnk4z59>.fui-CardHeader,.fnk4z59>.fui-CardFooter{flex-shrink:0;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".f1xbuv65[data-fui-focus-visible]::after{border:var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) solid var(--colorStrokeFocus2);}", {
310
+ f: [".ftqa4ok:focus{outline-style:none;}"],
311
+ i: [".f2hkw1w:focus-visible{outline-style:none;}"],
312
+ d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".f1pjxlw4[data-fui-focus-visible]::after{border:var(--697, var(--698, var(--strokeWidthThick))) solid var(--colorStrokeFocus2);}", {
352
313
  p: -2
353
314
  }], [".fnd8nzh[data-fui-focus-visible]::after{border-radius:var(--fui-Card--border-radius);}", {
354
315
  p: -1
355
- }], ".f1ja06rw[data-fui-focus-visible]::after{top:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1fgi2v[data-fui-focus-visible]::after{right:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f13s1pi5[data-fui-focus-visible]::after{left:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f5o6laa[data-fui-focus-visible]::after{bottom:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".f5o6rnv[data-fui-focus-within]:focus-within::after{border:var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) solid var(--colorStrokeFocus2);}", {
316
+ }], ".f1x3nap9[data-fui-focus-visible]::after{top:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".f7wspi5[data-fui-focus-visible]::after{right:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".f1hn9lz[data-fui-focus-visible]::after{left:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".fsnb5w7[data-fui-focus-visible]::after{bottom:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".f1f7o0bi[data-fui-focus-within]:focus-within::after{border:var(--697, var(--698, var(--strokeWidthThick))) solid var(--colorStrokeFocus2);}", {
356
317
  p: -2
357
318
  }], [".f1nh8hsq[data-fui-focus-within]:focus-within::after{border-radius:var(--fui-Card--border-radius);}", {
358
319
  p: -1
359
- }], ".f1vngpbu[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1pf2b7l[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".fb1a886[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1bquznm[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--ctrl-token-Card-697, var(--semantic-token-Card-698, var(--strokeWidthThick))) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f15mxzhv{--fui-Card--border-radius:var(--ctrl-token-Card-701, var(--semantic-token-Card-702, var(--borderRadiusSmall)));}", ".frsmuga{--fui-Card--size:12px;}", ".fw2n66{--fui-Card--border-radius:var(--ctrl-token-Card-703, var(--semantic-token-Card-704, var(--borderRadiusMedium)));}", ".f1qua4xo{--fui-Card--size:16px;}", ".f18zjdj0{--fui-Card--border-radius:var(--ctrl-token-Card-705, var(--semantic-token-Card-706, var(--borderRadiusLarge)));}", ".f1y5ql7n{background-color:var(--ctrl-token-Card-707, var(--semantic-token-Card-708, var(--colorNeutralBackground1)));}", ".f1l2ude5{box-shadow:var(--ctrl-token-Card-709, var(--semantic-token-Card-710, var(--shadow4)));}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1k6fduh{cursor:pointer;}", ".fiekp45{background-color:var(--ctrl-token-Card-711, var(--semantic-token-Card-712, var(--colorNeutralBackground1)));}", ".f7rwcsy{box-shadow:var(--ctrl-token-Card-713, var(--semantic-token-Card-714, var(--shadow4)));}", ".f12vh31t{background-color:var(--ctrl-token-Card-721, var(--semantic-token-Card-722, var(--colorNeutralBackground1Selected)));}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f145rpb8{background-color:var(--ctrl-token-Card-725, var(--semantic-token-Card-726, var(--colorNeutralBackground2)));}", ".f1jrlzwb{box-shadow:var(--ctrl-token-Card-727, var(--semantic-token-Card-728, var(--shadow4)));}", ".f1kgqpjs{background-color:var(--ctrl-token-Card-729, var(--semantic-token-Card-730, var(--colorNeutralBackground2)));}", ".f1a2zne9{box-shadow:var(--ctrl-token-Card-731, var(--semantic-token-Card-732, var(--shadow4)));}", ".flecxhl{background-color:var(--ctrl-token-Card-739, var(--semantic-token-Card-740, var(--colorNeutralBackground2Selected)));}", ".f11a8mzo{background-color:var(--ctrl-token-Card-743, var(--semantic-token-Card-744, var(--colorTransparentBackground)));}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".f134r7n3{background-color:var(--ctrl-token-Card-745, var(--semantic-token-Card-746, var(--colorTransparentBackground)));}", ".f3jdprh{background-color:var(--ctrl-token-Card-751, var(--semantic-token-Card-752, var(--colorTransparentBackgroundSelected)));}", ".focdvv2{background-color:var(--ctrl-token-Card-755, var(--semantic-token-Card-756, var(--colorSubtleBackground)));}", ".f1rfvwxm{background-color:var(--ctrl-token-Card-757, var(--semantic-token-Card-758, var(--colorSubtleBackground)));}", ".f8hjf28{background-color:var(--ctrl-token-Card-763, var(--semantic-token-Card-764, var(--colorSubtleBackgroundSelected)));}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
320
+ }], ".f1wk50th[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".f10jz3mr[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".fc1dnuj[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".f10o2p02[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--697, var(--698, var(--strokeWidthThick))) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".fir8pkv{--fui-Card--border-radius:var(--701, var(--702, var(--borderRadiusSmall)));}", ".frsmuga{--fui-Card--size:12px;}", ".f1uqf95q{--fui-Card--border-radius:var(--703, var(--704, var(--borderRadiusMedium)));}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1u1hr7d{--fui-Card--border-radius:var(--705, var(--706, var(--borderRadiusLarge)));}", ".f1epqm3e .fui-Text{color:currentColor;}", ".fltf6vh{background-color:var(--707, var(--708, var(--colorNeutralBackground1)));}", ".fwitwng{box-shadow:var(--709, var(--710, var(--shadow4)));}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1k6fduh{cursor:pointer;}", ".f1h5vatx{background-color:var(--711, var(--712, var(--colorNeutralBackground1)));}", ".f1uxkkbl{box-shadow:var(--713, var(--714, var(--shadow4)));}", ".f1ksn0ep{background-color:var(--721, var(--722, var(--colorNeutralBackground1Selected)));}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".far5xx1{background-color:var(--725, var(--726, var(--colorNeutralBackground2)));}", ".fsznyw7{box-shadow:var(--727, var(--728, var(--shadow4)));}", ".f7smas5{background-color:var(--729, var(--730, var(--colorNeutralBackground2)));}", ".f1ubef17{box-shadow:var(--731, var(--732, var(--shadow4)));}", ".fufun8q{background-color:var(--739, var(--740, var(--colorNeutralBackground2Selected)));}", ".faq45x3{background-color:var(--743, var(--744, var(--colorTransparentBackground)));}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".f80i76d{background-color:var(--745, var(--746, var(--colorTransparentBackground)));}", ".f1l0mf4q{background-color:var(--751, var(--752, var(--colorTransparentBackgroundSelected)));}", ".fkapjeb{background-color:var(--755, var(--756, var(--colorSubtleBackground)));}", ".f51qof6{background-color:var(--757, var(--758, var(--colorSubtleBackground)));}", ".f998m3t{background-color:var(--763, var(--764, var(--colorSubtleBackgroundSelected)));}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
360
321
  p: -1
361
322
  }], ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
362
- f: [".ftqa4ok:focus{outline-style:none;}"],
363
- i: [".f2hkw1w:focus-visible{outline-style:none;}"],
364
323
  m: [["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
365
324
  m: "(forced-colors: active)"
366
325
  }], ["@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}", {
@@ -396,8 +355,8 @@ const useStyles = /*#__PURE__*/__styles({
396
355
  }], ["@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :active .fui-CardFooter{forced-color-adjust:auto;}}", {
397
356
  m: "(forced-colors: active)"
398
357
  }]],
399
- h: [".f9iybsv:hover{background-color:var(--ctrl-token-Card-715, var(--semantic-token-Card-716, var(--colorNeutralBackground1Hover)));}", ".f1b9qmj4:hover{box-shadow:var(--ctrl-token-Card-717, var(--semantic-token-Card-718, var(--shadow8)));}", ".fe4l7lm:hover{background-color:var(--ctrl-token-Card-723, var(--semantic-token-Card-724, var(--colorNeutralBackground1Selected)));}", ".fqm50rs:hover{background-color:var(--ctrl-token-Card-733, var(--semantic-token-Card-734, var(--colorNeutralBackground2Hover)));}", ".fq5fk87:hover{box-shadow:var(--ctrl-token-Card-735, var(--semantic-token-Card-736, var(--shadow8)));}", ".f1oin7as:hover{background-color:var(--ctrl-token-Card-741, var(--semantic-token-Card-742, var(--colorNeutralBackground2Selected)));}", ".frxoo8s:hover{background-color:var(--ctrl-token-Card-747, var(--semantic-token-Card-748, var(--colorTransparentBackgroundHover)));}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1tbkf9f:hover{background-color:var(--ctrl-token-Card-753, var(--semantic-token-Card-754, var(--colorTransparentBackgroundSelected)));}", ".f1cdzzdq:hover{background-color:var(--ctrl-token-Card-759, var(--semantic-token-Card-760, var(--colorSubtleBackgroundHover)));}", ".f241ven:hover{background-color:var(--ctrl-token-Card-765, var(--semantic-token-Card-766, var(--colorSubtleBackgroundSelected)));}"],
400
- a: [".fljdlzu:active{background-color:var(--ctrl-token-Card-719, var(--semantic-token-Card-720, var(--colorNeutralBackground1Pressed)));}", ".f15wjqsw:active{background-color:var(--ctrl-token-Card-737, var(--semantic-token-Card-738, var(--colorNeutralBackground2Pressed)));}", ".f1djjq2p:active{background-color:var(--ctrl-token-Card-749, var(--semantic-token-Card-750, var(--colorTransparentBackgroundPressed)));}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".fe89iq9:active{background-color:var(--ctrl-token-Card-761, var(--semantic-token-Card-762, var(--colorSubtleBackgroundPressed)));}"]
358
+ h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f7oweeb:hover{background-color:var(--715, var(--716, var(--colorNeutralBackground1Hover)));}", ".f18emohc:hover{box-shadow:var(--717, var(--718, var(--shadow8)));}", ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}", ".f1bwa2ac:hover{background-color:var(--723, var(--724, var(--colorNeutralBackground1Selected)));}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fzx3r4q:hover{background-color:var(--733, var(--734, var(--colorNeutralBackground2Hover)));}", ".fug60o5:hover{box-shadow:var(--735, var(--736, var(--shadow8)));}", ".frbale:hover{background-color:var(--741, var(--742, var(--colorNeutralBackground2Selected)));}", ".f1qzbeqf:hover{background-color:var(--747, var(--748, var(--colorTransparentBackgroundHover)));}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f12erfqo:hover{background-color:var(--753, var(--754, var(--colorTransparentBackgroundSelected)));}", ".fopo1yw:hover{background-color:var(--759, var(--760, var(--colorSubtleBackgroundHover)));}", ".fbohybn:hover{background-color:var(--765, var(--766, var(--colorSubtleBackgroundSelected)));}"],
359
+ a: [".fqbzxcg:active{background-color:var(--719, var(--720, var(--colorNeutralBackground1Pressed)));}", ".f1ha9751:active{background-color:var(--737, var(--738, var(--colorNeutralBackground2Pressed)));}", ".fny1dgt:active{background-color:var(--749, var(--750, var(--colorTransparentBackgroundPressed)));}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".ftzbayt:active{background-color:var(--761, var(--762, var(--colorSubtleBackgroundPressed)));}"]
401
360
  });
402
361
  /**
403
362
  * Apply styling to the Card slots based on the state.
@@ -405,7 +364,8 @@ const useStyles = /*#__PURE__*/__styles({
405
364
  export const useCardStyles_unstable = state => {
406
365
  'use no memo';
407
366
 
408
- const styles = useStyles();
367
+ const resetStyles = useCardResetStyles();
368
+ const styles = useCardStyles();
409
369
  const orientationMap = {
410
370
  horizontal: styles.orientationHorizontal,
411
371
  vertical: styles.orientationVertical
@@ -443,11 +403,7 @@ export const useCardStyles_unstable = state => {
443
403
  }
444
404
  return styles.focused;
445
405
  }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);
446
- state.root.className = mergeClasses(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance],
447
- // Focus overrides
448
- focusedClassName,
449
- // High contrast overrides
450
- isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
406
+ state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
451
407
  if (state.floatingAction) {
452
408
  state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
453
409
  }