@fluentui/react-card 9.0.87 → 9.0.89

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Tue, 23 Jul 2024 20:09:20 GMT and should not be manually modified.
+This log was last generated on Tue, 06 Aug 2024 21:39:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.89)
+
+Tue, 06 Aug 2024 21:39:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.88..@fluentui/react-card_v9.0.89)
+
+### Patches
+
+- 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)
+
+## [9.0.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.88)
+
+Tue, 30 Jul 2024 18:47:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.87..@fluentui/react-card_v9.0.88)
+
+### Patches
+
+- fix: improve hover for HC mode ([PR #31953](https://github.com/microsoft/fluentui/pull/31953) by marcosvmmoura@gmail.com)
+
 ## [9.0.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.87)
 
-Tue, 23 Jul 2024 20:09:20 GMT 
+Tue, 23 Jul 2024 20:13:14 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.86..@fluentui/react-card_v9.0.87)
 
 ### Patches

package/lib/components/Card/useCard.js

@@ -16,7 +16,7 @@ const focusMap = {
  * and control focus properties based on that.
  *
  * @param props - props from this instance of Card
- */ const useCardInteractive = ({ focusMode = 'off', ...props })=>{
+ */ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
     const interactive = [
         'onClick',
         'onDoubleClick',
@@ -29,8 +29,10 @@ const focusMap = {
         'onDragStart',
         'onDragEnd'
     ].some((prop)=>props[prop]);
+    // default focusMode to tab-only when interactive, and off when not
+    const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
     const groupperAttrs = useFocusableGroup({
-        tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
+        tabBehavior: focusMap[focusMode]
     });
     const interactiveFocusAttributes = {
         ...groupperAttrs,
@@ -38,7 +40,7 @@ const focusMap = {
     };
     return {
         interactive,
-        focusAttributes: !interactive && focusMode === 'off' ? null : interactiveFocusAttributes
+        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
     };
 };
 /**

package/lib/components/Card/useCard.js.map

@@ -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"}
+{"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"}

package/lib/components/Card/useCardStyles.styles.js

@@ -1,10 +1,11 @@
-import { shorthands, __styles, mergeClasses } from '@griffel/react';
+import * as React from 'react';
+import { shorthands, __styles, mergeClasses, __resetStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import { textClassNames } from '@fluentui/react-text';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
 import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
 import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
-import * as React from 'react';
 /**
  * Static CSS class names used internally for the component slots.
  */
@@ -25,50 +26,8 @@ const focusOutlineStyle = {
   outlineWidth: tokens.strokeWidthThick,
   outlineOffset: '-2px'
 };
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    B68tc82: 0,
-    Bmxbyg5: 0,
-    Bpg54ce: "f1a3p1vp",
-    Beyfa6y: 0,
-    Bbmb7ep: 0,
-    Btl43ni: 0,
-    B7oj6ja: 0,
-    Dimara: "flpxrij",
-    Byoj8tv: 0,
-    uwmqm3: 0,
-    z189sj: 0,
-    z8tnut: 0,
-    B0ocmuz: "fi54ll6",
-    i8kkvl: 0,
-    Belr9w4: 0,
-    rmohyg: "fs0zar4",
-    mc9l5x: "f22iagw",
-    qhf8xq: "f10pi13n",
-    B7ck84d: "f1ewtqcl",
-    sj55zd: "f19n0e5",
-    E3zdtr: "f1mdlcz9",
-    bn5sak: "frwkxtg",
-    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
-    B1piin3: ["f15yvnhg", "f1n6gb5g"],
-    By385i5: "fo72kxq",
-    Bsft5z2: "f13zj6fq",
-    B80jsxd: "f1nwj1ja",
-    Bm2nyyq: "f8rth92",
-    Barhvk9: ["flthirb", "ftkbnf5"],
-    Bw17bha: "f1lh990p",
-    vfts7: ["ftkbnf5", "flthirb"],
-    xrcqlc: "f6czdpx",
-    Ihftqj: ["f13hvwk3", "f1en4csx"],
-    Bcgy8vk: "f1i1u9k0",
-    Bhxzhr1: ["f1en4csx", "f13hvwk3"],
-    d9w3h3: 0,
-    B3778ie: 0,
-    B4j8arr: 0,
-    Bl18szs: 0,
-    Blrzh8d: "fw3u9gn",
-    Bwr1qzv: "fnk4z59"
-  },
+const useCardResetStyles = /*#__PURE__*/__resetStyles("rfxo2k2", "rgle7w9", [".rfxo2k2{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(--colorNeutralForeground1);}", ".rfxo2k2::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);}", ".rfxo2k2>.fui-CardHeader,.rfxo2k2>.fui-CardFooter{flex-shrink:0;}", ".rgle7w9{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(--colorNeutralForeground1);}", ".rgle7w9::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);}", ".rgle7w9>.fui-CardHeader,.rgle7w9>.fui-CardFooter{flex-shrink:0;}"]);
+const useCardStyles = /*#__PURE__*/__styles({
   focused: {
     Brovlpu: "ftqa4ok",
     B486eqv: "f2hkw1w",
@@ -182,6 +141,9 @@ const useStyles = /*#__PURE__*/__styles({
     B7balbw: "f1qua4xo",
     B1h88n7: "fimkt6v"
   },
+  interactive: {
+    rhjd8f: "f1epqm3e"
+  },
   filled: {
     De3pzq: "fxugw4r",
     E5pizo: "f1whvlc6",
@@ -198,6 +160,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fpgykix", "fzybk4o"],
     B1q35kw: "f1osi826",
     Gp14am: ["fzybk4o", "fpgykix"],
+    Bi91k9c: "feu1g3u",
     Jwef8y: "f1knas48",
     Bvxd0ez: "f1m145df",
     ecr2s2: "fb40n2d"
@@ -208,6 +171,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fa2okxs", "fg4zq3l"],
     B1q35kw: "ff6932p",
     Gp14am: ["fg4zq3l", "fa2okxs"],
+    Bi91k9c: "fx9teim",
     Jwef8y: "f1kz6goq"
   },
   filledAlternative: {
@@ -226,6 +190,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fpgykix", "fzybk4o"],
     B1q35kw: "f1osi826",
     Gp14am: ["fzybk4o", "fpgykix"],
+    Bi91k9c: "fnwyq0v",
     Jwef8y: "f1uvynv3",
     Bvxd0ez: "f1m145df",
     ecr2s2: "f1yhgkbh"
@@ -236,6 +201,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fa2okxs", "fg4zq3l"],
     B1q35kw: "ff6932p",
     Gp14am: ["fg4zq3l", "fa2okxs"],
+    Bi91k9c: "f1luvkty",
     Jwef8y: "fehi0vp"
   },
   outline: {
@@ -254,6 +220,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["f1g4150c", "f192dr6e"],
     B1q35kw: "f1qnawh6",
     Gp14am: ["f192dr6e", "f1g4150c"],
+    Bi91k9c: "feu1g3u",
     Jwef8y: "fjxutwb",
     Be0v6ae: "f1llr77y",
     B5kxglz: ["fzk0khw", "fjj8tog"],
@@ -271,6 +238,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fa2okxs", "fg4zq3l"],
     B1q35kw: "ff6932p",
     Gp14am: ["fg4zq3l", "fa2okxs"],
+    Bi91k9c: "fx9teim",
     Jwef8y: "fg59vm4"
   },
   subtle: {
@@ -289,6 +257,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fpgykix", "fzybk4o"],
     B1q35kw: "f1osi826",
     Gp14am: ["fzybk4o", "fpgykix"],
+    Bi91k9c: "feu1g3u",
     Jwef8y: "f1t94bn6",
     ecr2s2: "f1wfn5kd"
   },
@@ -298,6 +267,7 @@ const useStyles = /*#__PURE__*/__styles({
     s924m2: ["fa2okxs", "fg4zq3l"],
     B1q35kw: "ff6932p",
     Gp14am: ["fg4zq3l", "fa2okxs"],
+    Bi91k9c: "fx9teim",
     Jwef8y: "f1uqaxdt"
   },
   highContrastSelected: {
@@ -338,17 +308,9 @@ const useStyles = /*#__PURE__*/__styles({
     Huce71: "fz5stix"
   }
 }, {
-  d: [[".f1a3p1vp{overflow:hidden;}", {
-    p: -1
-  }], [".flpxrij{border-radius:var(--fui-Card--border-radius);}", {
-    p: -1
-  }], [".fi54ll6{padding:var(--fui-Card--size);}", {
-    p: -1
-  }], [".fs0zar4{gap:var(--fui-Card--size);}", {
-    p: -1
-  }], ".f22iagw{display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color: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);}", {
-    p: -1
-  }], ".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;}", [".fpqizxz[data-fui-focus-visible]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
+  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;}", [".fpqizxz[data-fui-focus-visible]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
     p: -2
   }], [".fnd8nzh[data-fui-focus-visible]::after{border-radius:var(--fui-Card--border-radius);}", {
     p: -1
@@ -356,11 +318,9 @@ const useStyles = /*#__PURE__*/__styles({
     p: -2
   }], [".f1nh8hsq[data-fui-focus-within]:focus-within::after{border-radius:var(--fui-Card--border-radius);}", {
     p: -1
-  }], ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 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;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow: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;}", ".f1nfm20t{background-color: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);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".f1c21dwh{background-color: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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
+  }], ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - 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;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".f1epqm3e .fui-Text{color:currentColor;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow: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;}", ".f1nfm20t{background-color: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);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".f1c21dwh{background-color: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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
   }], ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
-  f: [".ftqa4ok:focus{outline-style:none;}"],
-  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   m: [["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@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,7 +356,7 @@ const useStyles = /*#__PURE__*/__styles({
   }], ["@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :active .fui-CardFooter{forced-color-adjust:auto;}}", {
     m: "(forced-colors: active)"
   }]],
-  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".fjxutwb:hover{background-color: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);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".fjxutwb:hover{background-color: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);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
   a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color: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);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
@@ -405,7 +365,8 @@ const useStyles = /*#__PURE__*/__styles({
 export const useCardStyles_unstable = state => {
   'use no memo';
 
-  const styles = useStyles();
+  const resetStyles = useCardResetStyles();
+  const styles = useCardStyles();
   const orientationMap = {
     horizontal: styles.orientationHorizontal,
     vertical: styles.orientationVertical
@@ -443,11 +404,7 @@ export const useCardStyles_unstable = state => {
     }
     return styles.focused;
   }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);
-  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],
-  // Focus overrides
-  focusedClassName,
-  // High contrast overrides
-  isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
+  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);
   if (state.floatingAction) {
     state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
   }

package/lib/components/Card/useCardStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["shorthands","__styles","mergeClasses","tokens","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","React","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useStyles","B68tc82","Bmxbyg5","Bpg54ce","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bwr1qzv","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","d","p","f","i","m","h","a","useCardStyles_unstable","state","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","interactive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport * as React from 'react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useStyles = makeStyles({\n    root: {\n        overflow: 'hidden',\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n        padding: `var(${cardCSSVars.cardSizeVar})`,\n        gap: `var(${cardCSSVars.cardSizeVar})`,\n        display: 'flex',\n        position: 'relative',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        // Border setting using after pseudo element to allow CardPreview to render behind it.\n        '::after': {\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            content: '\"\"',\n            pointerEvents: 'none',\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(tokens.strokeWidthThin),\n            borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n        },\n        // Prevents CardHeader and CardFooter from shrinking.\n        [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n            flexShrink: 0\n        }\n    },\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // Remove vertical padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\n        // Remove lateral padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: 1\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = state.interactive || state.selectable;\n    const focusedClassName = React.useMemo(()=>{\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    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], // Focus overrides\n    focusedClassName, // High contrast overrides\n    isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);\n    if (state.floatingAction) {\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n    overflow: 'hidden',\n    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    padding: `var(${cardCSSVars.cardSizeVar})`,\n    gap: `var(${cardCSSVars.cardSizeVar})`,\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    // Border setting using after pseudo element to allow CardPreview to render behind it.\n    '::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        content: '\"\"',\n        pointerEvents: 'none',\n        ...shorthands.borderStyle('solid'),\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n    },\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n        flexShrink: 0\n    }\n});\nconst useCardStyles = makeStyles({\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // Remove vertical padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\n        // Remove lateral padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    interactive: {\n        [`& .${textClassNames.root}`]: {\n            color: 'currentColor'\n        }\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Selected,\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: 1\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useCardResetStyles();\n    const styles = useCardStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = state.interactive || state.selectable;\n    const focusedClassName = React.useMemo(()=>{\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    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);\n    if (state.floatingAction) {\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib-commonjs/components/Card/useCard.js

@@ -27,7 +27,7 @@ const focusMap = {
  * and control focus properties based on that.
  *
  * @param props - props from this instance of Card
- */ const useCardInteractive = ({ focusMode = 'off', ...props })=>{
+ */ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
     const interactive = [
         'onClick',
         'onDoubleClick',
@@ -40,8 +40,10 @@ const focusMap = {
         'onDragStart',
         'onDragEnd'
     ].some((prop)=>props[prop]);
+    // default focusMode to tab-only when interactive, and off when not
+    const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
     const groupperAttrs = (0, _reacttabster.useFocusableGroup)({
-        tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
+        tabBehavior: focusMap[focusMode]
     });
     const interactiveFocusAttributes = {
         ...groupperAttrs,
@@ -49,7 +51,7 @@ const focusMap = {
     };
     return {
         interactive,
-        focusAttributes: !interactive && focusMode === 'off' ? null : interactiveFocusAttributes
+        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
     };
 };
 const useCard_unstable = (props, ref)=>{

package/lib-commonjs/components/Card/useCard.js.map

@@ -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":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+DaA;;;eAAAA;;;;iEA/DU;gCACuC;8BACZ;mCAGhB;6BACM;AAExC,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;QAEhB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,MAAMC,gBAAgBC,IAAAA,+BAAAA,EAAkB;QACtCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,UAAU;IAC3D;IAEA,MAAMQ,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IAEA,OAAO;QACLP;QACAQ,iBAAiB,CAACR,eAAeF,cAAc,QAAQ,OAAOQ;IAChE;AACF;AAWO,MAAMb,mBAAmB,CAACM,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAAA,CAAwBC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAAA,CAAwBC,mBAAmB,CAACL,WAAW;IAElH,MAAMQ,cAAcC,IAAAA,4BAAAA;IACpB,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGC,IAAAA,oCAAAA,EAAkB9B,OAAO;QAAEc;QAAaM;IAAe,GAAGE;IAE5D,MAAMS,UAAUC,IAAAA,6BAAAA,EAAcV,aAAaZ;IAE3C,MAAM,EAAET,WAAW,EAAEQ,eAAe,EAAE,GAAGX,mBAAmBE;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QAEAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B7B,KAAKqB;YACLS,MAAM;YACN,GAAI,CAAChB,aAAaf,kBAAkB,IAAI;YACxC,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB,IACA;YAAEe,aAAa;QAAM;QAGvBN,gBAAgBN;QAChBO,UAAUR;IACZ;AACF"}
+{"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":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","initialFocusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkEaA;;;eAAAA;;;;iEAlEU;gCACuC;8BACZ;mCAGhB;6BACM;AAExC,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;QAEhB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,mEAAmE;IACnE,MAAML,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAqBE,cAAc,WAAW;IAEhE,MAAMG,gBAAgBC,IAAAA,+BAAAA,EAAkB;QACtCC,aAAaZ,QAAQ,CAACI,UAAU;IAClC;IAEA,MAAMS,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IAEA,OAAO;QACLP;QACAQ,iBAAiBX,cAAc,QAAQ,OAAOS;IAChD;AACF;AAWO,MAAMd,mBAAmB,CAACO,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAAA,CAAwBC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAAA,CAAwBC,mBAAmB,CAACL,WAAW;IAElH,MAAMQ,cAAcC,IAAAA,4BAAAA;IACpB,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGC,IAAAA,oCAAAA,EAAkB9B,OAAO;QAAEc;QAAaM;IAAe,GAAGE;IAE5D,MAAMS,UAAUC,IAAAA,6BAAAA,EAAcV,aAAaZ;IAE3C,MAAM,EAAET,WAAW,EAAEQ,eAAe,EAAE,GAAGZ,mBAAmBG;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QAEAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B7B,KAAKqB;YACLS,MAAM;YACN,GAAI,CAAChB,aAAaf,kBAAkB,IAAI;YACxC,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB,IACA;YAAEe,aAAa;QAAM;QAGvBN,gBAAgBN;QAChBO,UAAUR;IACZ;AACF"}

package/lib-commonjs/components/Card/useCardStyles.styles.js

@@ -20,9 +20,9 @@ _export(exports, {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = require("@griffel/react");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
-const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const cardClassNames = {
     root: 'fui-Card',
     floatingAction: 'fui-Card__floatingAction',
@@ -37,68 +37,15 @@ const focusOutlineStyle = {
     outlineWidth: _reacttheme.tokens.strokeWidthThick,
     outlineOffset: '-2px'
 };
-const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        B68tc82: 0,
-        Bmxbyg5: 0,
-        Bpg54ce: "f1a3p1vp",
-        Beyfa6y: 0,
-        Bbmb7ep: 0,
-        Btl43ni: 0,
-        B7oj6ja: 0,
-        Dimara: "flpxrij",
-        Byoj8tv: 0,
-        uwmqm3: 0,
-        z189sj: 0,
-        z8tnut: 0,
-        B0ocmuz: "fi54ll6",
-        i8kkvl: 0,
-        Belr9w4: 0,
-        rmohyg: "fs0zar4",
-        mc9l5x: "f22iagw",
-        qhf8xq: "f10pi13n",
-        B7ck84d: "f1ewtqcl",
-        sj55zd: "f19n0e5",
-        E3zdtr: "f1mdlcz9",
-        bn5sak: "frwkxtg",
-        Eqx8gd: [
-            "f1n6gb5g",
-            "f15yvnhg"
-        ],
-        B1piin3: [
-            "f15yvnhg",
-            "f1n6gb5g"
-        ],
-        By385i5: "fo72kxq",
-        Bsft5z2: "f13zj6fq",
-        B80jsxd: "f1nwj1ja",
-        Bm2nyyq: "f8rth92",
-        Barhvk9: [
-            "flthirb",
-            "ftkbnf5"
-        ],
-        Bw17bha: "f1lh990p",
-        vfts7: [
-            "ftkbnf5",
-            "flthirb"
-        ],
-        xrcqlc: "f6czdpx",
-        Ihftqj: [
-            "f13hvwk3",
-            "f1en4csx"
-        ],
-        Bcgy8vk: "f1i1u9k0",
-        Bhxzhr1: [
-            "f1en4csx",
-            "f13hvwk3"
-        ],
-        d9w3h3: 0,
-        B3778ie: 0,
-        B4j8arr: 0,
-        Bl18szs: 0,
-        Blrzh8d: "fw3u9gn",
-        Bwr1qzv: "fnk4z59"
-    },
+const useCardResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("rfxo2k2", "rgle7w9", [
+    ".rfxo2k2{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(--colorNeutralForeground1);}",
+    ".rfxo2k2::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);}",
+    ".rfxo2k2>.fui-CardHeader,.rfxo2k2>.fui-CardFooter{flex-shrink:0;}",
+    ".rgle7w9{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(--colorNeutralForeground1);}",
+    ".rgle7w9::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);}",
+    ".rgle7w9>.fui-CardHeader,.rgle7w9>.fui-CardFooter{flex-shrink:0;}"
+]);
+const useCardStyles = /*#__PURE__*/ (0, _react1.__styles)({
     focused: {
         Brovlpu: "ftqa4ok",
         B486eqv: "f2hkw1w",
@@ -260,6 +207,9 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         B7balbw: "f1qua4xo",
         B1h88n7: "fimkt6v"
     },
+    interactive: {
+        rhjd8f: "f1epqm3e"
+    },
     filled: {
         De3pzq: "fxugw4r",
         E5pizo: "f1whvlc6",
@@ -288,6 +238,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fzybk4o",
             "fpgykix"
         ],
+        Bi91k9c: "feu1g3u",
         Jwef8y: "f1knas48",
         Bvxd0ez: "f1m145df",
         ecr2s2: "fb40n2d"
@@ -304,6 +255,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fg4zq3l",
             "fa2okxs"
         ],
+        Bi91k9c: "fx9teim",
         Jwef8y: "f1kz6goq"
     },
     filledAlternative: {
@@ -334,6 +286,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fzybk4o",
             "fpgykix"
         ],
+        Bi91k9c: "fnwyq0v",
         Jwef8y: "f1uvynv3",
         Bvxd0ez: "f1m145df",
         ecr2s2: "f1yhgkbh"
@@ -350,6 +303,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fg4zq3l",
             "fa2okxs"
         ],
+        Bi91k9c: "f1luvkty",
         Jwef8y: "fehi0vp"
     },
     outline: {
@@ -380,6 +334,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "f192dr6e",
             "f1g4150c"
         ],
+        Bi91k9c: "feu1g3u",
         Jwef8y: "fjxutwb",
         Be0v6ae: "f1llr77y",
         B5kxglz: [
@@ -415,6 +370,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fg4zq3l",
             "fa2okxs"
         ],
+        Bi91k9c: "fx9teim",
         Jwef8y: "fg59vm4"
     },
     subtle: {
@@ -445,6 +401,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fzybk4o",
             "fpgykix"
         ],
+        Bi91k9c: "feu1g3u",
         Jwef8y: "f1t94bn6",
         ecr2s2: "f1wfn5kd"
     },
@@ -460,6 +417,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fg4zq3l",
             "fa2okxs"
         ],
+        Bi91k9c: "fx9teim",
         Jwef8y: "f1uqaxdt"
     },
     highContrastSelected: {
@@ -515,57 +473,13 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Huce71: "fz5stix"
     }
 }, {
+    f: [
+        ".ftqa4ok:focus{outline-style:none;}"
+    ],
+    i: [
+        ".f2hkw1w:focus-visible{outline-style:none;}"
+    ],
     d: [
-        [
-            ".f1a3p1vp{overflow:hidden;}",
-            {
-                p: -1
-            }
-        ],
-        [
-            ".flpxrij{border-radius:var(--fui-Card--border-radius);}",
-            {
-                p: -1
-            }
-        ],
-        [
-            ".fi54ll6{padding:var(--fui-Card--size);}",
-            {
-                p: -1
-            }
-        ],
-        [
-            ".fs0zar4{gap:var(--fui-Card--size);}",
-            {
-                p: -1
-            }
-        ],
-        ".f22iagw{display:flex;}",
-        ".f10pi13n{position:relative;}",
-        ".f1ewtqcl{box-sizing:border-box;}",
-        ".f19n0e5{color: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);}",
-            {
-                p: -1
-            }
-        ],
-        ".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;}",
@@ -635,6 +549,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}",
         ".f1qua4xo{--fui-Card--size:16px;}",
         ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}",
+        ".f1epqm3e .fui-Text{color:currentColor;}",
         ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         ".f1whvlc6{box-shadow:var(--shadow4);}",
         ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}",
@@ -675,12 +590,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1wch0ki{clip-path:inset(50%);}",
         ".fz5stix{white-space:nowrap;}"
     ],
-    f: [
-        ".ftqa4ok:focus{outline-style:none;}"
-    ],
-    i: [
-        ".f2hkw1w:focus-visible{outline-style:none;}"
-    ],
     m: [
         [
             "@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}",
@@ -786,10 +695,14 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ]
     ],
     h: [
+        ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
         ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
         ".f1m145df:hover{box-shadow:var(--shadow8);}",
+        ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}",
         ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}",
