@fluentui/react-card 9.0.26 → 9.0.28

package/CHANGELOG.json

@@ -2,7 +2,73 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:25 GMT",
+      "date": "Fri, 11 Aug 2023 12:10:20 GMT",
+      "tag": "@fluentui/react-card_v9.0.28",
+      "version": "9.0.28",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.12.2",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.11.1",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 09 Aug 2023 13:16:52 GMT",
+      "tag": "@fluentui/react-card_v9.0.27",
+      "version": "9.0.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "d5ece238df797e84a59affc6162b0fa5cc46649d",
+            "comment": "chore(cxe-prg): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:58 GMT",
       "tag": "@fluentui/react-card_v9.0.26",
       "version": "9.0.26",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Fri, 04 Aug 2023 08:48:25 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Aug 2023 12:10:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.28)
+
+Fri, 11 Aug 2023 12:10:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.27..@fluentui/react-card_v9.0.28)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.12.2 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-utilities to v9.11.1 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+
+## [9.0.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.27)
+
+Wed, 09 Aug 2023 13:16:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.26..@fluentui/react-card_v9.0.27)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(cxe-prg): migrate to new slot API ([PR #28752](https://github.com/microsoft/fluentui/pull/28752) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-tabster to v9.12.1 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+
 ## [9.0.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.26)
 
-Fri, 04 Aug 2023 08:48:25 GMT 
+Fri, 04 Aug 2023 08:52:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.25..@fluentui/react-card_v9.0.26)
 
 ### Patches

package/lib/components/Card/renderCard.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { CardProvider } from './CardContext';
 /**
  * Render the final JSX of Card.
  */ export const renderCard_unstable = (state, cardContextValue)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(CardProvider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(CardProvider, {
         value: cardContextValue
-    }, slots.checkbox ? /*#__PURE__*/ createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));
+    }, state.checkbox ? /*#__PURE__*/ createElement(state.checkbox, null) : null, state.floatingAction ? /*#__PURE__*/ createElement(state.floatingAction, null) : null, state.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCard.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  const { slots, slotProps } = getSlotsNext<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <CardProvider value={cardContextValue}>\n        {slots.checkbox ? <slots.checkbox {...slotProps.checkbox} /> : null}\n        {slots.floatingAction ? <slots.floatingAction {...slotProps.floatingAction} /> : null}\n        {slotProps.root.children}\n      </CardProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","CardProvider","renderCard_unstable","state","cardContextValue","slots","slotProps","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,mBAAuC;IAC3F,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAwBG;IAErD,qBACE,AAfJ,cAeKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAhBN,cAgBON;QAAaO,OAAOJ;OAClBC,MAAMI,QAAQ,iBAAG,AAjB1B,cAiB2BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,IAAO,IAAI,EAClEJ,MAAMK,cAAc,iBAAG,AAlBhC,cAkBiCL,MAAMK,cAAc,EAAKJ,UAAUI,cAAc,IAAO,IAAI,EACpFJ,UAAUC,IAAI,CAACI,QAAQ;AAIhC,EAAE"}
+{"version":3,"sources":["renderCard.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  assertSlots<CardSlots>(state);\n\n  return (\n    <state.root>\n      <CardProvider value={cardContextValue}>\n        {state.checkbox ? <state.checkbox /> : null}\n        {state.floatingAction ? <state.floatingAction /> : null}\n        {state.root.children}\n      </CardProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,mBAAuC;IAC3FJ,YAAuBG;IAEvB,qBACE,AAfJ,cAeKA,MAAME,IAAI,sBACT,AAhBN,cAgBOJ;QAAaK,OAAOF;OAClBD,MAAMI,QAAQ,iBAAG,AAjB1B,cAiB2BJ,MAAMI,QAAQ,UAAM,IAAI,EAC1CJ,MAAMK,cAAc,iBAAG,AAlBhC,cAkBiCL,MAAMK,cAAc,UAAM,IAAI,EACtDL,MAAME,IAAI,CAACI,QAAQ;AAI5B,EAAE"}

package/lib/components/Card/useCard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
 import { useCardSelectable } from './useCardSelectable';
 import { cardContextDefaultValue } from './CardContext';
@@ -79,12 +79,14 @@ const focusMap = {
             floatingAction: 'div',
             checkbox: 'input'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: cardRef,
             role: 'group',
             ...focusAttributes,
             ...props,
             ...selectableCardProps
+        }), {
+            elementType: 'div'
         }),
         floatingAction: floatingActionSlot,
         checkbox: checkboxSlot

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

@@ -1 +1 @@
-{"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } 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: 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: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps,\n    }),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","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","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AACjF,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,WAAY,MAAK,EAAE,GAAGC,OAAkB,GAAK;IACzE,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,SAAS,CAAC;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBT,cAAc,QAAQ,IAAI,GAAGO,0BAA0B;IAC1E;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU,MAA8C;IAC/F,MAAM,EAAEC,YAAa,SAAQ,EAAEC,aAAc,WAAU,EAAEC,MAAO,SAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG3B,MAAM4B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAG/B,MAAM4B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc5B;IACpB,MAAM,EAAE6B,WAAU,EAAEC,SAAQ,EAAEC,oBAAmB,EAAEC,cAAa,EAAEC,aAAY,EAAEC,mBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUrC,cAAc8B,aAAaV;IAE3C,MAAM,EAAET,YAAW,EAAEO,gBAAe,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,MAAMxC,sBAAsB,OAAO;YACjCqB,KAAKiB;YACLK,MAAM;YACN,GAAGxB,eAAe;YAClB,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB;QAEAO,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
+{"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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: 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      getNativeElementProps('div', {\n        ref: cardRef,\n        role: 'group',\n        ...focusAttributes,\n        ...props,\n        ...selectableCardProps,\n      }),\n      { elementType: 'div' },\n    ),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getNativeElementProps","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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,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,WAAY,MAAK,EAAE,GAAGC,OAAkB,GAAK;IACzE,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,SAAS,CAAC;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBT,cAAc,QAAQ,IAAI,GAAGO,0BAA0B;IAC1E;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU,MAA8C;IAC/F,MAAM,EAAEC,YAAa,SAAQ,EAAEC,aAAc,WAAU,EAAEC,MAAO,SAAQ,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,WAAU,EAAEC,SAAQ,EAAEC,oBAAmB,EAAEC,cAAa,EAAEC,aAAY,EAAEC,mBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUtC,cAAc+B,aAAaV;IAE3C,MAAM,EAAET,YAAW,EAAEO,gBAAe,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,sBAAsB,OAAO;YAC3BsB,KAAKiB;YACLM,MAAM;YACN,GAAGzB,eAAe;YAClB,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}

package/lib/components/Card/useCardSelectable.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
+import { mergeCallbacks, slot } from '@fluentui/react-utilities';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useFocusFinders } from '@fluentui/react-tabster';
 /**
@@ -73,7 +73,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         } else if (referenceLabel) {
             selectableCheckboxProps['aria-label'] = referenceLabel;
         }
-        return resolveShorthand(checkbox, {
+        return slot.optional(checkbox, {
             defaultProps: {
                 ref: checkboxRef,
                 type: 'checkbox',
@@ -82,7 +82,8 @@ import { useFocusFinders } from '@fluentui/react-tabster';
                 onFocus: ()=>setIsSelectFocused(true),
                 onBlur: ()=>setIsSelectFocused(false),
                 ...selectableCheckboxProps
-            }
+            },
+            elementType: 'input'
         });
     }, [
         checkbox,
@@ -97,10 +98,11 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         if (!floatingAction) {
             return;
         }
-        return resolveShorthand(floatingAction, {
+        return slot.optional(floatingAction, {
             defaultProps: {
                 ref: checkboxRef
-            }
+            },
+            elementType: 'div'
         });
     }, [
         floatingAction

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

@@ -1 +1 @@
-{"version":3,"sources":["useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(\n    () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n    [defaultSelected, selected, setIsCardSelected],\n  );\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}
+{"version":3,"sources":["useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return slot.optional(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n      elementType: 'input',\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return slot.optional(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n      elementType: 'div',\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(\n    () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n    [defaultSelected, selected, setIsCardSelected],\n  );\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"names":["React","mergeCallbacks","slot","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}

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

@@ -313,7 +313,7 @@ const useStyles = /*#__PURE__*/__styles({
     Huce71: "fz5stix"
   }
 }, {
-  d: [".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".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;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".f99gebs[data-fui-focus-visible]::after{border-top-width:var(--strokeWidthThick);}", ".f13b0oaq[data-fui-focus-visible]::after{border-right-width:var(--strokeWidthThick);}", ".f8t2bz6[data-fui-focus-visible]::after{border-left-width:var(--strokeWidthThick);}", ".f1jvq617[data-fui-focus-visible]::after{border-bottom-width:var(--strokeWidthThick);}", ".f11unbnk[data-fui-focus-visible]::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fbd201q[data-fui-focus-visible]::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f12nqxso[data-fui-focus-visible]::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1uguk4w[data-fui-focus-visible]::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f15fr7a0[data-fui-focus-visible]::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".fwsq40z[data-fui-focus-visible]::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".fy0y4wt[data-fui-focus-visible]::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f34ld9f[data-fui-focus-visible]::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f125hn41[data-fui-focus-within]:focus-within::after{border-top-width:var(--strokeWidthThick);}", ".fgxkx34[data-fui-focus-within]:focus-within::after{border-right-width:var(--strokeWidthThick);}", ".f1v56tyl[data-fui-focus-within]:focus-within::after{border-left-width:var(--strokeWidthThick);}", ".fdxas6f[data-fui-focus-within]:focus-within::after{border-bottom-width:var(--strokeWidthThick);}", ".fxwickw[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f1ia5cve[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f194aguw[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fqicc6c[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".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{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f18esqgw>.fui-CardHeader:last-of-type,.f18esqgw>.fui-CardFooter:last-of-type{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fy4glsf>: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;}", ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{-webkit-clip-path:inset(50%);clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
+  d: [".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".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);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){flex-grow:1;}", ".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;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".f99gebs[data-fui-focus-visible]::after{border-top-width:var(--strokeWidthThick);}", ".f13b0oaq[data-fui-focus-visible]::after{border-right-width:var(--strokeWidthThick);}", ".f8t2bz6[data-fui-focus-visible]::after{border-left-width:var(--strokeWidthThick);}", ".f1jvq617[data-fui-focus-visible]::after{border-bottom-width:var(--strokeWidthThick);}", ".f11unbnk[data-fui-focus-visible]::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fbd201q[data-fui-focus-visible]::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f12nqxso[data-fui-focus-visible]::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1uguk4w[data-fui-focus-visible]::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f15fr7a0[data-fui-focus-visible]::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".fwsq40z[data-fui-focus-visible]::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".fy0y4wt[data-fui-focus-visible]::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f34ld9f[data-fui-focus-visible]::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f125hn41[data-fui-focus-within]:focus-within::after{border-top-width:var(--strokeWidthThick);}", ".fgxkx34[data-fui-focus-within]:focus-within::after{border-right-width:var(--strokeWidthThick);}", ".f1v56tyl[data-fui-focus-within]:focus-within::after{border-left-width:var(--strokeWidthThick);}", ".fdxas6f[data-fui-focus-within]:focus-within::after{border-bottom-width:var(--strokeWidthThick);}", ".fxwickw[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f1ia5cve[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f194aguw[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fqicc6c[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".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;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f18esqgw>.fui-CardHeader:last-of-type,.f18esqgw>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fy4glsf>: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;}", ".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;}"],
   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);}"],
@@ -332,8 +332,6 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}", {
-    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fpfvv3l:hover,.fpfvv3l :active{forced-color-adjust:none;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1oamsm6:hover,.f1oamsm6 :active{background-color:Highlight;}}", {
@@ -342,14 +340,6 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@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)"
-  }], ["@media (forced-colors: active){.fey3rwa::after{border-top-color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}", {
-    m: "(forced-colors: active)"
   }]]
 });
 /**

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","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B2jhnfs","wiictr","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Bnoktp0","Idhjb2","ihgzqh","Bgp6ld0","Bbucpmy","orientationVertical","Bt4kzjz","B1ou843","y1433z","B7egwnw","B49b4xf","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","f","i","h","a","m","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        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n        ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n        ...shorthands.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            ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`)\n        },\n        // Prevents CardHeader and CardFooter from shrinking.\n        [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n            flexShrink: 0\n        },\n        // Allows non-card components to grow to fill the available space.\n        [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n            flexGrow: 1\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        ...shorthands.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    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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"}
+{"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","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B2jhnfs","wiictr","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Bnoktp0","Idhjb2","ihgzqh","Bgp6ld0","Bbucpmy","orientationVertical","Bt4kzjz","B1ou843","y1433z","B7egwnw","B49b4xf","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","f","i","h","a","m","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        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n        ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n        ...shorthands.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            ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`)\n        },\n        // Prevents CardHeader and CardFooter from shrinking.\n        [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n            flexShrink: 0\n        },\n        // Allows non-card components to grow to fill the available space.\n        [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n            flexGrow: 1\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        ...shorthands.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    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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"}

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardFooter.
  */ export const renderCardFooter_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children, slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.root.children, state.action && /*#__PURE__*/ createElement(state.action, null));
 };

