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

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,16 +1,20 @@
-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';
 /**
  * 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_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
+  }), slots.content && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }, /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
+  }), /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
+  })), slots.action && /*#__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,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":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,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,EAEG,KAAK,CAAC,OAAN,iBACC,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,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CARnB,CADF;AAYD,CAfM","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/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/components/CardHeader/useCardHeader.js

@@ -1,44 +1,46 @@
-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';
 /**
  * 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 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_unstable = (props, ref) => {
+  const {
+    image,
+    content,
+    header,
+    description,
+    action
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      image: 'div',
+      content: 'div',
+      header: 'span',
+      description: 'span',
+      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":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,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,MAJE;AAKV,MAAA,WAAW,EAAE,MALH;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","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: 'span',\n      description: 'span',\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/components/CardHeader/useCardHeaderStyles.d.ts

@@ -1,5 +1,11 @@
-import type { CardHeaderState } from './CardHeader.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
+export declare const cardHeaderClassName = "fui-CardHeader";
+export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 /**
  * 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/components/CardHeader/useCardHeaderStyles.js

@@ -1,14 +1,28 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
+
+export const cardHeaderClassName = 'fui-CardHeader';
+export const cardHeaderClassNames = {
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  content: 'fui-CardHeader__content',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action'
+};
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
     "Bt984gj": "f122n59",
-    "rmohyg": "fsbu5mz",
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v",
     "Bqenvij": "f1d2rq10"
   },
   "image": {
@@ -31,23 +45,35 @@ var 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
  */
 
 
-export var useCardHeaderStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+export const useCardHeaderStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
+  }
+
+  if (state.header) {
+    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
+  }
+
+  if (state.description) {
+    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
+  }
+
+  if (state.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
   }
 
   return state;

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":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,OAAO,EAAE,yBAH0D;AAInE,EAAA,MAAM,EAAE,wBAJ2D;AAKnE,EAAA,WAAW,EAAE,6BALsD;AAMnE,EAAA,MAAM,EAAE;AAN2D,CAA9D;AASP;;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,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,oBAAoB,CAAC,OAAtB,EAA+B,MAAM,CAAC,aAAtC,EAAqD,KAAK,CAAC,OAAN,CAAc,SAAnE,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,MAAI,KAAK,CAAC,WAAV,EAAuB;AACrB,IAAA,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CAAC,oBAAoB,CAAC,WAAtB,EAAmC,KAAK,CAAC,WAAN,CAAkB,SAArD,CAA1C;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * @deprecated Use `cardHeaderClassNames.root` instead.\n */\nexport const cardHeaderClassName = 'fui-CardHeader';\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  content: 'fui-CardHeader__content',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\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(cardHeaderClassNames.root, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardPreview/CardPreview.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCardPreview } from './useCardPreview';
-import { renderCardPreview } from './renderCardPreview';
-import { useCardPreviewStyles } from './useCardPreviewStyles';
+import { useCardPreview_unstable } from './useCardPreview';
+import { renderCardPreview_unstable } from './renderCardPreview';
+import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
 
-export var CardPreview = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardPreview(props, ref);
-  useCardPreviewStyles(state);
-  return renderCardPreview(state);
+export const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardPreview_unstable(props, ref);
+  useCardPreviewStyles_unstable(state);
+  return renderCardPreview_unstable(state);
 });
 CardPreview.displayName = 'CardPreview';
 //# sourceMappingURL=CardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;AAEG;;AACH,OAAO,IAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC5F,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AACA,SAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n  const state = useCardPreview_unstable(props, ref);\n\n  useCardPreviewStyles_unstable(state);\n  return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"sourceRoot":"../src/"}

package/lib/components/CardPreview/CardPreview.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, Slot } from '@fluentui/react-utilities';
+export declare type CardPreviewSlots = {
+    root: Slot<'div'>;
+    logo?: Slot<'div'>;
+};
 /**
- * CardPreview Props
+ * CardPreview props
  */