+        ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
         ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}",
+        ".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}",
         ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}",
         ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}",
         ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}",
@@ -813,7 +726,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 });
 const useCardStyles_unstable = (state)=>{
     'use no memo';
-    const styles = useStyles();
+    const resetStyles = useCardResetStyles();
+    const styles = useCardStyles();
     const orientationMap = {
         horizontal: styles.orientationHorizontal,
         vertical: styles.orientationVertical
@@ -842,7 +756,7 @@ const useCardStyles_unstable = (state)=>{
         subtle: styles.subtleInteractive
     };
     const isSelectableOrInteractive = state.interactive || state.selectable;
-    const focusedClassName = _react1.useMemo(()=>{
+    const focusedClassName = _react.useMemo(()=>{
         if (state.selectable) {
             if (state.selectFocused) {
                 return styles.selectableFocused;
@@ -856,14 +770,12 @@ const useCardStyles_unstable = (state)=>{
         styles.focused,
         styles.selectableFocused
     ]);
-    state.root.className = (0, _react.mergeClasses)(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], // Focus overrides
-    focusedClassName, // High contrast overrides
-    isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
+    state.root.className = (0, _react1.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);
     if (state.floatingAction) {
-        state.floatingAction.className = (0, _react.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
+        state.floatingAction.className = (0, _react1.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
     }
     if (state.checkbox) {
-        state.checkbox.className = (0, _react.mergeClasses)(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
+        state.checkbox.className = (0, _react1.mergeClasses)(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
     }
     return state;
 }; //# sourceMappingURL=useCardStyles.styles.js.map

package/lib-commonjs/components/Card/useCardStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport * as React from 'react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useStyles = makeStyles({\n    root: {\n        overflow: 'hidden',\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n        padding: `var(${cardCSSVars.cardSizeVar})`,\n        gap: `var(${cardCSSVars.cardSizeVar})`,\n        display: 'flex',\n        position: 'relative',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        // Border setting using after pseudo element to allow CardPreview to render behind it.\n        '::after': {\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            content: '\"\"',\n            pointerEvents: 'none',\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(tokens.strokeWidthThin),\n            borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n        },\n        // Prevents CardHeader and CardFooter from shrinking.\n        [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n            flexShrink: 0\n        }\n    },\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // Remove vertical padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\n        // Remove lateral padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: 1\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = state.interactive || state.selectable;\n    const focusedClassName = React.useMemo(()=>{\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    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], // Focus overrides\n    focusedClassName, // High contrast overrides\n    isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);\n    if (state.floatingAction) {\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"names":["cardCSSVars","cardClassNames","useCardStyles_unstable","root","floatingAction","checkbox","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","tokens","strokeWidthThick","outlineOffset","useStyles","__styles","B68tc82","Bmxbyg5","Bpg54ce","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bwr1qzv","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","d","p","f","i","m","h","a","state","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","interactive","selectable","focusedClassName","React","useMemo","selectFocused","className","mergeClasses","orientation","size","appearance","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBiBA,WAAW;eAAXA;;IAPAC,cAAc;eAAdA;;IAgSAC,sBAAsB;eAAtBA;;;;uBAzSoC;4BAC9B;kEAKA;AAGZ,MAAMD,iBAAiB;IAC9BE,MAAM;IACNC,gBAAgB;IAChBC,UAAU;AACd;AAGW,MAAML,cAAc;IAC3BM,aAAa;IACbC,qBAAqB;AACzB;AACA,MAAMC,oBAAoB;IACtBC,eAAe,CAAA,IAAA,EAAOT,YAAYO,mBAAmB,CAAA,CAAA,CAAG;IACxDG,cAAcC,kBAAM,CAACC,gBAAgB;IACrCC,eAAe;AACnB;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAZ,MAAA;QAAAa,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,OAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,OAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,mBAAA;QAAAxC,SAAA;QAAAC,SAAA;QAAAwC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,OAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,OAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,OAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,uBAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;IAAAC,qBAAA;QAAAP,SAAA;QAAAQ,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,WAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,YAAA;QAAAF,SAAA;QAAAC,SAAA;IAAA;IAAAE,WAAA;QAAAH,SAAA;QAAAC,SAAA;IAAA;IAAAG,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,mBAAA;QAAAC,SAAA;QAAAP,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,2BAAA;QAAAX,QAAA;QAAAE,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;IAAA;IAAAI,mBAAA;QAAAZ,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAQ,8BAAA;QAAAN,SAAA;QAAAP,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAI,sCAAA;QAAAd,QAAA;QAAAE,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;IAAA;IAAAO,SAAA;QAAAf,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAW,oBAAA;QAAAT,SAAA;QAAAP,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;QAAAS,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAV,QAAA;QAAAW,MAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,4BAAA;QAAAzB,QAAA;QAAAE,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;IAAA;IAAAkB,QAAA;QAAA1B,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAsB,mBAAA;QAAApB,SAAA;QAAAP,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;QAAAE,QAAA;IAAA;IAAAkB,2BAAA;QAAA5B,QAAA;QAAAE,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,QAAA;IAAA;IAAAqB,sBAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,yBAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAR,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,QAAA;QAAAvK,QAAA;QAAAwK,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;IAAA;IAAAC,gBAAA;QAAA5L,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAA2L,QAAA;QAAAC,SAAA;QAAA7K,QAAA;QAAA8K,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAgRP,MAAMtN,yBAA0BuN,CAAAA;IACvC;IACA,MAAMC,SAAS5M;IACf,MAAM6M,iBAAiB;QACnBC,YAAYF,OAAOjF,qBAAqB;QACxCoF,UAAUH,OAAOzE,mBAAAA;IACrB;IACA,MAAM6E,UAAU;QACZC,OAAOL,OAAOnE,SAAS;QACvByE,QAAQN,OAAOhE,UAAU;QACzBuE,OAAOP,OAAO/D,SAAAA;IAClB;IACA,MAAMuE,gBAAgB;QAClBtE,QAAQ8D,OAAO9D,MAAM;QACrB,sBAAsB8D,OAAOjD,iBAAiB;QAC9CG,SAAS8C,OAAO9C,OAAO;QACvBW,QAAQmC,OAAOnC,MAAAA;IACnB;IACA,MAAM4C,cAAc;QAChBvE,QAAQ8D,OAAOlD,yBAAyB;QACxC,sBAAsBkD,OAAO/C,oCAAoC;QACjEC,SAAS8C,OAAOpC,0BAA0B;QAC1CC,QAAQmC,OAAOjC,yBAAAA;IACnB;IACA,MAAM2C,iBAAiB;QACnBxE,QAAQ8D,OAAOvD,iBAAiB;QAChC,sBAAsBuD,OAAOhD,4BAA4B;QACzDE,SAAS8C,OAAO7C,kBAAkB;QAClCU,QAAQmC,OAAOlC,iBAAAA;IACnB;IACA,MAAM6C,4BAA4BZ,MAAMa,WAAW,IAAIb,MAAMc,UAAU;IACvE,MAAMC,mBAAmBC,QAAMC,OAAO,CAAC;QACnC,IAAIjB,MAAMc,UAAU,EAAE;YAClB,IAAId,MAAMkB,aAAa,EAAE;gBACrB,OAAOjB,OAAOxH,iBAAiB;YACnC;YACA,OAAO;QACX;QACA,OAAOwH,OAAOjK,OAAO;IACzB,GAAG;QACCgK,MAAMkB,aAAa;QACnBlB,MAAMc,UAAU;QAChBb,OAAOjK,OAAO;QACdiK,OAAOxH,iBAAiB;KAC3B;IACDuH,MAAMtN,IAAI,CAACyO,SAAS,GAAGC,IAAAA,mBAAY,EAAC5O,eAAeE,IAAI,EAAEuN,OAAOvN,IAAI,EAAEwN,cAAc,CAACF,MAAMqB,WAAW,CAAC,EAAEhB,OAAO,CAACL,MAAMsB,IAAI,CAAC,EAAEb,aAAa,CAACT,MAAMuB,UAAU,CAAC,EAAEX,6BAA6BD,cAAc,CAACX,MAAMuB,UAAU,CAAC,EAAEvB,MAAMwB,QAAQ,IAAId,WAAW,CAACV,MAAMuB,UAAU,CAAC,EAAE,kBAAA;IAC/QR,kBAAkB,0BAAA;IAClBH,6BAA6BX,OAAOvB,uBAAuB,EAAEsB,MAAMwB,QAAQ,IAAIvB,OAAOhC,oBAAoB,EAAE+B,MAAMtN,IAAI,CAACyO,SAAS;IAChI,IAAInB,MAAMrN,cAAc,EAAE;QACtBqN,MAAMrN,cAAc,CAACwO,SAAS,GAAGC,IAAAA,mBAAY,EAAC5O,eAAeG,cAAc,EAAEsN,OAAOlB,MAAM,EAAEiB,MAAMrN,cAAc,CAACwO,SAAS;IAC9H;IACA,IAAInB,MAAMpN,QAAQ,EAAE;QAChBoN,MAAMpN,QAAQ,CAACuO,SAAS,GAAGC,IAAAA,mBAAY,EAAC5O,eAAeI,QAAQ,EAAEqN,OAAOd,cAAc,EAAEa,MAAMpN,QAAQ,CAACuO,SAAS;IACpH;IACA,OAAOnB;AACX"}
+{"version":3,"sources":["useCardStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n    overflow: 'hidden',\n    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    padding: `var(${cardCSSVars.cardSizeVar})`,\n    gap: `var(${cardCSSVars.cardSizeVar})`,\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    // Border setting using after pseudo element to allow CardPreview to render behind it.\n    '::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        content: '\"\"',\n        pointerEvents: 'none',\n        ...shorthands.borderStyle('solid'),\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n    },\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n        flexShrink: 0\n    }\n});\nconst useCardStyles = makeStyles({\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // Remove vertical padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\n        // Remove lateral padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    interactive: {\n        [`& .${textClassNames.root}`]: {\n            color: 'currentColor'\n        }\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Selected,\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: 1\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useCardResetStyles();\n    const styles = useCardStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = state.interactive || state.selectable;\n    const focusedClassName = React.useMemo(()=>{\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    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);\n    if (state.floatingAction) {\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"names":["cardCSSVars","cardClassNames","useCardStyles_unstable","root","floatingAction","checkbox","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","tokens","strokeWidthThick","outlineOffset","useCardResetStyles","__resetStyles","useCardStyles","__styles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","Bm3wd5j","Bbrhkcr","f1oku","aywvf2","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","f","i","d","p","m","h","a","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","React","useMemo","selectFocused","className","mergeClasses","orientation","size","appearance","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.0.87",
+  "version": "9.0.89",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -28,21 +28,22 @@
     "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
-    "@fluentui/react-provider": "*",
-    "@fluentui/react-button": "*",
     "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-button": "*",
     "@fluentui/react-conformance-griffel": "*",
     "@fluentui/react-conformance": "*",
+    "@fluentui/react-provider": "*",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
+    "@fluentui/react-jsx-runtime": "^9.0.42",
     "@fluentui/react-tabster": "^9.22.3",
+    "@fluentui/react-text": "^9.4.23",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.13",
-    "@fluentui/react-jsx-runtime": "^9.0.42",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },