@fluentui/react-card 0.0.0-nightlybc5ff01fb020211104.1 → 0.0.0-nightlycbf184efa720211222.1

package/lib/components/Card/useCardStyles.js

@@ -1,4 +1,6 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { cardPreviewClassName } from '../CardPreview/index';
+export const cardClassName = 'fui-Card';
 /**
  * Styles for the root slot
  */
@@ -7,19 +9,24 @@ const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
-    "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1whvlc6", "fzb35q0"],
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "E5pizo": "f1whvlc6",
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
     "z8tnut": "f1kcqot9",
     "z189sj": ["f11qrl6u", "fjlbh76"],
     "Byoj8tv": "fpe6lb7",
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "rmohyg": "fsbu5mz",
-    "Dimara": "ft85np5",
-    "Beromem": ["f1kp1iwg", "f1819hsr"],
-    "tyvvez": ["f1819hsr", "f1kp1iwg"],
-    "kr49nh": "fthnjpr"
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "Bt4kzjz": ["fwanz6y", "f1sdy22h"],
+    "B1ou843": ["f1sdy22h", "fwanz6y"],
+    "Bx3mhbb": "f12h22a6"
   },
   "interactive": {
     "Bceei9c": "f1k6fduh",
@@ -27,7 +34,7 @@ const useStyles = /*#__PURE__*/__styles({
     "ecr2s2": "fb40n2d"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1a3p1vp{overflow:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".fzb35q0{box-shadow:var(--shadow-4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fsbu5mz{gap:12px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1kp1iwg>.fluentui-react-card-preview{margin-left:-12px;}", ".f1819hsr>.fluentui-react-card-preview{margin-right:-12px;}", ".fthnjpr>.fluentui-react-card-preview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwanz6y>.fui-CardPreview{margin-left:-12px;}", ".f1sdy22h>.fui-CardPreview{margin-right:-12px;}", ".f12h22a6>.fui-CardPreview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
   "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
   "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
 });
@@ -38,7 +45,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useCardStyles = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
+  state.root.className = mergeClasses(cardClassName, styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
   return state;
 };
 //# sourceMappingURL=useCardStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WATwB,EAUjC,KAAK,CAAC,IAAN,CAAW,SAVsB,CAAnC;AAaA,SAAO,KAAP;AACD,CAhBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,6BAArD;AACA,SAAS,oBAAT,QAAqC,sBAArC;AAGA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVwB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CAjBM","sourceRoot":""}

package/lib/components/CardFooter/renderCardFooter.js

@@ -10,6 +10,8 @@ export const renderCardFooter = state => {
     slots,
     slotProps
   } = getSlots(state, cardFooterShorthandProps);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children, /*#__PURE__*/React.createElement(slots.action, Object.assign({}, slotProps.action)));
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children, /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  }));
 };
 //# sourceMappingURL=renderCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,wBAAT,QAAyC,iBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,wBAAT,QAAyC,iBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFF,CADF;AAMD,CATM","sourceRoot":""}

package/lib/components/CardFooter/useCardFooterStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardFooterState } from './CardFooter.types';
+export declare const cardFooterClassName = "fui-CardFooter";
 /**
  * Apply styling to the CardFooter slots based on the state
  */

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,4 +1,5 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
+export const cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
  */
@@ -7,13 +8,14 @@ const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
-    "rmohyg": "fsbu5mz"
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v"
   },
   "action": {
     "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;}", ".fsbu5mz{gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
+  "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;}"]
 });
 /**
  * Apply styling to the CardFooter slots based on the state
@@ -22,7 +24,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useCardFooterStyles = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.root.className);
+  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
 
   if (state.action) {
     state.action.className = mergeClasses(styles.action, state.action.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,MAAM,CAAC,MAAR,EAAgB,KAAK,CAAC,MAAN,CAAa,SAA7B,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,6BAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,MAAM,CAAC,MAAR,EAAgB,KAAK,CAAC,MAAN,CAAa,SAA7B,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}

package/lib/components/CardHeader/renderCardHeader.js

@@ -10,6 +10,12 @@ export const renderCardHeader = state => {
     slots,
     slotProps
   } = getSlots(state, cardHeaderShorthandProps);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.image, Object.assign({}, slotProps.image)), /*#__PURE__*/React.createElement(slots.content, Object.assign({}, slotProps.content), /*#__PURE__*/React.createElement(slots.header, Object.assign({}, slotProps.header)), /*#__PURE__*/React.createElement(slots.description, Object.assign({}, slotProps.description))), /*#__PURE__*/React.createElement(slots.action, Object.assign({}, slotProps.action)));
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
+  }), /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }, /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
+  }), /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
+  })), /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  }));
 };
 //# sourceMappingURL=renderCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iBAAzC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,WAAf,CAAlB,CAFF,CAFF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CANF,CADF;AAUD,CAbM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iBAAzC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAlB,CAFF,CAFF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CANF,CADF;AAUD,CAbM","sourceRoot":""}

