@fluentui/react-card 9.0.0-alpha.8 → 9.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,eAAA,CAAA,wBAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"sources":["components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFnB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"sourceRoot":"../src/"}

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

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import type { CardFooterProps, CardFooterShorthandProps, CardFooterState } from './CardFooter.types';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: CardFooterShorthandProps[];
+import type { CardFooterProps, CardFooterState } from './CardFooter.types';
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @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_unstable: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;

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

@@ -3,35 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooter = exports.cardFooterShorthandProps = void 0;
+exports.useCardFooter_unstable = void 0;
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-
-exports.cardFooterShorthandProps = ['action'];
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({
-  deepMerge: exports.cardFooterShorthandProps
-});
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @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
  */
 
-var useCardFooter = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref
-  }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.cardFooterShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.cardFooterShorthandProps));
-  return state;
+
+const useCardFooter_unstable = (props, ref) => {
+  const {
+    action
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      action: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    action: react_utilities_1.resolveShorthand(action)
+  };
 };
 
-exports.useCardFooter = useCardFooter;
+exports.useCardFooter_unstable = useCardFooter_unstable;
 //# sourceMappingURL=useCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,wBAAA,GAAuD,CAAC,QAAD,CAAvD;AAEb,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,CAAgC;AAAE,EAAA,SAAS,EAAE,OAAA,CAAA;AAAb,CAAhC,CAAnB;AAEA;;;;;;;;;AASG;;AACI,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,iBAAA,CAAA,qBAAA,CAAsB,YAAtB,EAAoC,OAAA,CAAA,wBAApC,CAJM,EAKtB,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,OAAA,CAAA,wBAA7B,CALsB,CAAxB;AAQA,SAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,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,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAND;AAUL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAVH,GAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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"],"sourceRoot":"../src/"}

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

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

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

@@ -3,41 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooterStyles = void 0;
+exports.useCardFooterStyles_unstable = exports.cardFooterClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+exports.cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_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
  */
 
 
-var useCardFooterStyles = function (state) {
-  var styles = useStyles();
-  state.className = react_make_styles_1.mergeClasses(styles.root, state.className);
+const useCardFooterStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_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);
+    state.action.className = react_1.mergeClasses(styles.action, state.action.className);
   }
 
   return state;
 };
 
-exports.useCardFooterStyles = useCardFooterStyles;
+exports.useCardFooterStyles_unstable = useCardFooterStyles_unstable;
 //# sourceMappingURL=useCardFooterStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,SAAhC,CAAlB;;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":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,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,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,MAApB,EAA4B,KAAK,CAAC,MAAN,CAAa,SAAzC,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterState } from './CardFooter.types';\n\nexport const cardFooterClassName = 'fui-CardFooter';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import type { CardHeaderProps } from './CardHeader.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * Component to render an image, text and an action in a Card component.
  */
-export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLElement>>;
+export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardHeader = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
+const useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
 
-var renderCardHeader_1 = /*#__PURE__*/require("./renderCardHeader");
+const renderCardHeader_1 = /*#__PURE__*/require("./renderCardHeader");
 
-var useCardHeaderStyles_1 = /*#__PURE__*/require("./useCardHeaderStyles");
+const useCardHeaderStyles_1 = /*#__PURE__*/require("./useCardHeaderStyles");
 /**
  * Component to render an image, text and an action in a Card component.
  */
 
 
-exports.CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardHeader_1.useCardHeader(props, ref);
-  useCardHeaderStyles_1.useCardHeaderStyles(state);
-  return renderCardHeader_1.renderCardHeader(state);
+exports.CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardHeader_1.useCardHeader_unstable(props, ref);
+  useCardHeaderStyles_1.useCardHeaderStyles_unstable(state);
+  return renderCardHeader_1.renderCardHeader_unstable(state);
 });
 exports.CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=CardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAa,KAAK,CAAC,UAAN,CAA+C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,eAAA,CAAA,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AACA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP;AACD,CALyB,CAAb;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useCardHeader_unstable(props, ref);\n\n  useCardHeaderStyles_unstable(state);\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/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, Slot } from '@fluentui/react-utilities';
