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

package/lib-commonjs/components/Card/useCardStyles.js

@@ -3,55 +3,343 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardStyles = exports.cardClassName = void 0;
-
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
-
-const index_1 = /*#__PURE__*/require("../CardPreview/index");
-
-exports.cardClassName = 'fui-Card';
+exports.useCardStyles_unstable = exports.cardCSSVars = exports.cardClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const useCardPreviewStyles_1 = /*#__PURE__*/require("../CardPreview/useCardPreviewStyles");
+const useCardHeaderStyles_1 = /*#__PURE__*/require("../CardHeader/useCardHeaderStyles");
+const useCardFooterStyles_1 = /*#__PURE__*/require("../CardFooter/useCardFooterStyles");
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
-
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1whvlc6", "fzb35q0"],
-    "sj55zd": "f19n0e5",
-    "De3pzq": "fxugw4r",
-    "z8tnut": "f1kcqot9",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fpe6lb7",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "rmohyg": "fsbu5mz",
-    "Dimara": "ft85np5",
-    "Bt4kzjz": ["fwanz6y", "f1sdy22h"],
-    "B1ou843": ["f1sdy22h", "fwanz6y"],
-    "Bx3mhbb": "f12h22a6"
-  },
-  "interactive": {
-    "Bceei9c": "f1k6fduh",
-    "Jwef8y": "f1knas48",
-    "ecr2s2": "fb40n2d"
+exports.cardClassNames = {
+  root: 'fui-Card',
+  floatingAction: 'fui-Card__floatingAction',
+  checkbox: 'fui-Card__checkbox'
+};
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */
+exports.cardCSSVars = {
+  cardSizeVar: '--fui-Card--size',
+  cardBorderRadiusVar: '--fui-Card--border-radius'
+};
+const focusOutlineStyle = {
+  outlineRadius: `var(${exports.cardCSSVars.cardBorderRadiusVar})`,
+  outlineWidth: react_theme_1.tokens.strokeWidthThick
+};
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    Bbmb7ep: ["fifeqxg", "f899z7z"],
+    Beyfa6y: ["f899z7z", "fifeqxg"],
+    B7oj6ja: ["f4h3tyx", "f18ur2pz"],
+    Btl43ni: ["f18ur2pz", "f4h3tyx"],
+    z8tnut: "f1lplnzb",
+    z189sj: ["f10m5gbb", "f1k04kkk"],
+    Byoj8tv: "fhftqfp",
+    uwmqm3: ["f1k04kkk", "f10m5gbb"],
+    i8kkvl: "fxsr4vj",
+    Belr9w4: "fcvsdzp",
+    mc9l5x: "f22iagw",
+    qhf8xq: "f10pi13n",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "f19n0e5",
+    E3zdtr: "f1mdlcz9",
+    bn5sak: "frwkxtg",
+    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
+    B1piin3: ["f15yvnhg", "f1n6gb5g"],
+    By385i5: "fo72kxq",
+    Bsft5z2: "f13zj6fq",
+    B80jsxd: "f1nwj1ja",
+    Bm2nyyq: "f8rth92",
+    Barhvk9: ["flthirb", "ftkbnf5"],
+    Bw17bha: "f1lh990p",
+    vfts7: ["ftkbnf5", "flthirb"],
+    xrcqlc: "f6czdpx",
+    Ihftqj: ["f13hvwk3", "f1en4csx"],
+    Bcgy8vk: "f1i1u9k0",
+    Bhxzhr1: ["f1en4csx", "f13hvwk3"],
+    B3778ie: ["f1qnomq5", "f2fl922"],
+    d9w3h3: ["f2fl922", "f1qnomq5"],
+    Bl18szs: ["f1anhtl", "f1n2zcl3"],
+    B4j8arr: ["f1n2zcl3", "f1anhtl"],
+    B2jhnfs: "f16v3d5c",
+    wiictr: "f1su8t2g",
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    Bf4ptjt: "fh1cnn4",
+    kclons: ["fy7oxxb", "f184ne2d"],
+    Bhdgwq3: "fpukqih",
+    Blkhhs4: ["f184ne2d", "fy7oxxb"],
+    Bqtpl0w: "f99gebs",
+    clg4pj: ["f13b0oaq", "f8t2bz6"],
+    hgwjuy: "f1jvq617",
+    Bonggc9: ["f8t2bz6", "f13b0oaq"],
+    B1tsrr9: ["f11unbnk", "fbd201q"],
+    Dah5zi: ["fbd201q", "f11unbnk"],
+    Bkh64rk: ["f12nqxso", "f1uguk4w"],
+    qqdqy8: ["f1uguk4w", "f12nqxso"],
+    B6dhp37: "f1dvezut",
+    i03rao: ["fd0oaoj", "f1cwg4i8"],
+    Boxcth7: "fjvm52t",
+    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
+    J0r882: "f3l4wcz",
+    Bjwuhne: "f6j2biq",
+    Ghsupd: ["fdzzmfx", "fduh8kh"],
+    Bule8hv: ["fduh8kh", "fdzzmfx"]
+  },
+  selectableFocused: {
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    Bssx7fj: "f1b1k54r",
+    uh7if5: ["f4ne723", "fqqcjud"],
+    clntm0: "fh7aioi",
+    Dlk2r6: ["fqqcjud", "f4ne723"],
+    B2j2mmj: "ffht0p2",
+    wigs8: "f1p0ul1q",
+    pbfy6t: "f1c901ms",
+    B0v4ure: "f1alokd7",
+    ghq09: "f78i1la",
+    B24cy0v: ["f1kvsw7t", "f1bw8brt"],
+    Bwckmig: "f8k7e5g",
+    Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
+    Bbgo44z: "f125hn41",
+    Bil7v7r: ["fgxkx34", "f1v56tyl"],
+    skfxo0: "fdxas6f",
+    jo1ztg: ["f1v56tyl", "fgxkx34"],
+    Ba3ybja: ["fxwickw", "f1ia5cve"],
+    az1dzo: ["f1ia5cve", "fxwickw"],
+    vppk2z: ["f194aguw", "fqicc6c"],
+    B6352mv: ["fqicc6c", "f194aguw"],
+    nr063g: "fq4eyks",
+    Blmvk6g: ["f1ya6x16", "ftuszwa"],
+    Bsiemmq: "f1e2iu44",
+    B98u21t: ["ftuszwa", "f1ya6x16"],
+    B2pnrqr: "f4a0pcc",
+    Bhhzhcn: "f11go4w5",
+    Bec0n69: ["f4dzull", "fy687nj"],
+    B29w5g4: ["fy687nj", "f4dzull"]
+  },
+  orientationHorizontal: {
+    Beiy3e4: "f1063pyq",
+    Bt984gj: "f122n59",
+    Bnoktp0: "fpfyeui",
+    Idhjb2: "fwi74qw",
+    ihgzqh: ["ffcmwrh", "f6ppoih"],
+    Bgp6ld0: ["f1dc9p14", "fd933vt"]
+  },
+  orientationVertical: {
+    Beiy3e4: "f1vx9l62",
+    Bt4kzjz: ["fobhde4", "fx5r7kn"],
+    B1ou843: ["fx5r7kn", "fobhde4"],
+    y1433z: "f19chtn8",
+    B7egwnw: "fuvs6re",
+    B49b4xf: "fy4glsf"
+  },
+  sizeSmall: {
+    B7balbw: "f1pi9uxy",
+    B1h88n7: "f1h1zgly"
+  },
+  sizeMedium: {
+    B7balbw: "frsmuga",
+    B1h88n7: "fuldkky"
+  },
+  sizeLarge: {
+    B7balbw: "f1qua4xo",
+    B1h88n7: "fimkt6v"
+  },
+  filled: {
+    De3pzq: "fxugw4r",
+    E5pizo: "f1whvlc6",
+    B0n5ga8: "f16gxe2i",
+    s924m2: ["fpgykix", "fzybk4o"],
+    B1q35kw: "f1osi826",
+    Gp14am: ["fzybk4o", "fpgykix"]
+  },
+  filledInteractive: {
+    Bceei9c: "f1k6fduh",
+    De3pzq: "fxugw4r",
+    E5pizo: "f1whvlc6",
+    B0n5ga8: "f16gxe2i",
+    s924m2: ["fpgykix", "fzybk4o"],
+    B1q35kw: "f1osi826",
+    Gp14am: ["fzybk4o", "fpgykix"],
+    Jwef8y: "f1knas48",
+    Bvxd0ez: "f1m145df",
+    ecr2s2: "fb40n2d"
+  },
+  filledInteractiveSelected: {
+    De3pzq: "f1nfm20t",
+    B0n5ga8: "f16eln5f",
+    s924m2: ["fa2okxs", "fg4zq3l"],
+    B1q35kw: "ff6932p",
+    Gp14am: ["fg4zq3l", "fa2okxs"],
+    Jwef8y: "f1kz6goq"
+  },
+  filledAlternative: {
+    De3pzq: "f1dmdbja",
+    E5pizo: "f1whvlc6",
+    B0n5ga8: "f16gxe2i",
+    s924m2: ["fpgykix", "fzybk4o"],
+    B1q35kw: "f1osi826",
+    Gp14am: ["fzybk4o", "fpgykix"]
+  },
+  filledAlternativeInteractive: {
+    Bceei9c: "f1k6fduh",
+    De3pzq: "f1dmdbja",
+    E5pizo: "f1whvlc6",
+    B0n5ga8: "f16gxe2i",
+    s924m2: ["fpgykix", "fzybk4o"],
+    B1q35kw: "f1osi826",
+    Gp14am: ["fzybk4o", "fpgykix"],
+    Jwef8y: "f1uvynv3",
+    Bvxd0ez: "f1m145df",
+    ecr2s2: "f1yhgkbh"
+  },
+  filledAlternativeInteractiveSelected: {
+    De3pzq: "fjxa0vh",
+    B0n5ga8: "f16eln5f",
+    s924m2: ["fa2okxs", "fg4zq3l"],
+    B1q35kw: "ff6932p",
+    Gp14am: ["fg4zq3l", "fa2okxs"],
+    Jwef8y: "fehi0vp"
+  },
+  outline: {
+    De3pzq: "f1c21dwh",
+    E5pizo: "f1couhl3",
+    B0n5ga8: "ft83z1f",
+    s924m2: ["f1g4150c", "f192dr6e"],
+    B1q35kw: "f1qnawh6",
+    Gp14am: ["f192dr6e", "f1g4150c"]
+  },
+  outlineInteractive: {
+    Bceei9c: "f1k6fduh",
+    De3pzq: "f1c21dwh",
+    E5pizo: "f1couhl3",
+    B0n5ga8: "ft83z1f",
+    s924m2: ["f1g4150c", "f192dr6e"],
+    B1q35kw: "f1qnawh6",
+    Gp14am: ["f192dr6e", "f1g4150c"],
+    Jwef8y: "fjxutwb",
+    Be0v6ae: "f1llr77y",
+    B5kxglz: ["fzk0khw", "fjj8tog"],
+    B3pwyw6: "fb1u8ub",
+    Bymgtzf: ["fjj8tog", "fzk0khw"],
+    ecr2s2: "fophhak",
+    dmfk: "f1uohb70",
+    B4ofi8: ["f1jm7v1n", "f1bus3rq"],
+    jgq6uv: "f1fbu7rr",
+    Baxewws: ["f1bus3rq", "f1jm7v1n"]
+  },
+  outlineInteractiveSelected: {
+    De3pzq: "f1q9pm1r",
+    B0n5ga8: "f16eln5f",
+    s924m2: ["fa2okxs", "fg4zq3l"],
+    B1q35kw: "ff6932p",
+    Gp14am: ["fg4zq3l", "fa2okxs"],
+    Jwef8y: "fg59vm4"
+  },
+  subtle: {
+    De3pzq: "fhovq9v",
+    E5pizo: "f1couhl3",
+    B0n5ga8: "f16gxe2i",
+    s924m2: ["fpgykix", "fzybk4o"],
+    B1q35kw: "f1osi826",
+    Gp14am: ["fzybk4o", "fpgykix"]
+  },
+  subtleInteractive: {
+    Bceei9c: "f1k6fduh",
+    De3pzq: "fhovq9v",
+    E5pizo: "f1couhl3",
+    B0n5ga8: "f16gxe2i",
+    s924m2: ["fpgykix", "fzybk4o"],
+    B1q35kw: "f1osi826",
+    Gp14am: ["fzybk4o", "fpgykix"],
+    Jwef8y: "f1t94bn6",
+    ecr2s2: "f1wfn5kd"
+  },
+  subtleInteractiveSelected: {
+    De3pzq: "fq5gl1p",
+    B0n5ga8: "f16eln5f",
+    s924m2: ["fa2okxs", "fg4zq3l"],
+    B1q35kw: "ff6932p",
+    Gp14am: ["fg4zq3l", "fa2okxs"],
+    Jwef8y: "f1uqaxdt"
+  },
+  select: {
+    qhf8xq: "f1euv43f",
+    Bhzewxz: "fqclxi7",
+    j35jbq: ["fiv86kb", "f36uhnt"],
+    Bj3rh1h: "f19g0ac"
+  },
+  hiddenCheckbox: {
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    a9b677: "frkrog8",
+    Bqenvij: "f1mpe4l3",
+    qhf8xq: "f1euv43f",
+    Bh84pgu: "fmf1zke",
+    Bgl5zvf: "f1wch0ki",
+    Huce71: "fz5stix"
   }
 }, {
-  "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;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".fzb35q0{box-shadow:var(--shadow-4);}", ".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;}", ".fsbu5mz{gap:12px;}", ".ft85np5{border-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;}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
-  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
+  d: [".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".f99gebs[data-fui-focus-visible]::after{border-top-width:var(--strokeWidthThick);}", ".f13b0oaq[data-fui-focus-visible]::after{border-right-width:var(--strokeWidthThick);}", ".f8t2bz6[data-fui-focus-visible]::after{border-left-width:var(--strokeWidthThick);}", ".f1jvq617[data-fui-focus-visible]::after{border-bottom-width:var(--strokeWidthThick);}", ".f11unbnk[data-fui-focus-visible]::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fbd201q[data-fui-focus-visible]::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f12nqxso[data-fui-focus-visible]::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1uguk4w[data-fui-focus-visible]::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f3l4wcz[data-fui-focus-visible]::after{top:-var(--strokeWidthThick);}", ".f6j2biq[data-fui-focus-visible]::after{bottom:-var(--strokeWidthThick);}", ".fdzzmfx[data-fui-focus-visible]::after{left:-var(--strokeWidthThick);}", ".fduh8kh[data-fui-focus-visible]::after{right:-var(--strokeWidthThick);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f125hn41[data-fui-focus-within]:focus-within::after{border-top-width:var(--strokeWidthThick);}", ".fgxkx34[data-fui-focus-within]:focus-within::after{border-right-width:var(--strokeWidthThick);}", ".f1v56tyl[data-fui-focus-within]:focus-within::after{border-left-width:var(--strokeWidthThick);}", ".fdxas6f[data-fui-focus-within]:focus-within::after{border-bottom-width:var(--strokeWidthThick);}", ".fxwickw[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f1ia5cve[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f194aguw[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fqicc6c[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f4a0pcc[data-fui-focus-within]:focus-within::after{top:-var(--strokeWidthThick);}", ".f11go4w5[data-fui-focus-within]:focus-within::after{bottom:-var(--strokeWidthThick);}", ".f4dzull[data-fui-focus-within]:focus-within::after{left:-var(--strokeWidthThick);}", ".fy687nj[data-fui-focus-within]:focus-within::after{right:-var(--strokeWidthThick);}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fy4glsf>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{-webkit-clip-path:inset(50%);clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
- * Apply styling to the Card slots based on the state
+ * Apply styling to the Card slots based on the state.
  */
-
-
-const useCardStyles = state => {
+const useCardStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.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);
+  const orientationMap = {
+    horizontal: styles.orientationHorizontal,
+    vertical: styles.orientationVertical
+  };
+  const sizeMap = {
+    small: styles.sizeSmall,
+    medium: styles.sizeMedium,
+    large: styles.sizeLarge
+  };
+  const appearanceMap = {
+    filled: styles.filled,
+    'filled-alternative': styles.filledAlternative,
+    outline: styles.outline,
+    subtle: styles.subtle
+  };
+  const selectedMap = {
+    filled: styles.filledInteractiveSelected,
+    'filled-alternative': styles.filledAlternativeInteractiveSelected,
+    outline: styles.outlineInteractiveSelected,
+    subtle: styles.subtleInteractiveSelected
+  };
+  const interactiveMap = {
+    filled: styles.filledInteractive,
+    'filled-alternative': styles.filledAlternativeInteractive,
+    outline: styles.outlineInteractive,
+    subtle: styles.subtleInteractive
+  };
+  state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], (state.interactive || state.selectable) && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], state.selectFocused && styles.selectableFocused, state.root.className);
+  if (state.floatingAction) {
+    state.floatingAction.className = react_1.mergeClasses(exports.cardClassNames.floatingAction, styles.select, state.floatingAction.className);
+  }
+  if (state.checkbox) {
+    state.checkbox.className = react_1.mergeClasses(exports.cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
+  }
   return state;
 };
-
-exports.useCardStyles = useCardStyles;
+exports.useCardStyles_unstable = useCardStyles_unstable;
 //# sourceMappingURL=useCardStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAGa,OAAA,CAAA,aAAA,GAAgB,UAAhB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,aADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,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,WAVY,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CAjBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"mappings":"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","names":["exports","root","floatingAction","checkbox","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","react_theme_1","strokeWidthThick","useStyles","react_1","useCardStyles_unstable","state","styles","orientationMap","horizontal","orientationHorizontal","vertical","orientationVertical","sizeMap","small","sizeSmall","medium","sizeMedium","large","sizeLarge","appearanceMap","filled","filledAlternative","outline","subtle","selectedMap","filledInteractiveSelected","filledAlternativeInteractiveSelected","outlineInteractiveSelected","subtleInteractiveSelected","interactiveMap","filledInteractive","filledAlternativeInteractive","outlineInteractive","subtleInteractive","className","orientation","size","appearance","interactive","selectable","selected","selectFocused","selectableFocused","select","hiddenCheckbox"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCardStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n  floatingAction: 'fui-Card__floatingAction',\n  checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n  cardSizeVar: '--fui-Card--size',\n  cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle = {\n  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  outlineWidth: tokens.strokeWidthThick,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.overflow('hidden'),\n    ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n    ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n\n    // Border setting using after pseudo element to allow CardPreview to render behind it.\n    '::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      content: '\"\"',\n      pointerEvents: 'none',\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n      ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    },\n\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n      flexShrink: 0,\n    },\n    // Allows non-card components to grow to fill the available space.\n    [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n      flexGrow: 1,\n    },\n\n    ...createFocusOutlineStyle({\n      style: focusOutlineStyle,\n      selector: 'focus',\n    }),\n  },\n\n  selectableFocused: createFocusOutlineStyle({\n    style: focusOutlineStyle,\n    selector: 'focus-within',\n  }),\n\n  orientationHorizontal: {\n    flexDirection: 'row',\n    alignItems: 'center',\n\n    // Remove vertical padding to keep CardPreview content flush with Card's borders.\n    [`> .${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n      marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n    // As such, the code below targets a CardPreview, when it's the first element.\n    // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n      marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n    // As such, the code below targets a CardPreview, when it's the last element.\n    // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n      marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n  orientationVertical: {\n    flexDirection: 'column',\n\n    // Remove lateral padding to keep CardPreview content flush with Card's borders.\n    [`> .${cardPreviewClassNames.root}`]: {\n      marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n      marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n\n    // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n    // As such, the code below targets a CardPreview, when it's the first element.\n    // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n\n    // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n    // As such, the code below targets a CardPreview, when it's the first element.\n    // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n      marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n\n  sizeSmall: {\n    [cardCSSVars.cardSizeVar]: '8px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n  },\n  sizeMedium: {\n    [cardCSSVars.cardSizeVar]: '12px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n  },\n  sizeLarge: {\n    [cardCSSVars.cardSizeVar]: '16px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n  },\n\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  filledInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n  filledInteractiveSelected: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n    },\n  },\n\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  filledAlternativeInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n    },\n  },\n  filledAlternativeInteractiveSelected: {\n    backgroundColor: tokens.colorNeutralBackground2Selected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Selected,\n    },\n  },\n\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n  outlineInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      },\n    },\n  },\n  outlineInteractiveSelected: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundSelected,\n    },\n  },\n\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  subtleInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtleInteractiveSelected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n  },\n\n  select: {\n    position: 'absolute',\n    top: '4px',\n    right: '4px',\n    zIndex: 1,\n  },\n\n  hiddenCheckbox: {\n    ...shorthands.overflow('hidden'),\n    width: '1px',\n    height: '1px',\n    position: 'absolute',\n    clip: 'rect(0 0 0 0)',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\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 orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  };\n\n  const sizeMap = {\n    small: styles.sizeSmall,\n    medium: styles.sizeMedium,\n    large: styles.sizeLarge,\n  };\n\n  const appearanceMap = {\n    filled: styles.filled,\n    'filled-alternative': styles.filledAlternative,\n    outline: styles.outline,\n    subtle: styles.subtle,\n  };\n\n  const selectedMap = {\n    filled: styles.filledInteractiveSelected,\n    'filled-alternative': styles.filledAlternativeInteractiveSelected,\n    outline: styles.outlineInteractiveSelected,\n    subtle: styles.subtleInteractiveSelected,\n  };\n  const interactiveMap = {\n    filled: styles.filledInteractive,\n    'filled-alternative': styles.filledAlternativeInteractive,\n    outline: styles.outlineInteractive,\n    subtle: styles.subtleInteractive,\n  };\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    (state.interactive || state.selectable) && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    state.selectFocused && styles.selectableFocused,\n    state.root.className,\n  );\n\n  if (state.floatingAction) {\n    state.floatingAction.className = mergeClasses(\n      cardClassNames.floatingAction,\n      styles.select,\n      state.floatingAction.className,\n    );\n  }\n\n  if (state.checkbox) {\n    state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -4,23 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardFooter = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
-
 const renderCardFooter_1 = /*#__PURE__*/require("./renderCardFooter");
-
 const useCardFooterStyles_1 = /*#__PURE__*/require("./useCardFooterStyles");
 /**
  * Component to render Button actions in a Card component.
  */
-
-
 exports.CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardFooter_1.useCardFooter(props, ref);
-  useCardFooterStyles_1.useCardFooterStyles(state);
-  return renderCardFooter_1.renderCardFooter(state);
+  const state = useCardFooter_1.useCardFooter_unstable(props, ref);
+  useCardFooterStyles_1.useCardFooterStyles_unstable(state);
+  return renderCardFooter_1.renderCardFooter_unstable(state);
 });
 exports.CardFooter.displayName = 'CardFooter';
 //# sourceMappingURL=CardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AACA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,kBAAU,gBAAyCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,sCAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDG,kDAA4B,CAACF,KAAK,CAAC;EACnC,OAAOG,4CAAyB,CAACH,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFL,kBAAU,CAACS,WAAW,GAAG,YAAY","names":["exports","React","forwardRef","props","ref","state","useCardFooter_1","useCardFooterStyles_1","renderCardFooter_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n  const state = useCardFooter_unstable(props, ref);\n\n  useCardFooterStyles_unstable(state);\n  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"]}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/index.ts"],"sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BH,SAAS,CAACG,IAAI,CAACC,QAAQ,EACvBL,KAAK,CAACM,MAAM,IAAIH,oBAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,CAC5C;AAEjB,CAAC;AATYC,iCAAyB","names":["renderCardFooter_unstable","state","slots","slotProps","react_utilities_1","React","root","children","action","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -3,26 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooter = exports.cardFooterShorthandProps = void 0;
-
+exports.useCardFooter_unstable = void 0;
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-
-exports.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
  */
-
-const useCardFooter = (props, ref) => {
+const useCardFooter_unstable = (props, ref) => {
   const {
     action
   } = props;
@@ -38,6 +30,5 @@ const useCardFooter = (props, ref) => {
     action: react_utilities_1.resolveShorthand(action)
   };
 };
-
-exports.useCardFooter = useCardFooter;
+exports.useCardFooter_unstable = useCardFooter_unstable;
 //# sourceMappingURL=useCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,wBAAA,GAAyD,CAAC,MAAD,EAAS,QAAT,CAAzD;AAEb;;;;;;;;AAQG;;AACI,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,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAND;AAUL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAVH,GAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC;EAAM,CAAE,GAAGF,KAAK;EAExB,OAAO;IACLG,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,MAAM,EAAE;KACT;IAEDE,IAAI,EAAEC,uCAAqB,CAAC,KAAK,EAAE;MACjCJ,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,MAAM,EAAEG,kCAAgB,CAACH,MAAM;GAChC;AACH,CAAC;AAfYI,8BAAsB","names":["useCardFooter_unstable","props","ref","action","components","root","react_utilities_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"]}