@fluentui/react-card 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.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;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,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,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"names":["React","require","useCardFooter_1","renderCardFooter_1","useCardFooterStyles_1","exports","CardFooter","forwardRef","props","ref","state","useCardFooter_unstable","useCardFooterStyles_unstable","renderCardFooter_unstable","displayName"],"sources":["../src/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n  const state = useCardFooter_unstable(props, ref);\n\n  useCardFooterStyles_unstable(state);\n  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,eAAA,gBAAAD,OAAA;AACA,MAAAE,kBAAA,gBAAAF,OAAA;AACA,MAAAG,qBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,UAAU,gBAAyCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGR,eAAA,CAAAS,sBAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDL,qBAAA,CAAAQ,4BAA4B,CAACF,KAAK,CAAC;EACnC,OAAOP,kBAAA,CAAAU,yBAAyB,CAACH,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFL,OAAA,CAAAC,UAAU,CAACQ,WAAW,GAAG,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-card/src/components/CardFooter/CardFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardFooter component.\n */\nexport type CardFooterSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Container that renders on the far end of the footer, used for action buttons.\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * CardFooter component props.\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/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,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-card/src/components/CardFooter/index.ts"],"sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,2BAAAC,OAAA"}

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

@@ -3,27 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCardFooter = void 0;
-
-var tslib_1 = /*#__PURE__*/require("tslib");
-
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
+exports.renderCardFooter_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Render the final JSX of CardFooter
+ * Render the final JSX of CardFooter.
  */
-
-
-var renderCardFooter = function (state) {
-  var _a = react_utilities_1.getSlots(state, useCardFooter_1.cardFooterShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), slotProps.root.children, React.createElement(slots.action, tslib_1.__assign({}, slotProps.action)));
+const renderCardFooter_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slotProps.root.children, slots.action && React.createElement(slots.action, {
+    ...slotProps.action
+  }));
 };
-
-exports.renderCardFooter = renderCardFooter;
+exports.renderCardFooter_unstable = renderCardFooter_unstable;
 //# sourceMappingURL=renderCardFooter.js.map

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,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,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,SAAS,CAAC,IAAV,CAAe,QADlB,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,"names":["React","require","react_utilities_1","renderCardFooter_unstable","state","slots","slotProps","getSlots","createElement","root","children","action","exports"],"sources":["../src/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BH,SAAS,CAACG,IAAI,CAACC,QAAQ,EACvBL,KAAK,CAACM,MAAM,IAAIX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,CAC5C;AAEjB,CAAC;AATYC,OAAA,CAAAT,yBAAyB,GAAAA,yBAAA"}

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

@@ -3,40 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooter = exports.cardFooterShorthandProps = void 0;
-
-var tslib_1 = /*#__PURE__*/require("tslib");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-
-exports.cardFooterShorthandProps = ['root', 'action'];
+exports.useCardFooter_unstable = void 0;
+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
  */
