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

package/lib/components/Card/useCardStyles.js

@@ -1,41 +1,150 @@
-import { __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';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1eroye8", "f1m1elsp"],
-    "sj55zd": "f16th3vw",
-    "De3pzq": "fpnz0vo",
-    "z8tnut": "f1kcqot9",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fpe6lb7",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "rmohyg": "fsbu5mz",
-    "Dimara": "fnpfh4l"
-  },
-  "interactive": {
+    "mc9l5x": "ftgm304",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "sj55zd": "f19n0e5",
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "Ecqjvq": "f70or3y",
+    "B39syqp": ["f1s27jks", "f1x7x6se"],
+    "m3o775": "f1q2lvbs",
+    "I0kkcn": ["f1x7x6se", "f1s27jks"]
+  },
+  "filledInteractive": {
+    "Bceei9c": "f1k6fduh",
+    "De3pzq": "fxugw4r",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "E5pizo": "f1whvlc6",
+    "Jwef8y": "f1knas48",
+    "Bgoe8wy": "fpa59ij",
+    "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
+    "oetu4i": "fz67qlh",
+    "gg5e9n": ["f1l1ogpg", "f1rhln42"],
+    "Bvxd0ez": "f1m145df",
+    "ecr2s2": "fb40n2d",
+    "B6oc9vd": "f7cshhm",
+    "ak43y8": ["f1bzyac8", "f131p3c2"],
+    "wmxk5l": "f1bazisv",
+    "B50zh58": ["f131p3c2", "f1bzyac8"]
+  },
+  "filled": {
+    "De3pzq": "fxugw4r",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "E5pizo": "f1whvlc6"
+  },
+  "filledAlternativeInteractive": {
     "Bceei9c": "f1k6fduh",
-    "Jwef8y": "fg5k6t1",
-    "ecr2s2": "fesicau"
+    "De3pzq": "f1dmdbja",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "E5pizo": "f1whvlc6",
+    "Jwef8y": "f1uvynv3",
+    "Bgoe8wy": "fpa59ij",
+    "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
+    "oetu4i": "fz67qlh",
+    "gg5e9n": ["f1l1ogpg", "f1rhln42"],
+    "Bvxd0ez": "f1m145df",
+    "ecr2s2": "f1yhgkbh",
+    "B6oc9vd": "f7cshhm",
+    "ak43y8": ["f1bzyac8", "f131p3c2"],
+    "wmxk5l": "f1bazisv",
+    "B50zh58": ["f131p3c2", "f1bzyac8"]
+  },
+  "filledAlternative": {
+    "De3pzq": "f1dmdbja",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "E5pizo": "f1whvlc6"
+  },
+  "outlineInteractive": {
+    "Bceei9c": "f1k6fduh",
+    "De3pzq": "f1c21dwh",
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "E5pizo": "f1couhl3",
+    "Jwef8y": "fjxutwb",
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1xlaoq0",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "ecr2s2": "fophhak",
+    "B6oc9vd": "fvs00aa",
+    "ak43y8": ["f1assf6x", "f4ruux4"],
+    "wmxk5l": "fumykes",
+    "B50zh58": ["f4ruux4", "f1assf6x"]
+  },
+  "outline": {
+    "De3pzq": "f1c21dwh",
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "E5pizo": "f1couhl3"
+  },
+  "subtleInteractive": {
+    "Bceei9c": "f1k6fduh",
+    "De3pzq": "fhovq9v",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "E5pizo": "f1couhl3",
+    "Jwef8y": "f1t94bn6",
+    "ecr2s2": "f1wfn5kd"
+  },
+  "subtle": {
+    "De3pzq": "fhovq9v",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "E5pizo": "f1couhl3"
   }
 }, {
-  "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;}", ".f1a3p1vp{overflow:hidden;}", ".f1eroye8{box-shadow:var(--alias-shadow-shadow4);}", ".f1m1elsp{box-shadow:var(--alias-shadow-shadow-4);}", ".f16th3vw{color:var(--alias-color-neutral-neutralForeground1);}", ".fpnz0vo{background-color:var(--alias-color-neutral-neutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fsbu5mz{gap:12px;}", ".fnpfh4l{border-radius:var(--global-borderRadius-medium);}", ".f1k6fduh{cursor:pointer;}"],
-  "h": [".fg5k6t1:hover{background-color:var(--alias-color-neutral-neutralBackground1Hover);}"],
-  "a": [".fesicau:active{background-color:var(--alias-color-neutral-neutralBackground1Pressed);}"]
+  "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
+  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
+  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
  * Apply styling to the Card slots based on the state
  */
 
 
