@fluentui/react-card 9.0.0-beta.1 → 9.0.0-beta.5

package/lib/components/Card/renderCard.js

@@ -1,15 +1,14 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Card
  */
 
-export var renderCard = function (state) {
-  var _a = getSlotsCompat(state),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children);
+export const renderCard = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root));
 };
 //# sourceMappingURL=renderCard.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,UAAU,GAAG,UAAC,KAAD,EAAiB;AACnC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,QAAvC,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM","sourceRoot":""}

package/lib/components/Card/useCard.d.ts

@@ -8,6 +8,5 @@ import type { CardProps, CardState } from './Card.types';
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>, defaultProps?: CardProps | undefined) => CardState;
+export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;

package/lib/components/Card/useCard.js

@@ -1,5 +1,5 @@
-import { makeMergeProps } from '@fluentui/react-utilities';
-var mergeProps = /*#__PURE__*/makeMergeProps();
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 /**
  * Create the state required to render Card.
  *
@@ -8,14 +8,22 @@ var mergeProps = /*#__PURE__*/makeMergeProps();
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCard = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    role: 'group'
-  }, defaultProps, props);
-  return state;
+export const useCard = (props, ref) => {
+  const groupperAttrs = useFocusableGroup({
+    tabBehavior: 'limitedTrapFocus'
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps(props.as || 'div', {
+      ref,
+      role: 'group',
+      ...groupperAttrs,
+      ...props
+    })
+  };
 };
 //# sourceMappingURL=useCard.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,2BAA/B;AAGA,IAAM,UAAU,gBAAG,cAAc,EAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAAgD,YAAhD,EAAwE;AAC7F,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,IAAI,EAAE;AAFR,GADsB,EAKtB,YALsB,EAMtB,KANsB,CAAxB;AASA,SAAO,KAAP;AACD,CAXM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAClF,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE;AADyB,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAHtB,GAAP;AAUD,CAfM","sourceRoot":""}

package/lib/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/components/Card/useCardStyles.js

@@ -1,14 +1,16 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { cardPreviewClassName } from '../CardPreview/index';
+export const cardClassName = 'fui-Card';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
     "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1whvlc6", "fzb35q0"],
+    "E5pizo": "f1whvlc6",
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
     "z8tnut": "f1kcqot9",
@@ -17,9 +19,9 @@ var useStyles = /*#__PURE__*/__styles({
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
     "rmohyg": "fsbu5mz",
     "Dimara": "ft85np5",
-    "Beromem": ["f1kp1iwg", "f1819hsr"],
-    "tyvvez": ["f1819hsr", "f1kp1iwg"],
-    "kr49nh": "fthnjpr"
+    "Bt4kzjz": ["fwanz6y", "f1sdy22h"],
+    "B1ou843": ["f1sdy22h", "fwanz6y"],
+    "Bx3mhbb": "f12h22a6"
   },
   "interactive": {
     "Bceei9c": "f1k6fduh",
@@ -27,7 +29,7 @@ var 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;}", ".f1a3p1vp{overflow: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;}", ".fsbu5mz{gap:12px;}", ".ft85np5{border-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);}"]
 });
@@ -36,9 +38,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var useCardStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(styles.root, (state.onClick || state.onMouseUp || state.onMouseDown || state.onPointerUp || state.onPointerDown || state.onTouchStart || state.onTouchEnd) && styles.interactive, state.className);
+export const useCardStyles = state => {
+  const styles = useStyles();
+  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,IAAM,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,IAAM,aAAa,GAAG,UAAC,KAAD,EAAiB;AAC5C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,CAAC,KAAK,CAAC,OAAN,IACC,KAAK,CAAC,SADP,IAEC,KAAK,CAAC,WAFP,IAGC,KAAK,CAAC,WAHP,IAIC,KAAK,CAAC,aAJP,IAKC,KAAK,CAAC,YALP,IAMC,KAAK,CAAC,UANR,KAOE,MAAM,CAAC,WATmB,EAU5B,KAAK,CAAC,SAVsB,CAA9B;AAaA,SAAO,KAAP;AACD,CAhBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;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,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/CardFooter.js

@@ -6,8 +6,8 @@ import { useCardFooterStyles } from './useCardFooterStyles';
  * Component to render Button actions in a Card component.
  */
 
-export var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardFooter(props, ref);
+export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardFooter(props, ref);
   useCardFooterStyles(state);
   return renderCardFooter(state);
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}

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