-export interface CardPreviewProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Image slot
-     */
-    logo?: ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;
-}
-/**
- * Names of the shorthand properties in CardPreviewProps
- */
-export declare type CardPreviewShorthandProps = 'logo';
-/**
- * Names of CardPreviewProps that have a default value in useCardPreview
- */
-export declare type CardPreviewDefaultedProps = never;
+export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 /**
  * State used in rendering CardPreview
  */
-export interface CardPreviewState extends ComponentStateCompat<CardPreviewProps, CardPreviewShorthandProps, CardPreviewDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardPreviewState = ComponentState<CardPreviewSlots>;

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

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.types.js","sourceRoot":"","sources":["../../../src/components/CardPreview/CardPreview.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"CardPreview.types.js","sourceRoot":"../src/","sources":["components/CardPreview/CardPreview.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardPreviewSlots = {\n  root: Slot<'div'>;\n  logo?: Slot<'div'>;\n};\n\n/**\n * CardPreview props\n */\nexport type CardPreviewProps = ComponentProps<CardPreviewSlots>;\n\n/**\n * State used in rendering CardPreview\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardPreview/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CardPreview/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './CardPreview';\nexport * from './CardPreview.types';\nexport * from './renderCardPreview';\nexport * from './useCardPreview';\nexport * from './useCardPreviewStyles';\n"]}

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

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

package/lib/components/CardPreview/renderCardPreview.js

@@ -1,16 +1,16 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import { cardPreviewShorthandPropsCompat } from './useCardPreview';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardPreview
  */
 
-export var renderCardPreview = function (state) {
-  var _a = getSlotsCompat(state, cardPreviewShorthandPropsCompat),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children, /*#__PURE__*/React.createElement(slots.logo, __assign({}, slotProps.logo)));
+export const renderCardPreview_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children, slots.logo && /*#__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,cAAT,QAA+B,2BAA/B;AACA,SAAS,+BAAT,QAAgD,kBAAhD;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,+BAAR,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,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n  const { slots, slotProps } = getSlots<CardPreviewSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.logo && <slots.logo {...slotProps.logo} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import type { CardPreviewProps, CardPreviewShorthandProps, CardPreviewState } from './CardPreview.types';
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-export declare const cardPreviewShorthandPropsCompat: CardPreviewShorthandProps[];
+import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
 /**
  * Create the state required to render CardPreview.
  *
- * The returned state can be modified with hooks such as useCardPreviewStyles,
- * before being passed to renderCardPreview.
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+ * before being passed to renderCardPreview_unstable.
  *
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardPreview: (props: CardPreviewProps, ref: React.Ref<HTMLElement>, defaultProps?: CardPreviewProps | undefined) => CardPreviewState;
+export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;

package/lib/components/CardPreview/useCardPreview.js

@@ -1,30 +1,28 @@
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-
-export var cardPreviewShorthandPropsCompat = ['logo'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: cardPreviewShorthandPropsCompat
-});
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Create the state required to render CardPreview.
  *
- * The returned state can be modified with hooks such as useCardPreviewStyles,
- * before being passed to renderCardPreview.
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+ * before being passed to renderCardPreview_unstable.
  *
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCardPreview = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    logo: {
-      as: 'div'
-    }
-  }, defaultProps && resolveShorthandProps(defaultProps, cardPreviewShorthandPropsCompat), resolveShorthandProps(props, cardPreviewShorthandPropsCompat));
-  return state;
+export const useCardPreview_unstable = (props, ref) => {
+  const {
+    logo
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      logo: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    logo: resolveShorthand(logo)
+  };
 };
 //# sourceMappingURL=useCardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;AAEG;;AACH,OAAO,IAAM,+BAA+B,GAAgC,CAAC,MAAD,CAArE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAmB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAnB,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAG5B,YAH4B,EAGG;AAE/B,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN;AAFR,GADsB,EAKtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,+BAAf,CALf,EAMtB,qBAAqB,CAAC,KAAD,EAAQ,+BAAR,CANC,CAAxB;AASA,SAAO,KAAP;AACD,CAfM","sourceRoot":""}
+{"version":3,"sources":["components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AAAE,IAAA;AAAF,MAAW,KAAjB;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD;AAVjB,GAAP;AAYD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    logo: resolveShorthand(logo),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,5 +1,11 @@
-import type { CardPreviewState } from './CardPreview.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
+export declare const cardPreviewClassName = "fui-CardPreview";
+export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 /**
  * Apply styling to the CardPreview slots based on the state
  */
