@fluentui/react-card 9.0.0-beta.4 → 9.0.0-beta.41

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

@@ -3,42 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooterStyles = exports.cardFooterClassName = void 0;
-
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
-
-exports.cardFooterClassName = 'fui-CardFooter';
+exports.useCardFooterStyles_unstable = exports.cardFooterClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
-
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "rmohyg": "fsbu5mz"
+exports.cardFooterClassNames = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action'
+};
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    i8kkvl: "f4akndk",
+    Belr9w4: "fe5j3v"
   },
-  "action": {
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"]
+  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
+ * Apply styling to the CardFooter slots based on the state.
  */
-
-
-const useCardFooterStyles = state => {
+const useCardFooterStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.cardFooterClassName, styles.root, state.root.className);
-
+  state.root.className = react_1.mergeClasses(exports.cardFooterClassNames.root, 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(exports.cardFooterClassNames.action, 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,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAb,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,IAAN,CAAW,SAA1D,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,MAApB,EAA4B,KAAK,CAAC,MAAN,CAAa,SAAzC,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;AAGaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAS1B;AAEF;;;AAGO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGJ,oBAAY,CAACJ,4BAAoB,CAACC,IAAI,EAAEM,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAACJ,MAAM,EAAE;IAChBI,KAAK,CAACJ,MAAM,CAACM,SAAS,GAAGJ,oBAAY,CAACJ,4BAAoB,CAACE,MAAM,EAAEK,MAAM,CAACL,MAAM,EAAEI,KAAK,CAACJ,MAAM,CAACM,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC;AATYN,oCAA4B","names":["exports","root","action","useStyles","react_1","useCardFooterStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\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(cardFooterClassNames.root, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -4,23 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardHeader = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
-
 const renderCardHeader_1 = /*#__PURE__*/require("./renderCardHeader");
-
 const useCardHeaderStyles_1 = /*#__PURE__*/require("./useCardHeaderStyles");
 /**
  * Component to render an image, text and an action in a Card component.
  */
-
-
 exports.CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardHeader_1.useCardHeader(props, ref);
-  useCardHeaderStyles_1.useCardHeaderStyles(state);
-  return renderCardHeader_1.renderCardHeader(state);
+  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,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,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AACA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,kBAAU,gBAAyCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,sCAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDG,kDAA4B,CAACF,KAAK,CAAC;EACnC,OAAOG,4CAAyB,CAACH,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFL,kBAAU,CAACS,WAAW,GAAG,YAAY","names":["exports","React","forwardRef","props","ref","state","useCardHeader_1","useCardHeaderStyles_1","renderCardHeader_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx"],"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"]}

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

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

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./CardHeader"), exports);
-
 tslib_1.__exportStar(require("./CardHeader.types"), exports);
-
 tslib_1.__exportStar(require("./renderCardHeader"), exports);
-
 tslib_1.__exportStar(require("./useCardHeader"), exports);
-
 tslib_1.__exportStar(require("./useCardHeaderStyles"), exports);
 //# sourceMappingURL=index.js.map

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,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/index.ts"],"sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles';\n"]}

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

@@ -3,25 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCardHeader = void 0;
-
+exports.renderCardHeader_unstable = void 0;
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
 /**
- * Render the final JSX of CardHeader
+ * Render the final JSX of CardHeader.
  */
-
-
-const renderCardHeader = state => {
+const renderCardHeader_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, useCardHeader_1.cardHeaderShorthandProps);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), React.createElement(slots.image, Object.assign({}, slotProps.image)), React.createElement(slots.content, Object.assign({}, slotProps.content), React.createElement(slots.header, Object.assign({}, slotProps.header)), React.createElement(slots.description, Object.assign({}, slotProps.description))), React.createElement(slots.action, Object.assign({}, slotProps.action)));
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.image && React.createElement(slots.image, {
+    ...slotProps.image
+  }), React.createElement(slots.header, {
+    ...slotProps.header
+  }), slots.description && 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,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,WAAf,CAAlB,CAFF,CAFF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CANF,CADF;AAUD,CAbM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACpDF,oBAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,EACrCN,KAAK,CAACO,WAAW,IAAIJ,oBAACH,KAAK,CAACO,WAAW;IAAA,GAAKN,SAAS,CAACM;EAAW,EAAI,EACrEP,KAAK,CAACQ,MAAM,IAAIL,oBAACH,KAAK,CAACQ,MAAM;IAAA,GAAKP,SAAS,CAACO;EAAM,EAAI,CAC5C;AAEjB,CAAC;AAXYC,iCAAyB","names":["renderCardHeader_unstable","state","slots","slotProps","react_utilities_1","React","root","image","header","description","action","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx"],"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 && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -3,57 +3,66 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeader = exports.cardHeaderShorthandProps = void 0;
-
+exports.useCardHeader_unstable = void 0;
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-exports.cardHeaderShorthandProps = ['root', 'image', 'content', 'header', 'description', 'action'];
+const CardContext_1 = /*#__PURE__*/require("../Card/CardContext");
+const useCardHeaderStyles_1 = /*#__PURE__*/require("./useCardHeaderStyles");
 /**
  * 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
  */
-
-const useCardHeader = (props, ref) => {
+const useCardHeader_unstable = (props, ref) => {
   const {
     image,
-    content,
     header,
     description,
     action
   } = props;
+  const {
+    selectableA11yProps: {
+      referenceId,
+      setReferenceId
+    }
+  } = CardContext_1.useCardContext_unstable();
+  const headerRef = React.useRef(null);
+  const generatedId = react_utilities_1.useId(useCardHeaderStyles_1.cardHeaderClassNames.header, referenceId);
+  React.useEffect(() => {
+    if (header && headerRef.current) {
+      const {
+        id
+      } = headerRef.current;
+      setReferenceId(id ? id : generatedId);
+    }
+  }, [header, setReferenceId, generatedId]);
   return {
     components: {
       root: 'div',
       image: 'div',
-      content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'div',
+      description: 'div',
       action: 'div'
     },
     root: react_utilities_1.getNativeElementProps('div', {
       ref,
       ...props
     }),
-    image: react_utilities_1.resolveShorthand(image, {
-      required: true
-    }),
-    content: react_utilities_1.resolveShorthand(content || {}),
+    image: react_utilities_1.resolveShorthand(image),
     header: react_utilities_1.resolveShorthand(header, {
-      required: true
-    }),
-    description: react_utilities_1.resolveShorthand(description, {
-      required: true
+      required: true,
+      defaultProps: {
+        ref: headerRef,
+        id: referenceId
+      }
     }),
+    description: react_utilities_1.resolveShorthand(description),
     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,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,wBAAA,GAAyD,CACpE,MADoE,EAEpE,OAFoE,EAGpE,SAHoE,EAIpE,QAJoE,EAKpE,aALoE,EAMpE,QANoE,CAAzD;AASb;;;;;;;;AAQG;;AACI,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,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,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAE,GAAGL,KAAK;EAEpD,MAAM;IACJM,mBAAmB,EAAE;MAAEC,WAAW;MAAEC;IAAc;EAAE,CACrD,GAAGC,qCAAuB,EAAE;EAC7B,MAAMC,SAAS,GAAGC,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAMC,WAAW,GAAGC,uBAAK,CAACC,0CAAoB,CAACZ,MAAM,EAAEI,WAAW,CAAC;EAEnEI,KAAK,CAACK,SAAS,CAAC,MAAK;IACnB,IAAIb,MAAM,IAAIO,SAAS,CAACO,OAAO,EAAE;MAC/B,MAAM;QAAEC;MAAE,CAAE,GAAGR,SAAS,CAACO,OAAO;MAEhCT,cAAc,CAACU,EAAE,GAAGA,EAAE,GAAGL,WAAW,CAAC;;EAEzC,CAAC,EAAE,CAACV,MAAM,EAAEK,cAAc,EAAEK,WAAW,CAAC,CAAC;EAEzC,OAAO;IACLM,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXlB,KAAK,EAAE,KAAK;MACZC,MAAM,EAAE,KAAK;MACbC,WAAW,EAAE,KAAK;MAClBC,MAAM,EAAE;KACT;IAEDe,IAAI,EAAEN,uCAAqB,CAAC,KAAK,EAAE;MACjCb,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,KAAK,EAAEY,kCAAgB,CAACZ,KAAK,CAAC;IAC9BC,MAAM,EAAEW,kCAAgB,CAACX,MAAM,EAAE;MAC/BkB,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZrB,GAAG,EAAES,SAAS;QACdQ,EAAE,EAAEX;;KAEP,CAAC;IACFH,WAAW,EAAEU,kCAAgB,CAACV,WAAW,CAAC;IAC1CC,MAAM,EAAES,kCAAgB,CAACT,MAAM;GAChC;AACH,CAAC;AA1CYkB,8BAAsB","names":["useCardHeader_unstable","props","ref","image","header","description","action","selectableA11yProps","referenceId","setReferenceId","CardContext_1","headerRef","React","useRef","generatedId","react_utilities_1","useCardHeaderStyles_1","useEffect","current","id","components","root","required","defaultProps","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles';\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, header, description, action } = props;\n\n  const {\n    selectableA11yProps: { referenceId, setReferenceId },\n  } = useCardContext_unstable();\n  const headerRef = React.useRef<HTMLDivElement>(null);\n\n  const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n  React.useEffect(() => {\n    if (header && headerRef.current) {\n      const { id } = headerRef.current;\n\n      setReferenceId(id ? id : generatedId);\n    }\n  }, [header, setReferenceId, generatedId]);\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'div',\n      description: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: resolveShorthand(header, {\n      required: true,\n      defaultProps: {\n        ref: headerRef,\n        id: referenceId,\n      },\n    }),\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"]}

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

@@ -3,64 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeaderStyles = exports.cardHeaderClassName = void 0;
-
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
-
-exports.cardHeaderClassName = 'fui-CardHeader';
+exports.useCardHeaderStyles_unstable = exports.cardHeaderCSSVars = exports.cardHeaderClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
-
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "Bt984gj": "f122n59",
-    "rmohyg": "fsbu5mz",
-    "Bqenvij": "f1d2rq10"
+exports.cardHeaderClassNames = {
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action'
+};
+/**
+ * CSS variable names used internally for uniform styling in CardHeader.
+ */
+exports.cardHeaderCSSVars = {
+  cardHeaderGapVar: '--fui-CardHeader--gap'
+};
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    Bkc6ea2: "fkufhic",
+    mc9l5x: "f13qh94s",
+    t4k1zu: "f8a668j",
+    v29qe6: "f4h39za",
+    Bt984gj: "f122n59"
+  },
+  image: {
+    mc9l5x: "ftuwxu6",
+    t21cq0: ["fql5097", "f6yss9k"],
+    Br312pm: "fwpfdsa",
+    Ijaq50: "fldnz9j"
+  },
+  header: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "f16hsg94"
   },
-  "image": {
-    "Bf4jedk": "f17fgpbq",
-    "sshi5w": "f1pha7fy",
-    "B2u0y6b": "f44c6la",
-    "Bxyxcbc": "f17bzqcb",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "uw7vt1": "fgn7ydb",
-    "Dzuj6k": "f1jevvm1",
-    "zsb7ef": "fqihwjc",
-    "f2epyl": "f6x1sus"
+  description: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "faunodf"
   },
-  "textContainer": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bh6795r": "fqerorx",
-    "Bqenvij": "fwk23hs",
-    "Bn3e79g": "f1con4nn"
+  action: {
+    Frg6f3: ["f6yss9k", "fql5097"],
+    Br312pm: "fis13di",
+    Ijaq50: "fldnz9j"
   }
 }, {
-  "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: [".fkufhic{--fui-CardHeader--gap:12px;}", ".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".f4h39za{grid-auto-rows:1fr min-content;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
 });
 /**
- * Apply styling to the CardHeader slots based on the state
+ * Apply styling to the CardHeader slots based on the state.
  */
-
-
-const useCardHeaderStyles = state => {
+const useCardHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.cardHeaderClassName, styles.root, state.root.className);
-
+  state.root.className = react_1.mergeClasses(exports.cardHeaderClassNames.root, 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(exports.cardHeaderClassNames.image, styles.image, state.image.className);
   }
-
-  if (state.content) {
-    state.content.className = react_make_styles_1.mergeClasses(styles.textContainer, state.content.className);
+  if (state.header) {
+    state.header.className = react_1.mergeClasses(exports.cardHeaderClassNames.header, styles.header, state.header.className);
+  }
+  if (state.description) {
+    state.description.className = react_1.mergeClasses(exports.cardHeaderClassNames.description, styles.description, state.description.className);
+  }
+  if (state.action) {
+    state.action.className = react_1.mergeClasses(exports.cardHeaderClassNames.action, styles.action, state.action.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,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAb,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,IAAN,CAAW,SAA1D,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,KAApB,EAA2B,KAAK,CAAC,KAAN,CAAY,SAAvC,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,aAApB,EAAmC,KAAK,CAAC,OAAN,CAAc,SAAjD,CAA1B;AACD;;AAED,SAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;AAGaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE,wBAAwB;EAChCC,WAAW,EAAE,6BAA6B;EAC1CC,MAAM,EAAE;CACT;AAED;;;AAGaL,yBAAiB,GAAG;EAC/BM,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA2B1B;AAEF;;;AAGO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGJ,oBAAY,CAACR,4BAAoB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAACR,KAAK,EAAE;IACfQ,KAAK,CAACR,KAAK,CAACU,SAAS,GAAGJ,oBAAY,CAACR,4BAAoB,CAACE,KAAK,EAAES,MAAM,CAACT,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;;EAGvG,IAAIF,KAAK,CAACP,MAAM,EAAE;IAChBO,KAAK,CAACP,MAAM,CAACS,SAAS,GAAGJ,oBAAY,CAACR,4BAAoB,CAACG,MAAM,EAAEQ,MAAM,CAACR,MAAM,EAAEO,KAAK,CAACP,MAAM,CAACS,SAAS,CAAC;;EAG3G,IAAIF,KAAK,CAACN,WAAW,EAAE;IACrBM,KAAK,CAACN,WAAW,CAACQ,SAAS,GAAGJ,oBAAY,CACxCR,4BAAoB,CAACI,WAAW,EAChCO,MAAM,CAACP,WAAW,EAClBM,KAAK,CAACN,WAAW,CAACQ,SAAS,CAC5B;;EAGH,IAAIF,KAAK,CAACL,MAAM,EAAE;IAChBK,KAAK,CAACL,MAAM,CAACO,SAAS,GAAGJ,oBAAY,CAACR,4BAAoB,CAACK,MAAM,EAAEM,MAAM,CAACN,MAAM,EAAEK,KAAK,CAACL,MAAM,CAACO,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC;AAzBYV,oCAA4B","names":["exports","root","image","header","description","action","cardHeaderGapVar","useStyles","react_1","useCardHeaderStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n  cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n    gridAutoRows: '1fr min-content',\n    alignItems: 'center',\n  },\n  image: {\n    display: 'inline-flex',\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\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.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      cardHeaderClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -4,23 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardPreview = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCardPreview_1 = /*#__PURE__*/require("./useCardPreview");
-
 const renderCardPreview_1 = /*#__PURE__*/require("./renderCardPreview");
-
 const useCardPreviewStyles_1 = /*#__PURE__*/require("./useCardPreviewStyles");
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
-
-
 exports.CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardPreview_1.useCardPreview(props, ref);
-  useCardPreviewStyles_1.useCardPreviewStyles(state);
-  return renderCardPreview_1.renderCardPreview(state);
+  const state = useCardPreview_1.useCardPreview_unstable(props, ref);
+  useCardPreviewStyles_1.useCardPreviewStyles_unstable(state);
+  return renderCardPreview_1.renderCardPreview_unstable(state);
 });
 exports.CardPreview.displayName = 'CardPreview';
 //# sourceMappingURL=CardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,gBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,GAAtB,CAAd;AAEA,EAAA,sBAAA,CAAA,oBAAA,CAAqB,KAArB;AACA,SAAO,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useCardPreview_1","useCardPreviewStyles_1","renderCardPreview_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx"],"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"]}

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

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

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./CardPreview"), exports);
-
 tslib_1.__exportStar(require("./CardPreview.types"), exports);
-
 tslib_1.__exportStar(require("./renderCardPreview"), exports);
-
 tslib_1.__exportStar(require("./useCardPreview"), exports);
-
 tslib_1.__exportStar(require("./useCardPreviewStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/index.ts"],"sourcesContent":["export * from './CardPreview';\nexport * from './CardPreview.types';\nexport * from './renderCardPreview';\nexport * from './useCardPreview';\nexport * from './useCardPreviewStyles';\n"]}

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

@@ -3,25 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCardPreview = void 0;
-
+exports.renderCardPreview_unstable = void 0;
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const useCardPreview_1 = /*#__PURE__*/require("./useCardPreview");
 /**
- * Render the final JSX of CardPreview
+ * Render the final JSX of CardPreview.
  */
-
-
-const renderCardPreview = state => {
+const renderCardPreview_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, useCardPreview_1.cardPreviewShorthandProps);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children, React.createElement(slots.logo, Object.assign({}, slotProps.logo)));
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slotProps.root.children, slots.logo && React.createElement(slots.logo, {
+    ...slotProps.logo
+  }));
 };
-
-exports.renderCardPreview = renderCardPreview;
+exports.renderCardPreview_unstable = renderCardPreview_unstable;
 //# sourceMappingURL=renderCardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,EAAkC,gBAAA,CAAA,yBAAlC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BH,SAAS,CAACG,IAAI,CAACC,QAAQ,EACvBL,KAAK,CAACM,IAAI,IAAIH,oBAACH,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACtC;AAEjB,CAAC;AATYC,kCAA0B","names":["renderCardPreview_unstable","state","slots","slotProps","react_utilities_1","React","root","children","logo","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx"],"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"]}