@@ -1,28 +1,13 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type CardFooterSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+    action?: IntrinsicShorthandProps<'div'>;
+};
 /**
- * CardFooter Props
+ * CardFooter props
  */
-export interface CardFooterProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
-/**
- * Names of the shorthand properties in CardFooterProps
- */
-export declare type CardFooterShorthandProps = 'action';
-/**
- * Names of CardFooterProps that have a default value in useCardFooter
- */
-export declare type CardFooterDefaultedProps = never;
+export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 /**
  * State used in rendering CardFooter
  */
-export interface CardFooterState extends ComponentStateCompat<CardFooterProps, CardFooterShorthandProps, CardFooterDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardFooterState = ComponentState<CardFooterSlots>;

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,16 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 import { cardFooterShorthandProps } from './useCardFooter';
 /**
  * Render the final JSX of CardFooter
  */
 
-export var renderCardFooter = function (state) {
-  var _a = getSlotsCompat(state, cardFooterShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children, /*#__PURE__*/React.createElement(slots.action, __assign({}, slotProps.action)));
+export const renderCardFooter = state => {
+  const {
+    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)));
 };
 //# 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,cAAT,QAA+B,2BAA/B;AACA,SAAS,wBAAT,QAAyC,iBAAzC;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,wBAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,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,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":""}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { CardFooterProps, CardFooterShorthandProps, CardFooterState } from './CardFooter.types';
+import type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';
 /**
  * Array of all shorthand properties listed in CardFooterShorthandProps
  */
-export declare const cardFooterShorthandProps: CardFooterShorthandProps[];
+export declare const cardFooterShorthandProps: Array<keyof CardFooterSlots>;
 /**
  * Create the state required to render CardFooter.
  *
@@ -12,6 +12,5 @@ export declare const cardFooterShorthandProps: CardFooterShorthandProps[];
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardFooter: (props: CardFooterProps, ref: React.Ref<HTMLElement>, defaultProps?: CardFooterProps | undefined) => CardFooterState;
+export declare const useCardFooter: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;

package/lib/components/CardFooter/useCardFooter.js

@@ -1,12 +1,9 @@
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Array of all shorthand properties listed in CardFooterShorthandProps
  */
 
-export var cardFooterShorthandProps = ['action'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: cardFooterShorthandProps
-});
+export const cardFooterShorthandProps = ['root', 'action'];
 /**
  * Create the state required to render CardFooter.
  *
@@ -15,13 +12,22 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCardFooter = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref
-  }, defaultProps && resolveShorthandProps(defaultProps, cardFooterShorthandProps), resolveShorthandProps(props, cardFooterShorthandProps));
-  return state;
+export const useCardFooter = (props, ref) => {
+  const {
+    action
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      action: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    action: resolveShorthand(action)
+  };
 };
 //# sourceMappingURL=useCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;AAEG;;AACH,OAAO,IAAM,wBAAwB,GAA+B,CAAC,QAAD,CAA7D;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAkB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAlB,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,aAAa,GAAG,UAC3B,KAD2B,EAE3B,GAF2B,EAG3B,YAH2B,EAGG;AAE9B,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA;AADL,GADsB,EAItB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,wBAAf,CAJf,EAKtB,qBAAqB,CAAC,KAAD,EAAQ,wBAAR,CALC,CAAxB;AAQA,SAAO,KAAP;AACD,CAdM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAiC,CAAC,MAAD,EAAS,QAAT,CAA/D;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,aAAa,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AACpG,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAVnB,GAAP;AAYD,CAfM","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,9 +1,10 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+export const cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
@@ -20,9 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var useCardFooterStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+export const useCardFooterStyles = state => {
+  const styles = useStyles();
+  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,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,SAApB,CAA9B;;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,QAAyC,6BAAzC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;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,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/CardHeader.js

@@ -6,8 +6,8 @@ import { useCardHeaderStyles } from './useCardHeaderStyles';
  * Component to render an image, text and an action in a Card component.
  */
 