+export declare type CardHeaderSlots = {
+    root: Slot<'div'>;
+    image: Slot<'div'>;
+    content?: Slot<'div'>;
+    header: Slot<'span'>;
+    description: Slot<'span'>;
+    action?: Slot<'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<Partial<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-commonjs/components/CardHeader/CardHeader.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./CardHeader"), exports);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles';\n"],"sourceRoot":"../src/"}

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

@@ -2,4 +2,4 @@ import type { CardHeaderState } from './CardHeader.types';
 /**
  * Render the final JSX of CardHeader
  */
-export declare const renderCardHeader: (state: CardHeaderState) => JSX.Element;
+export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;

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

@@ -3,27 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCardHeader = void 0;
+exports.renderCardHeader_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of CardHeader
  */
 
 
-var renderCardHeader = function (state) {
-  var _a = react_utilities_1.getSlotsCompat(state, useCardHeader_1.cardHeaderShorthandPropsCompat),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), React.createElement(slots.image, tslib_1.__assign({}, slotProps.image)), React.createElement(slots.content, tslib_1.__assign({}, slotProps.content), React.createElement(slots.header, tslib_1.__assign({}, slotProps.header)), React.createElement(slots.description, tslib_1.__assign({}, slotProps.description))), React.createElement(slots.action, tslib_1.__assign({}, slotProps.action)));
+const renderCardHeader_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.image, { ...slotProps.image
+  }), slots.content && React.createElement(slots.content, { ...slotProps.content
+  }, React.createElement(slots.header, { ...slotProps.header
+  }), React.createElement(slots.description, { ...slotProps.description
+  })), slots.action && React.createElement(slots.action, { ...slotProps.action
+  }));
 };
 
-exports.renderCardHeader = renderCardHeader;
+exports.renderCardHeader_unstable = renderCardHeader_unstable;
 //# sourceMappingURL=renderCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,eAAA,CAAA,8BAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,WAAf,CAAlB,CAFF,CAFF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CANF,CADF;AAUD,CAbM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,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,EAEG,KAAK,CAAC,OAAN,IACC,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,CAHJ,EAQG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CARnB,CADF;AAYD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.image {...slotProps.image} />\n      {slots.content && (\n        <slots.content {...slotProps.content}>\n          <slots.header {...slotProps.header} />\n          <slots.description {...slotProps.description} />\n        </slots.content>\n      )}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,17 +1,12 @@
 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, CardHeaderState } from './CardHeader.types';
 /**
  * Create the state required to render CardHeader.
  *
- * The returned state can be modified with hooks such as useCardHeaderStyles,
- * before being passed to renderCardHeader.
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+ * before being passed to renderCardHeader_unstable.
  *
  * @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_unstable: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;

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

@@ -3,53 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeader = exports.cardHeaderShorthandPropsCompat = void 0;
+exports.useCardHeader_unstable = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in CardHeaderShorthandProps
- */
-
-
-exports.cardHeaderShorthandPropsCompat = ['image', 'content', 'header', 'description', 'action'];
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({
-  deepMerge: exports.cardHeaderShorthandPropsCompat
-});
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render CardHeader.
  *
- * The returned state can be modified with hooks such as useCardHeaderStyles,
- * before being passed to renderCardHeader.
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+ * before being passed to renderCardHeader_unstable.
  *
  * @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
  */
 
-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'
+
+const useCardHeader_unstable = (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 && react_utilities_1.resolveShorthandProps(defaultProps, exports.cardHeaderShorthandPropsCompat), react_utilities_1.resolveShorthandProps(props, exports.cardHeaderShorthandPropsCompat));
-  return state;
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    image: react_utilities_1.resolveShorthand(image, {
+      required: true
+    }),
+    content: react_utilities_1.resolveShorthand(content || {}),
+    header: react_utilities_1.resolveShorthand(header, {
+      required: true
+    }),
+    description: react_utilities_1.resolveShorthand(description, {
+      required: true
+    }),
+    action: react_utilities_1.resolveShorthand(action)
+  };
 };
 