package/lib/components/CardHeader/useCardHeaderStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardHeaderState } from './CardHeader.types';
+export declare const cardHeaderClassName = "fui-CardHeader";
 /**
  * Apply styling to the CardHeader slots based on the state
  */

package/lib/components/CardHeader/useCardHeaderStyles.js

@@ -1,4 +1,5 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
+export const cardHeaderClassName = 'fui-CardHeader';
 /**
  * Styles for the root slot
  */
@@ -8,7 +9,8 @@ const useStyles = /*#__PURE__*/__styles({
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
     "Bt984gj": "f122n59",
-    "rmohyg": "fsbu5mz",
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
     "Bqenvij": "f1d2rq10"
   },
   "image": {
@@ -31,7 +33,7 @@ const useStyles = /*#__PURE__*/__styles({
     "Bn3e79g": "f1con4nn"
   }
 }, {
-  "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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsbu5mz{gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
+  "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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
 });
 /**
  * Apply styling to the CardHeader slots based on the state
@@ -40,7 +42,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useCardHeaderStyles = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.root.className);
+  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
 
   if (state.image) {
     state.image.className = mergeClasses(styles.image, state.image.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,KAAK,CAAC,KAAN,CAAY,SAA3B,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,aAAR,EAAuB,KAAK,CAAC,OAAN,CAAc,SAArC,CAAtC;AACD;;AAED,SAAO,KAAP;AACD,CAbM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,6BAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,KAAK,CAAC,KAAN,CAAY,SAA3B,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,aAAR,EAAuB,KAAK,CAAC,OAAN,CAAc,SAArC,CAAtC;AACD;;AAED,SAAO,KAAP;AACD,CAbM","sourceRoot":""}

package/lib/components/CardPreview/renderCardPreview.js

@@ -10,6 +10,8 @@ export const renderCardPreview = state => {
     slots,
     slotProps
   } = getSlots(state, cardPreviewShorthandProps);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children, /*#__PURE__*/React.createElement(slots.logo, Object.assign({}, slotProps.logo)));
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children, /*#__PURE__*/React.createElement(slots.logo, { ...slotProps.logo
+  }));
 };
 //# sourceMappingURL=renderCardPreview.js.map

package/lib/components/CardPreview/renderCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,yBAAT,QAA0C,kBAA1C;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,EAA0B,yBAA1B,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,yBAAT,QAA0C,kBAA1C;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,EAA0B,yBAA1B,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,CADF;AAMD,CATM","sourceRoot":""}

package/lib/components/CardPreview/useCardPreviewStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardPreviewState } from './CardPreview.types';
+export declare const cardPreviewClassName = "fui-CardPreview";
 /**
  * Apply styling to the CardPreview slots based on the state
  */

package/lib/components/CardPreview/useCardPreviewStyles.js

@@ -1,4 +1,5 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, __styles, mergeClasses } from '@fluentui/react-make-styles';
+export const cardPreviewClassName = 'fui-CardPreview';
 /**
  * Styles for the root slot
  */
@@ -30,7 +31,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useCardPreviewStyles = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses('fluentui-react-card-preview', styles.root, state.root.className);
+  state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
 
   if (state.logo) {
     state.logo.className = mergeClasses(styles.logo, state.logo.className);

package/lib/components/CardPreview/useCardPreviewStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA8C;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,6BAAD,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,6BAArD;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA8C;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}

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

@@ -18,7 +18,8 @@ const renderCard = state => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root));
+  return React.createElement(slots.root, { ...slotProps.root
+  });
 };
 
 exports.renderCard = renderCard;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}

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

