@fluentui/react-card 0.0.0-nightlyf8be6a7c6520220106.1 → 0.0.0-nightlyff78d1e27a20220217.1

package/lib/components/Card/useCardStyles.js

@@ -1,4 +1,5 @@
-import { shorthands, __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 import { cardPreviewClassName } from '../CardPreview/index';
 export const cardClassName = 'fui-Card';
 /**
@@ -7,26 +8,20 @@ export const cardClassName = 'fui-Card';
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
+    "mc9l5x": "ftgm304",
     "B68tc82": "f1p9o1ba",
     "Bmxbyg5": "f1sil6mw",
     "E5pizo": "f1whvlc6",
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
-    "z8tnut": "f1kcqot9",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fpe6lb7",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "i8kkvl": "f4akndk",
-    "Belr9w4": "fe5j3v",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
     "B7oj6ja": ["f1jar5jt", "fyu767a"],
     "Btl43ni": ["fyu767a", "f1jar5jt"],
-    "Bt4kzjz": ["fwanz6y", "f1sdy22h"],
-    "B1ou843": ["f1sdy22h", "fwanz6y"],
-    "Bx3mhbb": "f12h22a6"
+    "Ecqjvq": "f70or3y",
+    "B39syqp": ["f1s27jks", "f1x7x6se"],
+    "m3o775": "f1q2lvbs",
+    "I0kkcn": ["f1x7x6se", "f1s27jks"]
   },
   "interactive": {
     "Bceei9c": "f1k6fduh",
@@ -34,7 +29,7 @@ const useStyles = /*#__PURE__*/__styles({
     "ecr2s2": "fb40n2d"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fwanz6y>.fui-CardPreview{margin-left:-12px;}", ".f1sdy22h>.fui-CardPreview{margin-right:-12px;}", ".f12h22a6>.fui-CardPreview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
+  "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}"],
   "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
   "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
 });
@@ -43,7 +38,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useCardStyles = state => {
+export const useCardStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardClassName, styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,6BAArD;AACA,SAAS,oBAAT,QAAqC,sBAArC;AAGA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVwB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CAjBM","sourceRoot":""}
+{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,oBAAT,QAAqC,sBAArC;AAGA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA6BA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVwB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CAjBM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassName } from '../CardPreview/index';\nimport type { CardState } from './Card.types';\n\nexport const cardClassName = 'fui-Card';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'block',\n    ...shorthands.overflow('hidden'),\n\n    boxShadow: tokens.shadow4,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n\n    // Size: medium\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    [`> *:not(.${cardPreviewClassName})`]: {\n      // Size: medium\n      ...shorthands.margin('12px'),\n    },\n  },\n\n  interactive: {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    cardClassName,\n    styles.root,\n    (state.root.onClick ||\n      state.root.onMouseUp ||\n      state.root.onMouseDown ||\n      state.root.onPointerUp ||\n      state.root.onPointerDown ||\n      state.root.onTouchStart ||\n      state.root.onTouchEnd) &&\n      styles.interactive,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardFooter/CardFooter.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCardFooter } from './useCardFooter';
-import { renderCardFooter } from './renderCardFooter';
-import { useCardFooterStyles } from './useCardFooterStyles';
+import { useCardFooter_unstable } from './useCardFooter';
+import { renderCardFooter_unstable } from './renderCardFooter';
+import { useCardFooterStyles_unstable } from './useCardFooterStyles';
 /**
  * Component to render Button actions in a Card component.
  */
 
 export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardFooter(props, ref);
-  useCardFooterStyles(state);
-  return renderCardFooter(state);
+  const state = useCardFooter_unstable(props, ref);
+  useCardFooterStyles_unstable(state);
+  return renderCardFooter_unstable(state);
 });
 CardFooter.displayName = 'CardFooter';
 //# sourceMappingURL=CardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","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"],"sourceRoot":"../src/"}

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

@@ -1,7 +1,7 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type CardFooterSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    action?: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
+    action?: Slot<'div'>;
 };
 /**
  * CardFooter props

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CardFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"]}

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

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

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { cardFooterShorthandProps } from './useCardFooter';
 /**
  * Render the final JSX of CardFooter
  */
 
-export const renderCardFooter = state => {
+export const renderCardFooter_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, cardFooterShorthandProps);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slotProps.root.children, /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  }, slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
   }));
 };
 //# sourceMappingURL=renderCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,wBAAT,QAAyC,iBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/CardFooter/renderCardFooter.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,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: Array<keyof CardFooterSlots>;
+import type { CardFooterProps, CardFooterState } from './CardFooter.types';
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
  */
-export declare const useCardFooter: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;
+export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;