-
-var useCardFooter = function (props, ref) {
-  var action = props.action;
+const useCardFooter_unstable = (props, ref) => {
+  const {
+    action
+  } = props;
   return {
     components: {
       root: 'div',
       action: 'div'
     },
-    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({
-      ref: ref
-    }, props)),
+    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,GAAyD,CAAC,MAAD,EAAS,QAAT,CAAzD;AAEb;;;;;;;;AAQG;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAoD;AACvE,MAAA,MAAM,GAAK,KAAK,CAAV,MAAN;AAER,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,EAA2B,OAAA,CAAA,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAA3B,CAND;AAUL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAVH,GAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"names":["react_utilities_1","require","useCardFooter_unstable","props","ref","action","components","root","getNativeElementProps","resolveShorthand","exports"],"sources":["../src/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts"],"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"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAGA;;;;;;;;;AASO,MAAMC,sBAAsB,GAAGA,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC;EAAM,CAAE,GAAGF,KAAK;EAExB,OAAO;IACLG,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,MAAM,EAAE;KACT;IAEDE,IAAI,EAAEP,iBAAA,CAAAQ,qBAAqB,CAAC,KAAK,EAAE;MACjCJ,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,MAAM,EAAEL,iBAAA,CAAAS,gBAAgB,CAACJ,MAAM;GAChC;AACH,CAAC;AAfYK,OAAA,CAAAR,sBAAsB,GAAAA,sBAAA"}

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

@@ -3,41 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooterStyles = void 0;
-
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+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.
  */
-
-
-var 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.
  */
-
-
-var useCardFooterStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.root.className);
-
+const useCardFooterStyles_unstable = state => {
+  const styles = useStyles();
+  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,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,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,MAApB,EAA4B,KAAK,CAAC,MAAN,CAAa,SAAzC,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"names":["react_1","require","exports","cardFooterClassNames","root","action","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","Frg6f3","d","useCardFooterStyles_unstable","state","styles","className","mergeClasses"],"sources":["../src/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"],"mappings":";;;;;;AACA,MAAAA,OAAA,gBAAAC,OAAA;AAGA;;;AAGaC,OAAA,CAAAC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAGN,OAAA,CAAAO,QAAU;EAAAH,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAN,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAS1B;AAEF;;;AAGO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGV,SAAS,EAAE;EAC1BS,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGjB,OAAA,CAAAkB,YAAY,CAAChB,OAAA,CAAAC,oBAAoB,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAACV,MAAM,EAAE;IAChBU,KAAK,CAACV,MAAM,CAACY,SAAS,GAAGjB,OAAA,CAAAkB,YAAY,CAAChB,OAAA,CAAAC,oBAAoB,CAACE,MAAM,EAAEW,MAAM,CAACX,MAAM,EAAEU,KAAK,CAACV,MAAM,CAACY,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC;AATYb,OAAA,CAAAY,4BAA4B,GAAAA,4BAAA"}

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

@@ -4,23 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardHeader = void 0;
-
-var React = /*#__PURE__*/require("react");
-
-var useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
-
-var renderCardHeader_1 = /*#__PURE__*/require("./renderCardHeader");
-
-var useCardHeaderStyles_1 = /*#__PURE__*/require("./useCardHeaderStyles");
+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(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;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,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,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"names":["React","require","useCardHeader_1","renderCardHeader_1","useCardHeaderStyles_1","exports","CardHeader","forwardRef","props","ref","state","useCardHeader_unstable","useCardHeaderStyles_unstable","renderCardHeader_unstable","displayName"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,eAAA,gBAAAD,OAAA;AACA,MAAAE,kBAAA,gBAAAF,OAAA;AACA,MAAAG,qBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,UAAU,gBAAyCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGR,eAAA,CAAAS,sBAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDL,qBAAA,CAAAQ,4BAA4B,CAACF,KAAK,CAAC;EACnC,OAAOP,kBAAA,CAAAU,yBAAyB,CAACH,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFL,OAAA,CAAAC,UAAU,CAACQ,WAAW,GAAG,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-card/src/components/CardHeader/CardHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardHeader component.\n */\nexport type CardHeaderSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Element used to render an image or avatar related to the card.\n   */\n  image: Slot<'div', 'img'>;\n\n  /**\n   * Element used to render the main header title.\n   */\n  header: Slot<'div'>;\n\n  /**\n   * Element used to render short descriptions related to the title.\n   */\n  description: Slot<'div'>;\n\n  /**\n   * Container that renders on the far end of the footer, used for action buttons.\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * CardHeader component props.\n */\nexport type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;\n\n/**\n * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n"],"mappings":""}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var tslib_1 = /*#__PURE__*/require("tslib");
-
+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,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,2BAAAC,OAAA"}

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

@@ -3,27 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCardHeader = void 0;
-
-var tslib_1 = /*#__PURE__*/require("tslib");
-
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var useCardHeader_1 = /*#__PURE__*/require("./useCardHeader");
+exports.renderCardHeader_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Render the final JSX of CardHeader
+ * Render the final JSX of CardHeader.
  */
-
-
-var renderCardHeader = function (state) {
-  var _a = react_utilities_1.getSlots(state, useCardHeader_1.cardHeaderShorthandProps),
-      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
+  }, 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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,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,"names":["React","require","react_utilities_1","renderCardHeader_unstable","state","slots","slotProps","getSlots","createElement","root","image","header","description","action","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACpDV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,EACrCN,KAAK,CAACO,WAAW,IAAIZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,WAAW;IAAA,GAAKN,SAAS,CAACM;EAAW,EAAI,EACrEP,KAAK,CAACQ,MAAM,IAAIb,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACQ,MAAM;IAAA,GAAKP,SAAS,CAACO;EAAM,EAAI,CAC5C;AAEjB,CAAC;AAXYC,OAAA,CAAAX,yBAAyB,GAAAA,yBAAA"}

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

@@ -3,56 +3,66 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeader = exports.cardHeaderShorthandProps = void 0;
-
-var tslib_1 = /*#__PURE__*/require("tslib");
-
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-exports.cardHeaderShorthandProps = ['root', 'image', 'content', 'header', 'description', 'action'];
+exports.useCardHeader_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+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
  */
-
-var useCardHeader = function (props, ref) {
-  var image = props.image,
-      content = props.content,
-      header = props.header,
-      description = props.description,
-      action = props.action;
+const useCardHeader_unstable = (props, ref) => {
+  const {
+    image,
+    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', tslib_1.__assign({
-      ref: ref
-    }, props)),
-    image: react_utilities_1.resolveShorthand(image, {
-      required: true
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref,
+      ...props
     }),
-    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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,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,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAoD;AACvE,MAAA,KAAK,GAA2C,KAAK,CAAhD,KAAL;AAAA,MAAO,OAAO,GAAkC,KAAK,CAAvC,OAAd;AAAA,MAAgB,MAAM,GAA0B,KAAK,CAA/B,MAAtB;AAAA,MAAwB,WAAW,GAAa,KAAK,CAAlB,WAAnC;AAAA,MAAqC,MAAM,GAAK,KAAK,CAAV,MAA3C;AAER,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,EAA2B,OAAA,CAAA,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAA3B,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,"names":["React","require","react_utilities_1","CardContext_1","useCardHeaderStyles_1","useCardHeader_unstable","props","ref","image","header","description","action","selectableA11yProps","referenceId","setReferenceId","useCardContext_unstable","headerRef","useRef","generatedId","useId","cardHeaderClassNames","useEffect","current","id","components","root","getNativeElementProps","resolveShorthand","required","defaultProps","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,aAAA,gBAAAF,OAAA;AACA,MAAAG,qBAAA,gBAAAH,OAAA;AAEA;;;;;;;;;AASO,MAAMI,sBAAsB,GAAGA,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,GAAGX,aAAA,CAAAY,uBAAuB,EAAE;EAC7B,MAAMC,SAAS,GAAGhB,KAAK,CAACiB,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAMC,WAAW,GAAGhB,iBAAA,CAAAiB,KAAK,CAACf,qBAAA,CAAAgB,oBAAoB,CAACX,MAAM,EAAEI,WAAW,CAAC;EAEnEb,KAAK,CAACqB,SAAS,CAAC,MAAK;IACnB,IAAIZ,MAAM,IAAIO,SAAS,CAACM,OAAO,EAAE;MAC/B,MAAM;QAAEC;MAAE,CAAE,GAAGP,SAAS,CAACM,OAAO;MAEhCR,cAAc,CAACS,EAAE,GAAGA,EAAE,GAAGL,WAAW,CAAC;;EAEzC,CAAC,EAAE,CAACT,MAAM,EAAEK,cAAc,EAAEI,WAAW,CAAC,CAAC;EAEzC,OAAO;IACLM,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXjB,KAAK,EAAE,KAAK;MACZC,MAAM,EAAE,KAAK;MACbC,WAAW,EAAE,KAAK;MAClBC,MAAM,EAAE;KACT;IAEDc,IAAI,EAAEvB,iBAAA,CAAAwB,qBAAqB,CAAC,KAAK,EAAE;MACjCnB,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,KAAK,EAAEN,iBAAA,CAAAyB,gBAAgB,CAACnB,KAAK,CAAC;IAC9BC,MAAM,EAAEP,iBAAA,CAAAyB,gBAAgB,CAAClB,MAAM,EAAE;MAC/BmB,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZtB,GAAG,EAAES,SAAS;QACdO,EAAE,EAAEV;;KAEP,CAAC;IACFH,WAAW,EAAER,iBAAA,CAAAyB,gBAAgB,CAACjB,WAAW,CAAC;IAC1CC,MAAM,EAAET,iBAAA,CAAAyB,gBAAgB,CAAChB,MAAM;GAChC;AACH,CAAC;AA1CYmB,OAAA,CAAAzB,sBAAsB,GAAAA,sBAAA"}