-export var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardHeader(props, ref);
+export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardHeader(props, ref);
   useCardHeaderStyles(state);
   return renderCardHeader(state);
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}

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

@@ -1,44 +1,17 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type CardHeaderSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+    image: IntrinsicShorthandProps<'div'>;
+    content?: IntrinsicShorthandProps<'div'>;
+    header: IntrinsicShorthandProps<'span'>;
+    description: IntrinsicShorthandProps<'span'>;
+    action?: IntrinsicShorthandProps<'div'>;
+};
 /**
- * CardHeader Props
+ * CardHeader props
  */
-export interface CardHeaderProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Image slot
-     */
-    image: ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;
-    /**
-     * Content slot, wrapper of the header and description slots
-     */
-    content?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Header title slot
-     */
-    header: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Description slot
-     */
-    description: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
-/**
- * Names of the shorthand properties in CardHeaderProps
- */
-export declare type CardHeaderShorthandProps = 'image' | 'content' | 'header' | 'description' | 'action';
-/**
- * Names of CardHeaderProps that have a default value in useCardHeader
- */
-export declare type CardHeaderDefaultedProps = never;
+export declare type CardHeaderProps = ComponentProps<CardHeaderSlots>;
 /**
  * State used in rendering CardHeader
  */
-export interface CardHeaderState extends ComponentStateCompat<CardHeaderProps, CardHeaderShorthandProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardHeaderState = ComponentState<CardHeaderSlots>;

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,16 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import { cardHeaderShorthandPropsCompat } from './useCardHeader';
+import { getSlots } from '@fluentui/react-utilities';
+import { cardHeaderShorthandProps } from './useCardHeader';
 /**
  * Render the final JSX of CardHeader
  */
 