-export var useCardStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(styles.root, (state.onClick || state.onMouseUp || state.onMouseDown || state.onPointerUp || state.onPointerDown || state.onTouchStart || state.onTouchEnd) && styles.interactive, state.className);
+export const useCardStyles_unstable = state => {
+  const styles = useStyles();
+  const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
+  state.root.className = mergeClasses(cardClassName, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
   return state;
 };
 //# sourceMappingURL=useCardStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA6BA;;AAEG;;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAiB;AAC5C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,CAAC,KAAK,CAAC,OAAN,IACC,KAAK,CAAC,SADP,IAEC,KAAK,CAAC,WAFP,IAGC,KAAK,CAAC,WAHP,IAIC,KAAK,CAAC,aAJP,IAKC,KAAK,CAAC,YALP,IAMC,KAAK,CAAC,UANR,KAOE,MAAM,CAAC,WATmB,EAU5B,KAAK,CAAC,SAVsB,CAA9B;AAaA,SAAO,KAAP;AACD,CAhBM","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;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;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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CA3BM","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    color: tokens.colorNeutralForeground1,\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    // Size: medium\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    [`> *:not(.${cardPreviewClassName})`]: {\n      // Size: medium\n      ...shorthands.margin('12px'),\n    },\n  },\n\n  filledInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n  },\n  filledAlternativeInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground2,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow4,\n  },\n  outlineInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    boxShadow: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    boxShadow: 'none',\n  },\n  subtleInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    boxShadow: 'none',\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\n  const interactive =\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\n  state.root.className = mergeClasses(\n    cardClassName,\n    styles.root,\n    state.appearance === 'filled' && styles.filled,\n    state.appearance === 'filled-alternative' && styles.filledAlternative,\n    state.appearance === 'outline' && styles.outline,\n    state.appearance === 'subtle' && styles.subtle,\n    interactive && state.appearance === 'filled' && styles.filledInteractive,\n    interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n    interactive && state.appearance === 'outline' && styles.outlineInteractive,\n    interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import type { CardFooterProps } from './CardFooter.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * Component to render Button actions in a Card component.
  */
-export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLElement>>;
+export declare const CardFooter: ForwardRefComponent<CardFooterProps>;

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 var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardFooter(props, ref);
-  useCardFooterStyles(state);
-  return renderCardFooter(state);
+export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
+  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;AAGA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAG,KAAK,CAAC,UAAN,CAA+C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CALyB,CAAnB;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,28 +1,13 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type CardFooterSlots = {
+    root: Slot<'div'>;
+    action?: Slot<'div'>;
+};
 /**
- * CardFooter Props
+ * CardFooter props
  */
-export interface CardFooterProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
-/**
- * Names of the shorthand properties in CardFooterProps
- */
-export declare type CardFooterShorthandProps = 'action';
-/**
- * Names of CardFooterProps that have a default value in useCardFooter
- */
-export declare type CardFooterDefaultedProps = never;
+export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 /**
  * State used in rendering CardFooter
  */
-export interface CardFooterState extends ComponentStateCompat<CardFooterProps, CardFooterShorthandProps, CardFooterDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardFooterState = ComponentState<CardFooterSlots>;

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,16 +1,16 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import { cardFooterShorthandProps } from './useCardFooter';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardFooter
  */
 
-export var renderCardFooter = function (state) {
-  var _a = getSlotsCompat(state, cardFooterShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children, /*#__PURE__*/React.createElement(slots.action, __assign({}, slotProps.action)));
+export const renderCardFooter_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, 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,cAAT,QAA+B,2BAA/B;AACA,SAAS,wBAAT,QAAyC,iBAAzC;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,wBAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,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,17 +1,12 @@
 import * as React from 'react';
-import type { CardFooterProps, CardFooterShorthandProps, CardFooterState } from './CardFooter.types';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: CardFooterShorthandProps[];
+import type { CardFooterProps, CardFooterState } from './CardFooter.types';
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardFooter: (props: CardFooterProps, ref: React.Ref<HTMLElement>, defaultProps?: CardFooterProps | undefined) => CardFooterState;
+export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;

package/lib/components/CardFooter/useCardFooter.js

@@ -1,27 +1,28 @@
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-export var cardFooterShorthandProps = ['action'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: cardFooterShorthandProps
-});
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCardFooter = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref
-  }, defaultProps && resolveShorthandProps(defaultProps, cardFooterShorthandProps), resolveShorthandProps(props, cardFooterShorthandProps));
-  return state;
+export const useCardFooter_unstable = (props, ref) => {
+  const {
+    action
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      action: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    action: resolveShorthand(action)
+  };
 };
 //# sourceMappingURL=useCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;AAEG;;AACH,OAAO,IAAM,wBAAwB,GAA+B,CAAC,QAAD,CAA7D;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAkB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAlB,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,aAAa,GAAG,UAC3B,KAD2B,EAE3B,GAF2B,EAG3B,YAH2B,EAGG;AAE9B,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA;AADL,GADsB,EAItB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,wBAAf,CAJf,EAKtB,qBAAqB,CAAC,KAAD,EAAQ,wBAAR,CALC,CAAxB;AAQA,SAAO,KAAP;AACD,CAdM","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

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

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,28 +1,30 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1063pyq",
-    "rmohyg": "fsbu5mz"
+    "i8kkvl": "f4akndk",
+    "Belr9w4": "fe5j3v"
   },
   "action": {
     "Frg6f3": ["fcgxt0o", "f1ujusj6"]
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fsbu5mz{gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
 });
 /**
  * Apply styling to the CardFooter slots based on the state
  */
 
 