-exports.useCardHeader = useCardHeader;
+exports.useCardHeader_unstable = useCardHeader_unstable;
 //# sourceMappingURL=useCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,8BAAA,GAA6D,CACxE,OADwE,EAExE,SAFwE,EAGxE,QAHwE,EAIxE,aAJwE,EAKxE,QALwE,CAA7D;AAQb,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,CAAgC;AAAE,EAAA,SAAS,EAAE,OAAA,CAAA;AAAb,CAAhC,CAAnB;AAEA;;;;;;;;;AASG;;AACI,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,iBAAA,CAAA,qBAAA,CAAsB,YAAtB,EAAoC,OAAA,CAAA,8BAApC,CATM,EAUtB,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,OAAA,CAAA,8BAA7B,CAVsB,CAAxB;AAaA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,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,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAVD;AAcL,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAxB,CAdF;AAiBL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAO,IAAI,EAA5B,CAjBJ;AAkBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAzB,CAlBH;AAqBL,IAAA,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,WAAjB,EAA8B;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAA9B,CArBR;AAwBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAxBH,GAAP;AA0BD,CA7BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, content, header, description, action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      content: 'div',\n      header: React.Fragment,\n      description: React.Fragment,\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image, {\n      required: true,\n    }),\n    content: resolveShorthand(content || {}),\n    header: resolveShorthand(header, {\n      required: true,\n    }),\n    description: resolveShorthand(description, {\n      required: true,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeaderStyles = void 0;
+exports.useCardHeaderStyles_unstable = exports.cardHeaderClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+exports.cardHeaderClassName = 'fui-CardHeader';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
     "Bt984gj": "f122n59",
-    "rmohyg": "fsbu5mz",
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
     "Bqenvij": "f1d2rq10"
   },
   "image": {
@@ -39,27 +41,27 @@ var 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
  */
 
 
-var useCardHeaderStyles = function (state) {
-  var styles = useStyles();
-  state.className = react_make_styles_1.mergeClasses(styles.root, state.className);
+const useCardHeaderStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_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);
+    state.image.className = react_1.mergeClasses(styles.image, state.image.className);
   }
 
   if (state.content) {
-    state.content.className = react_make_styles_1.mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = react_1.mergeClasses(styles.textContainer, state.content.className);
   }
 
   return state;
 };
 
-exports.useCardHeaderStyles = useCardHeaderStyles;
+exports.useCardHeaderStyles_unstable = useCardHeaderStyles_unstable;
 //# sourceMappingURL=useCardHeaderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,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,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,SAAhC,CAAlB;;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":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,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,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,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,OAAA,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,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,aAApB,EAAmC,KAAK,CAAC,OAAN,CAAc,SAAjD,CAA1B;AACD;;AAED,SAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderState } from './CardHeader.types';\n\nexport const cardHeaderClassName = 'fui-CardHeader';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    ...shorthands.gap('12px'),\n    height: '32px',\n  },\n  image: {\n    minWidth: '24px',\n    minHeight: '24px',\n    maxWidth: '32px',\n    maxHeight: '32px',\n\n    display: 'flex',\n    alignItems: 'center',\n\n    '> *': {\n      minWidth: 'inherit',\n      minHeight: 'inherit',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n  },\n\n  textContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    height: 'inherit',\n\n    '> *': {\n      height: '50%',\n    },\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(styles.image, state.image.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(styles.textContainer, state.content.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import type { CardPreviewProps } from './CardPreview.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
-export declare const CardPreview: React.ForwardRefExoticComponent<CardPreviewProps & React.RefAttributes<HTMLElement>>;
+export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;