-export var renderCardHeader = function (state) {
-  var _a = getSlotsCompat(state, cardHeaderShorthandPropsCompat),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.image, __assign({}, slotProps.image)), /*#__PURE__*/React.createElement(slots.content, __assign({}, slotProps.content), /*#__PURE__*/React.createElement(slots.header, __assign({}, slotProps.header)), /*#__PURE__*/React.createElement(slots.description, __assign({}, slotProps.description))), /*#__PURE__*/React.createElement(slots.action, __assign({}, slotProps.action)));
+export const renderCardHeader = state => {
+  const {
+    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)));
 };
 //# 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,cAAT,QAA+B,2BAA/B;AACA,SAAS,8BAAT,QAA+C,iBAA/C;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,8BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,WAAf,CAAlB,CAFF,CAFF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,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,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":""}

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

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import type { CardHeaderProps, CardHeaderShorthandProps, CardHeaderState } from './CardHeader.types';
-/**
- * Array of all shorthand properties listed in CardHeaderShorthandProps
- */
-export declare const cardHeaderShorthandPropsCompat: CardHeaderShorthandProps[];
+import type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader.types';
+export declare const cardHeaderShorthandProps: Array<keyof CardHeaderSlots>;
 /**
  * Create the state required to render CardHeader.
  *
@@ -12,6 +9,5 @@ export declare const cardHeaderShorthandPropsCompat: CardHeaderShorthandProps[];
  *
  * @param props - props from this instance of CardHeader
  * @param ref - reference to root HTMLElement of CardHeader
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardHeader: (props: CardHeaderProps, ref: React.Ref<HTMLElement>, defaultProps?: CardHeaderProps | undefined) => CardHeaderState;
+export declare const useCardHeader: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;

package/lib/components/CardHeader/useCardHeader.js

@@ -1,13 +1,6 @@
 import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardHeaderShorthandProps
- */
-
-export var cardHeaderShorthandPropsCompat = ['image', 'content', 'header', 'description', 'action'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: cardHeaderShorthandPropsCompat
-});
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+export const cardHeaderShorthandProps = ['root', 'image', 'content', 'header', 'description', 'action'];
 /**
  * Create the state required to render CardHeader.
  *
@@ -16,29 +9,40 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
  *
  * @param props - props from this instance of CardHeader
  * @param ref - reference to root HTMLElement of CardHeader
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCardHeader = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    image: {
-      as: 'div'
-    },
-    content: {
-      as: 'div',
-      children: React.Fragment
-    },
-    header: {
-      as: 'span'
-    },
-    description: {
-      as: 'span'
-    },
-    action: {
-      as: 'div'
+export const useCardHeader = (props, ref) => {
+  const {
+    image,
+    content,
+    header,
+    description,
+    action
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      image: 'div',
+      content: 'div',
+      header: React.Fragment,
+      description: React.Fragment,
+      action: 'div'
     },
-    ref: ref
-  }, defaultProps && resolveShorthandProps(defaultProps, cardHeaderShorthandPropsCompat), resolveShorthandProps(props, cardHeaderShorthandPropsCompat));
-  return state;
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    image: resolveShorthand(image, {
+      required: true
+    }),
+    content: resolveShorthand(content || {}),
+    header: resolveShorthand(header, {
+      required: true
+    }),
+    description: resolveShorthand(description, {
+      required: true
+    }),
+    action: resolveShorthand(action)
+  };
 };
 //# sourceMappingURL=useCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;AAEG;;AACH,OAAO,IAAM,8BAA8B,GAA+B,CACxE,OADwE,EAExE,SAFwE,EAGxE,QAHwE,EAIxE,aAJwE,EAKxE,QALwE,CAAnE;AAQP,IAAM,UAAU,gBAAG,cAAc,CAAkB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAlB,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,aAAa,GAAG,UAC3B,KAD2B,EAE3B,GAF2B,EAG3B,YAH2B,EAGG;AAE9B,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,KAAK,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KADT;AAEE,IAAA,OAAO,EAAE;AAAE,MAAA,EAAE,EAAE,KAAN;AAAa,MAAA,QAAQ,EAAE,KAAK,CAAC;AAA7B,KAFX;AAGE,IAAA,MAAM,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAHV;AAIE,IAAA,WAAW,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJf;AAKE,IAAA,MAAM,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KALV;AAME,IAAA,GAAG,EAAA;AANL,GADsB,EAStB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,8BAAf,CATf,EAUtB,qBAAqB,CAAC,KAAD,EAAQ,8BAAR,CAVC,CAAxB;AAaA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA,OAAO,MAAM,wBAAwB,GAAiC,CACpE,MADoE,EAEpE,OAFoE,EAGpE,SAHoE,EAIpE,QAJoE,EAKpE,aALoE,EAMpE,QANoE,CAA/D;AASP;;;;;;;;AAQG;;AACH,OAAO,MAAM,aAAa,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AACpG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,KAAK,CAAC,QAJJ;AAKV,MAAA,WAAW,EAAE,KAAK,CAAC,QALT;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CAVtB;AAcL,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAR,CAdlB;AAiBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAO,IAAI,EAAZ,CAjBpB;AAkBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAT,CAlBnB;AAqBL,IAAA,WAAW,EAAE,gBAAgB,CAAC,WAAD,EAAc;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAAd,CArBxB;AAwBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAxBnB,GAAP;AA0BD,CA7BM","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,9 +1,10 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+export const cardHeaderClassName = 'fui-CardHeader';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
@@ -38,9 +39,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var useCardHeaderStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+export const useCardHeaderStyles = state => {
+  const styles = useStyles();
+  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,IAAM,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,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,SAApB,CAA9B;;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,QAAyC,6BAAzC;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,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":""}