@@ -21,7 +21,7 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 const useCard = (props, ref) => {
   const groupperAttrs = react_tabster_1.useFocusableGroup({
-    tabBehavior: react_tabster_1.FocusableGroupTabBehavior.LimitedTrapFocus
+    tabBehavior: 'limitedTrapFocus'
   });
   return {
     components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAClF,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,eAAA,CAAA,yBAAA,CAA0B;AADD,GAAlB,CAAtB;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAHD,GAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAClF,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE;AADyB,GAAlB,CAAtB;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAHD,GAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}

package/lib-commonjs/components/Card/useCardStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardState } from './Card.types';
+export declare const cardClassName = "fui-Card";
 /**
  * Apply styling to the Card slots based on the state
  */

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

@@ -3,31 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardStyles = void 0;
+exports.useCardStyles = exports.cardClassName = void 0;
 
 const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+const index_1 = /*#__PURE__*/require("../CardPreview/index");
+
+exports.cardClassName = 'fui-Card';
 /**
  * Styles for the root slot
  */
 
-
 const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
-    "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1whvlc6", "fzb35q0"],
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "E5pizo": "f1whvlc6",
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
     "z8tnut": "f1kcqot9",
     "z189sj": ["f11qrl6u", "fjlbh76"],
     "Byoj8tv": "fpe6lb7",
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "rmohyg": "fsbu5mz",
-    "Dimara": "ft85np5",
-    "Beromem": ["f1kp1iwg", "f1819hsr"],
-    "tyvvez": ["f1819hsr", "f1kp1iwg"],
-    "kr49nh": "fthnjpr"
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "Bt4kzjz": ["fwanz6y", "f1sdy22h"],
+    "B1ou843": ["f1sdy22h", "fwanz6y"],
+    "Bx3mhbb": "f12h22a6"
   },
   "interactive": {
     "Bceei9c": "f1k6fduh",
@@ -35,7 +43,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "ecr2s2": "fb40n2d"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1a3p1vp{overflow:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".fzb35q0{box-shadow:var(--shadow-4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fsbu5mz{gap:12px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1kp1iwg>.fluentui-react-card-preview{margin-left:-12px;}", ".f1819hsr>.fluentui-react-card-preview{margin-right:-12px;}", ".fthnjpr>.fluentui-react-card-preview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwanz6y>.fui-CardPreview{margin-left:-12px;}", ".f1sdy22h>.fui-CardPreview{margin-right:-12px;}", ".f12h22a6>.fui-CardPreview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
   "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
   "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
 });
@@ -46,7 +54,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 const useCardStyles = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
+  state.root.className = react_make_styles_1.mergeClasses(exports.cardClassName, styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WATY,EAUrB,KAAK,CAAC,IAAN,CAAW,SAVU,CAAvB;AAaA,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAGa,OAAA,CAAA,aAAA,GAAgB,UAAhB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,aADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVY,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CAjBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}

package/lib-commonjs/components/CardFooter/renderCardFooter.js

@@ -20,7 +20,9 @@ const renderCardFooter = state => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state, useCardFooter_1.cardFooterShorthandProps);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children, React.createElement(slots.action, Object.assign({}, slotProps.action)));
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children, React.createElement(slots.action, { ...slotProps.action
+  }));
 };
 
 exports.renderCardFooter = renderCardFooter;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}

package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardFooterState } from './CardFooter.types';
+export declare const cardFooterClassName = "fui-CardFooter";
 /**
  * Apply styling to the CardFooter slots based on the state
  */

package/lib-commonjs/components/CardFooter/useCardFooterStyles.js

@@ -3,25 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooterStyles = void 0;
+exports.useCardFooterStyles = exports.cardFooterClassName = void 0;
 
 const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+exports.cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
  */
 
-
 const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