package/lib/components/CardFooter/useCardFooter.js

@@ -1,20 +1,15 @@
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-export const cardFooterShorthandProps = ['root', 'action'];
 /**
  * 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
  */
 
-export const useCardFooter = (props, ref) => {
+export const useCardFooter_unstable = (props, ref) => {
   const {
     action
   } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAiC,CAAC,MAAD,EAAS,QAAT,CAA/D;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,aAAa,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AACpG,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAVnB,GAAP;AAYD,CAfM","sourceRoot":""}
+{"version":3,"sources":["components/CardFooter/useCardFooter.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;AAAF,MAAa,KAAnB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAVnB,GAAP;AAYD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,4 +3,4 @@ export declare const cardFooterClassName = "fui-CardFooter";
 /**
  * Apply styling to the CardFooter slots based on the state
  */
-export declare const useCardFooterStyles: (state: CardFooterState) => CardFooterState;
+export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 export const cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
@@ -22,7 +22,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useCardFooterStyles = state => {
+export const useCardFooterStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,6BAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,MAAM,CAAC,MAAR,EAAgB,KAAK,CAAC,MAAN,CAAa,SAA7B,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,MAAM,CAAC,MAAR,EAAgB,KAAK,CAAC,MAAN,CAAa,SAA7B,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterState } from './CardFooter.types';\n\nexport const cardFooterClassName = 'fui-CardFooter';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardHeader/CardHeader.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCardHeader } from './useCardHeader';
-import { renderCardHeader } from './renderCardHeader';
-import { useCardHeaderStyles } from './useCardHeaderStyles';
+import { useCardHeader_unstable } from './useCardHeader';
+import { renderCardHeader_unstable } from './renderCardHeader';
+import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
 /**
  * Component to render an image, text and an action in a Card component.
  */
 
 export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardHeader(props, ref);
-  useCardHeaderStyles(state);
-  return renderCardHeader(state);
+  const state = useCardHeader_unstable(props, ref);
+  useCardHeaderStyles_unstable(state);
+  return renderCardHeader_unstable(state);
 });
 CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=CardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useCardHeader_unstable(props, ref);\n\n  useCardHeaderStyles_unstable(state);\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"sourceRoot":"../src/"}

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

@@ -1,16 +1,16 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type CardHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    image: IntrinsicShorthandProps<'div'>;
-    content?: IntrinsicShorthandProps<'div'>;
-    header: IntrinsicShorthandProps<'span'>;
-    description: IntrinsicShorthandProps<'span'>;
-    action?: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
+    image: Slot<'div'>;
+    content?: Slot<'div'>;
+    header: Slot<'span'>;
+    description: Slot<'span'>;
+    action?: Slot<'div'>;
 };
 /**
  * CardHeader props
  */
-export declare type CardHeaderProps = ComponentProps<CardHeaderSlots>;
+export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 /**
  * State used in rendering CardHeader
  */

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.types.js","sourceRoot":"","sources":["../../../src/components/CardHeader/CardHeader.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"CardHeader.types.js","sourceRoot":"../src/","sources":["components/CardHeader/CardHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardHeaderSlots = {\n  root: Slot<'div'>;\n  image: Slot<'div'>;\n  content?: Slot<'div'>;\n  header: Slot<'span'>;\n  description: Slot<'span'>;\n  action?: Slot<'div'>;\n};\n\n/**\n * CardHeader props\n */\nexport type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;\n\n/**\n * State used in rendering CardHeader\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CardHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles';\n"]}

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

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

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { cardHeaderShorthandProps } from './useCardHeader';
 /**
  * Render the final JSX of CardHeader
  */
 
-export const renderCardHeader = state => {
+export const renderCardHeader_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, cardHeaderShorthandProps);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
-  }), /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }), slots.content && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
   }, /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
   }), /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
-  })), /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  })), 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,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iBAAzC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,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,CAFF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,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,13 +1,12 @@
 import * as React from 'react';
-import type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader.types';
-export declare const cardHeaderShorthandProps: Array<keyof CardHeaderSlots>;
+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
  */
-export declare const useCardHeader: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;
+export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;

package/lib/components/CardHeader/useCardHeader.js

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-export const cardHeaderShorthandProps = ['root', 'image', 'content', 'header', 'description', 'action'];
 /**
  * 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
  */
 