-export declare const useCardPreviewStyles: (state: CardPreviewState) => CardPreviewState;
+export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;

package/lib/components/CardPreview/useCardPreviewStyles.js

@@ -1,15 +1,20 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@griffel/react';
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
+
+export const cardPreviewClassName = 'fui-CardPreview';
+export const cardPreviewClassNames = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo'
+};
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "qhf8xq": "f10pi13n",
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f8nhgx1", "f16yxz7i"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f16yxz7i", "f8nhgx1"],
     "Bb0eobv": "floiv14",
     "m1g0b5": "f1r7p6p5"
   },
@@ -21,19 +26,19 @@ var useStyles = /*#__PURE__*/__styles({
     "Bqenvij": "f1d2rq10"
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".f1hu3pq6{margin-top:0;}", ".f8nhgx1{margin-right:-12px;}", ".f16yxz7i{margin-left:-12px;}", ".f19f4twv{margin-bottom:0;}", ".floiv14>*{display:block;}", ".f1r7p6p5>*{width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
+  "d": [".f10pi13n{position:relative;}", ".floiv14>*{display:block;}", ".f1r7p6p5>*{width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
 });
 /**
  * Apply styling to the CardPreview slots based on the state
  */
 
 
-export var useCardPreviewStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses('fluentui-react-card-preview', styles.root, state.className);
+export const useCardPreviewStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
 
   if (state.logo) {
-    state.logo.className = mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
 
   return state;

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,IAAM,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,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAAC,6BAAD,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,SAAnD,CAA9B;;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":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,IAAI,EAAE;AAF+D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * @deprecated Use `cardPreviewClassNames.root` instead.\n */\nexport const cardPreviewClassName = 'fui-CardPreview';\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n  root: 'fui-CardPreview',\n  logo: 'fui-CardPreview__logo',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n\n    '> *': {\n      display: 'block',\n      width: '100%',\n    },\n  },\n\n  logo: {\n    position: 'absolute',\n    bottom: '12px',\n    left: '12px',\n    width: '32px',\n    height: '32px',\n  },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n  if (state.logo) {\n    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -1,4 +1,8 @@
-export * from './Card';
-export * from './CardFooter';
-export * from './CardHeader';
-export * from './CardPreview';
+export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable, } from './Card';
+export type { CardCommons, CardProps, CardSlots, CardState } from './Card';
+export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, } from './CardFooter';
+export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';
+export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, } from './CardHeader';
+export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';
+export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, } from './CardPreview';
+export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';

package/lib/index.js

@@ -1,5 +1,6 @@
-export * from './Card';
-export * from './CardFooter';
-export * from './CardHeader';
-export * from './CardPreview';
+/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/
+export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
+export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
+export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
+export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AAEA,SACE,IADF,EAEE,aAFF,EAGE,cAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,oBAFF,EAGE,qBAHF,EAIE,0BAJF,EAKE,6BALF,EAME,uBANF,QAOO,eAPP","sourcesContent":["/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/\n\nexport {\n  Card,\n  cardClassName,\n  cardClassNames,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardCommons, CardProps, CardSlots, CardState } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassName,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassName,\n  cardHeaderClassNames,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassName,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Card.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("./components/Card/index"), exports);
 //# sourceMappingURL=Card.js.map

package/lib-commonjs/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Card.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Card.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Card/index';\n"],"sourceRoot":"../src/"}