package/lib/components/CardFooter/renderCardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlotsNext<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCardFooter_unstable","state","slots","slotProps","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BD,UAAUC,IAAI,CAACC,QAAQ,EACvBH,MAAMI,MAAM,kBAAI,AAhBvB,cAgBwBJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  assertSlots<CardFooterSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAMC,IAAI,CAACC,QAAQ,EACnBF,MAAMG,MAAM,kBAAI,AAhBvB,cAgBwBH,MAAMG,MAAM;AAGpC,EAAE"}

package/lib/components/CardFooter/useCardFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render CardFooter.
  *
@@ -15,10 +15,14 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
             root: 'div',
             action: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        action: resolveShorthand(action)
+        action: slot.optional(action, {
+            elementType: 'div'
+        })
     };
 };

package/lib/components/CardFooter/useCardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useCardFooter_unstable","props","ref","action","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMP,sBAAsB,OAAO;YACjCI;YACA,GAAGD,KAAK;QACV;QACAE,QAAQJ,iBAAiBI;IAC3B;AACF,EAAE"}
+{"version":3,"sources":["useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    action: slot.optional(action, { elementType: 'div' }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useCardFooter_unstable","props","ref","action","components","root","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMN,KAAKO,MAAM,CACfR,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBJ,QAAQJ,KAAKS,QAAQ,CAACL,QAAQ;YAAEI,aAAa;QAAM;IACrD;AACF,EAAE"}

package/lib/components/CardFooter/useCardFooterStyles.styles.js

@@ -17,7 +17,7 @@ const useStyles = /*#__PURE__*/__styles({
     Frg6f3: ["fcgxt0o", "f1ujusj6"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f4akndk{column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
 });
 /**
  * Apply styling to the CardFooter slots based on the state.

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardHeader.
  */ export const renderCardHeader_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.image && /*#__PURE__*/ createElement(slots.image, slotProps.image), /*#__PURE__*/ createElement(slots.header, slotProps.header), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.image && /*#__PURE__*/ createElement(state.image, null), /*#__PURE__*/ createElement(state.header, null), state.description && /*#__PURE__*/ createElement(state.description, null), state.action && /*#__PURE__*/ createElement(state.action, null));
 };

package/lib/components/CardHeader/renderCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlotsNext<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCardHeader_unstable","state","slots","slotProps","root","image","header","description","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,KAAK,kBAAI,AAftB,cAeuBH,MAAMG,KAAK,EAAKF,UAAUE,KAAK,iBAChD,AAhBN,cAgBOH,MAAMI,MAAM,EAAKH,UAAUG,MAAM,GACjCJ,MAAMK,WAAW,kBAAI,AAjB5B,cAiB6BL,MAAMK,WAAW,EAAKJ,UAAUI,WAAW,GACjEL,MAAMM,MAAM,kBAAI,AAlBvB,cAkBwBN,MAAMM,MAAM,EAAKL,UAAUK,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  assertSlots<CardHeaderSlots>(state);\n\n  return (\n    <state.root>\n      {state.image && <state.image />}\n      <state.header />\n      {state.description && <state.description />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAME,KAAK,kBAAI,AAftB,cAeuBF,MAAME,KAAK,uBAC5B,AAhBN,cAgBOF,MAAMG,MAAM,SACZH,MAAMI,WAAW,kBAAI,AAjB5B,cAiB6BJ,MAAMI,WAAW,SACvCJ,MAAMK,MAAM,kBAAI,AAlBvB,cAkBwBL,MAAMK,MAAM;AAGpC,EAAE"}