-export var useCardFooterStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+export const useCardFooterStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
 
   if (state.action) {
     state.action.className = mergeClasses(styles.action, state.action.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,SAApB,CAA9B;;AAEA,MAAI,KAAK,CAAC,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.d.ts

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

package/lib/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 var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardHeader(props, ref);
-  useCardHeaderStyles(state);
-  return renderCardHeader(state);
+export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  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;AAGA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAG,KAAK,CAAC,UAAN,CAA+C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CALyB,CAAnB;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,44 +1,17 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type CardHeaderSlots = {
+    root: Slot<'div'>;
+    image: Slot<'div'>;
+    content?: Slot<'div'>;
+    header: Slot<'span'>;
+    description: Slot<'span'>;
+    action?: Slot<'div'>;
+};
 /**
- * CardHeader Props
+ * CardHeader props
  */
-export interface CardHeaderProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Image slot
-     */
-    image: ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;
-    /**
-     * Content slot, wrapper of the header and description slots
-     */
-    content?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Header title slot
-     */
-    header: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Description slot
-     */
-    description: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
-/**
- * Names of the shorthand properties in CardHeaderProps
- */
-export declare type CardHeaderShorthandProps = 'image' | 'content' | 'header' | 'description' | 'action';
-/**
- * Names of CardHeaderProps that have a default value in useCardHeader
- */
-export declare type CardHeaderDefaultedProps = never;
+export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 /**
  * State used in rendering CardHeader
  */
-export interface CardHeaderState extends ComponentStateCompat<CardHeaderProps, CardHeaderShorthandProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardHeaderState = ComponentState<CardHeaderSlots>;

package/lib/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;