-    "rmohyg": "fsbu5mz"
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v"
   },
   "action": {
     "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;}", ".fsbu5mz{gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
+  "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;}"]
 });
 /**
  * Apply styling to the CardFooter slots based on the state
@@ -30,7 +32,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 const useCardFooterStyles = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.root.className);
+  state.root.className = react_make_styles_1.mergeClasses(exports.cardFooterClassName, styles.root, state.root.className);
 
   if (state.action) {
     state.action.className = react_make_styles_1.mergeClasses(styles.action, state.action.className);

package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,MAApB,EAA4B,KAAK,CAAC,MAAN,CAAa,SAAzC,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAb,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,IAAN,CAAW,SAA1D,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,MAApB,EAA4B,KAAK,CAAC,MAAN,CAAa,SAAzC,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}

package/lib-commonjs/components/CardHeader/renderCardHeader.js

@@ -20,7 +20,13 @@ const renderCardHeader = state => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state, useCardHeader_1.cardHeaderShorthandProps);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), React.createElement(slots.image, Object.assign({}, slotProps.image)), React.createElement(slots.content, Object.assign({}, slotProps.content), React.createElement(slots.header, Object.assign({}, slotProps.header)), React.createElement(slots.description, Object.assign({}, slotProps.description))), React.createElement(slots.action, Object.assign({}, slotProps.action)));
+  return React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.image, { ...slotProps.image
+  }), React.createElement(slots.content, { ...slotProps.content
+  }, React.createElement(slots.header, { ...slotProps.header
+  }), React.createElement(slots.description, { ...slotProps.description
+  })), React.createElement(slots.action, { ...slotProps.action
+  }));
 };
 
 exports.renderCardHeader = renderCardHeader;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,WAAf,CAAlB,CAFF,CAFF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CANF,CADF;AAUD,CAbM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAlB,CAFF,CAFF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CANF,CADF;AAUD,CAbM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardHeaderState } from './CardHeader.types';
+export declare const cardHeaderClassName = "fui-CardHeader";
 /**
  * Apply styling to the CardHeader slots based on the state
  */

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeaderStyles = void 0;
+exports.useCardHeaderStyles = exports.cardHeaderClassName = void 0;
 
 const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+exports.cardHeaderClassName = 'fui-CardHeader';
 /**
  * Styles for the root slot
  */
 
-
 const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
     "Bt984gj": "f122n59",
-    "rmohyg": "fsbu5mz",
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
     "Bqenvij": "f1d2rq10"
   },
   "image": {
@@ -39,7 +41,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "Bn3e79g": "f1con4nn"
   }
 }, {
-  "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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsbu5mz{gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
+  "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;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
 });
 /**
  * Apply styling to the CardHeader slots based on the state
@@ -48,7 +50,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 const useCardHeaderStyles = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.root.className);
+  state.root.className = react_make_styles_1.mergeClasses(exports.cardHeaderClassName, styles.root, state.root.className);
 
   if (state.image) {
     state.image.className = react_make_styles_1.mergeClasses(styles.image, state.image.className);

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,KAApB,EAA2B,KAAK,CAAC,KAAN,CAAY,SAAvC,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,aAApB,EAAmC,KAAK,CAAC,OAAN,CAAc,SAAjD,CAA1B;AACD;;AAED,SAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAb,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,IAAN,CAAW,SAA1D,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,KAApB,EAA2B,KAAK,CAAC,KAAN,CAAY,SAAvC,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,aAApB,EAAmC,KAAK,CAAC,OAAN,CAAc,SAAjD,CAA1B;AACD;;AAED,SAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}

package/lib-commonjs/components/CardPreview/renderCardPreview.js

@@ -20,7 +20,9 @@ const renderCardPreview = state => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state, useCardPreview_1.cardPreviewShorthandProps);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children, React.createElement(slots.logo, Object.assign({}, slotProps.logo)));
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children, React.createElement(slots.logo, { ...slotProps.logo
+  }));
 };
 
 exports.renderCardPreview = renderCardPreview;

package/lib-commonjs/components/CardPreview/renderCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,EAAkC,gBAAA,CAAA,yBAAlC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,EAAkC,gBAAA,CAAA,yBAAlC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardPreviewState } from './CardPreview.types';
+export declare const cardPreviewClassName = "fui-CardPreview";
 /**
  * Apply styling to the CardPreview slots based on the state
  */

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardPreviewStyles = void 0;
+exports.useCardPreviewStyles = exports.cardPreviewClassName = void 0;
 
 const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+exports.cardPreviewClassName = 'fui-CardPreview';
 /**
  * Styles for the root slot
  */
 
-
 const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {
     "qhf8xq": "f10pi13n",
@@ -38,7 +39,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 const useCardPreviewStyles = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses('fluentui-react-card-preview', styles.root, state.root.className);
+  state.root.className = react_make_styles_1.mergeClasses(exports.cardPreviewClassName, styles.root, state.root.className);
 
   if (state.logo) {
     state.logo.className = react_make_styles_1.mergeClasses(styles.logo, state.logo.className);