-export const useCardHeader = (props, ref) => {
+export const useCardHeader_unstable = (props, ref) => {
   const {
     image,
     content,

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,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA,OAAO,MAAM,wBAAwB,GAAiC,CACpE,MADoE,EAEpE,OAFoE,EAGpE,SAHoE,EAIpE,QAJoE,EAKpE,aALoE,EAMpE,QANoE,CAA/D;AASP;;;;;;;;AAQG;;AACH,OAAO,MAAM,aAAa,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AACpG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,KAAK,CAAC,QAJJ;AAKV,MAAA,WAAW,EAAE,KAAK,CAAC,QALT;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CAVtB;AAcL,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAR,CAdlB;AAiBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAO,IAAI,EAAZ,CAjBpB;AAkBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAT,CAlBnB;AAqBL,IAAA,WAAW,EAAE,gBAAgB,CAAC,WAAD,EAAc;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAAd,CArBxB;AAwBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAxBnB,GAAP;AA0BD,CA7BM","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;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,KAAK,CAAC,QAJJ;AAKV,MAAA,WAAW,EAAE,KAAK,CAAC,QALT;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CAVtB;AAcL,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAR,CAdlB;AAiBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAO,IAAI,EAAZ,CAjBpB;AAkBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAT,CAlBnB;AAqBL,IAAA,WAAW,EAAE,gBAAgB,CAAC,WAAD,EAAc;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAAd,CArBxB;AAwBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAxBnB,GAAP;AA0BD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, content, header, description, action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      content: 'div',\n      header: React.Fragment,\n      description: React.Fragment,\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image, {\n      required: true,\n    }),\n    content: resolveShorthand(content || {}),\n    header: resolveShorthand(header, {\n      required: true,\n    }),\n    description: resolveShorthand(description, {\n      required: true,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,4 +3,4 @@ export declare const cardHeaderClassName = "fui-CardHeader";
 /**
  * Apply styling to the CardHeader slots based on the state
  */
-export declare const useCardHeaderStyles: (state: CardHeaderState) => CardHeaderState;
+export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;

package/lib/components/CardHeader/useCardHeaderStyles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 export const cardHeaderClassName = 'fui-CardHeader';
 /**
  * Styles for the root slot
@@ -40,7 +40,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useCardHeaderStyles = state => {
+export const useCardHeaderStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,6BAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,KAAK,CAAC,KAAN,CAAY,SAA3B,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,aAAR,EAAuB,KAAK,CAAC,OAAN,CAAc,SAArC,CAAtC;AACD;;AAED,SAAO,KAAP;AACD,CAbM","sourceRoot":""}
+{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,KAAK,CAAC,KAAN,CAAY,SAA3B,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,aAAR,EAAuB,KAAK,CAAC,OAAN,CAAc,SAArC,CAAtC;AACD;;AAED,SAAO,KAAP;AACD,CAbM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderState } from './CardHeader.types';\n\nexport const cardHeaderClassName = 'fui-CardHeader';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    ...shorthands.gap('12px'),\n    height: '32px',\n  },\n  image: {\n    minWidth: '24px',\n    minHeight: '24px',\n    maxWidth: '32px',\n    maxHeight: '32px',\n\n    display: 'flex',\n    alignItems: 'center',\n\n    '> *': {\n      minWidth: 'inherit',\n      minHeight: 'inherit',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n  },\n\n  textContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    height: 'inherit',\n\n    '> *': {\n      height: '50%',\n    },\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(styles.image, state.image.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(styles.textContainer, state.content.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/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 const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardPreview(props, ref);
-  useCardPreviewStyles(state);
-  return renderCardPreview(state);
+  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,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,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,7 +1,7 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type CardPreviewSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    logo?: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
+    logo?: Slot<'div'>;
 };
 /**
  * CardPreview props

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,17 +1,16 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { cardPreviewShorthandProps } from './useCardPreview';
 /**
  * Render the final JSX of CardPreview
  */
 
-export const renderCardPreview = state => {
+export const renderCardPreview_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, cardPreviewShorthandProps);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slotProps.root.children, /*#__PURE__*/React.createElement(slots.logo, { ...slotProps.logo
+  }, 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,QAAT,QAAyB,2BAAzB;AACA,SAAS,yBAAT,QAA0C,kBAA1C;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,EAA0B,yBAA1B,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,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,16 +1,12 @@
 import * as React from 'react';
-import type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview.types';
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-export declare const cardPreviewShorthandProps: Array<keyof CardPreviewSlots>;
+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
  */
-export declare const useCardPreview: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;
+export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;

package/lib/components/CardPreview/useCardPreview.js

@@ -1,20 +1,15 @@
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-
-export const cardPreviewShorthandProps = ['root', 'logo'];
 /**
  * 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
  */
 
-export const useCardPreview = (props, ref) => {
+export const useCardPreview_unstable = (props, ref) => {
   const {
     logo
   } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAkC,CAAC,MAAD,EAAS,MAAT,CAAjE;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,cAAc,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AACvG,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","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/"}