@fluentui/react-card 9.0.0-beta.3 → 9.0.0-beta.30

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

@@ -3,38 +3,57 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCard = void 0;
+exports.useCard_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render Card.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
  */
 
 
-var useCard = function (props, ref) {
-  var groupperAttrs = react_tabster_1.useFocusableGroup({
-    tabBehavior: react_tabster_1.FocusableGroupTabBehavior.LimitedTrapFocus
+const useCard_unstable = (props, ref) => {
+  const {
+    appearance = 'filled',
+    focusMode = 'off',
+    orientation = 'vertical',
+    size = 'medium'
+  } = props;
+  const focusMap = {
+    off: undefined,
+    'no-tab': 'limited-trap-focus',
+    'tab-exit': 'limited',
+    'tab-only': 'unlimited'
+  };
+  const groupperAttrs = react_tabster_1.useFocusableGroup({
+    tabBehavior: focusMap[focusMode]
   });
+  const focusAttrs = focusMode !== 'off' ? {
+    tabIndex: 0,
+    ...groupperAttrs
+  } : null;
   return {
+    appearance,
+    orientation,
+    size,
     components: {
       root: 'div'
     },
-    root: react_utilities_1.getNativeElementProps(props.as || 'div', tslib_1.__assign(tslib_1.__assign({
-      ref: ref,
-      role: 'group'
-    }, groupperAttrs), props))
+    root: react_utilities_1.getNativeElementProps(props.as || 'div', {
+      ref,
+      role: 'group',
+      ...focusAttrs,
+      ...props
+    })
   };
 };
 
-exports.useCard = useCard;
+exports.useCard_unstable = useCard_unstable;
 //# sourceMappingURL=useCard.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAA8C;AACnE,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,eAAA,CAAA,yBAAA,CAA0B;AADD,GAAlB,CAAtB;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAuC,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA;AAC3C,MAAA,GAAG,EAAA,GADwC;AAE3C,MAAA,IAAI,EAAE;AAFqC,KAAA,EAGxC,aAHwC,CAAA,EAIxC,KAJwC,CAAvC;AAHD,GAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAlB,CAAtB;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAAzC;EAND,CAAP;AAaD,CA7BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const { appearance = 'filled', focusMode = 'off', orientation = 'vertical', size = 'medium' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited',\n  } as const;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n  return {\n    appearance,\n    orientation,\n    size,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...focusAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,52 +3,253 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardStyles = void 0;
+exports.useCardStyles_unstable = exports.cardCSSVars = exports.cardClassNames = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const useCardPreviewStyles_1 = /*#__PURE__*/require("../CardPreview/useCardPreviewStyles");
+
+const useCardHeaderStyles_1 = /*#__PURE__*/require("../CardHeader/useCardHeaderStyles");
+
+const useCardFooterStyles_1 = /*#__PURE__*/require("../CardFooter/useCardFooterStyles");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
 
 
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+exports.cardClassNames = {
+  root: 'fui-Card'
+};
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */
+
+exports.cardCSSVars = {
+  cardSizeVar: '--fui-Card--size',
+  cardBorderRadiusVar: '--fui-Card--border-radius'
+};
+
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1whvlc6", "fzb35q0"],
+    "qhf8xq": "f10pi13n",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
     "sj55zd": "f19n0e5",
-    "De3pzq": "fxugw4r",
-    "z8tnut": "f1kcqot9",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fpe6lb7",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "rmohyg": "fsbu5mz",
-    "Dimara": "ft85np5",
-    "Beromem": ["f1kp1iwg", "f1819hsr"],
-    "tyvvez": ["f1819hsr", "f1kp1iwg"],
-    "kr49nh": "fthnjpr"
-  },
-  "interactive": {
+    "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"],
+    "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",
+    "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"]
+  },
+  "orientationHorizontal": {
+    "Beiy3e4": "f1063pyq",
+    "Bt984gj": "f122n59",
+    "Bnoktp0": "fpfyeui",
+    "Idhjb2": "fwi74qw",
+    "Bsdbyht": ["f1yfsbdm", "f1vk4t4a"]
+  },
+  "orientationVertical": {
+    "Beiy3e4": "f1vx9l62",
+    "Bt4kzjz": ["fobhde4", "fx5r7kn"],
+    "B1ou843": ["fx5r7kn", "fobhde4"],
+    "ydhu1d": "frl7skw"
+  },
+  "sizeSmall": {
+    "B7balbw": "f1pi9uxy",
+    "B1h88n7": "f1h1zgly"
+  },
+  "sizeMedium": {
+    "B7balbw": "frsmuga",
+    "B1h88n7": "fuldkky"
+  },
+  "sizeLarge": {
+    "B7balbw": "f1qua4xo",
+    "B1h88n7": "fimkt6v"
+  },
+  "interactiveNoOutline": {
+    "Be0v6ae": "ftr40te",
+    "B5kxglz": ["fcsoo7g", "f1rl4q8i"],
+    "B3pwyw6": "fbb4roj",
+    "Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
+    "dmfk": "fd4vwcp",
+    "B4ofi8": ["f1crelnc", "fup9tr0"],
+    "jgq6uv": "f12d33p4",
+    "Baxewws": ["fup9tr0", "f1crelnc"]
+  },
+  "filledInteractive": {
     "Bceei9c": "f1k6fduh",
+    "De3pzq": "fxugw4r",
+    "E5pizo": "f1whvlc6",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"],
     "Jwef8y": "f1knas48",
+    "Bvxd0ez": "f1m145df",
     "ecr2s2": "fb40n2d"
+  },
+  "filled": {
+    "De3pzq": "fxugw4r",
+    "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"
+  },
+  "filledAlternative": {
+    "De3pzq": "f1dmdbja",
+    "E5pizo": "f1whvlc6",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"]
+  },
+  "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"]
+  },
+  "outline": {
+    "De3pzq": "f1c21dwh",
+    "E5pizo": "f1couhl3",
+    "B0n5ga8": "ft83z1f",
+    "s924m2": ["f1g4150c", "f192dr6e"],
+    "B1q35kw": "f1qnawh6",
+    "Gp14am": ["f192dr6e", "f1g4150c"]
+  },
+  "subtleInteractive": {
+    "Bceei9c": "f1k6fduh",
+    "De3pzq": "fhovq9v",
+    "E5pizo": "f1couhl3",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"],
+    "Jwef8y": "f1t94bn6",
+    "ecr2s2": "f1wfn5kd"
+  },
+  "subtle": {
+    "De3pzq": "fhovq9v",
+    "E5pizo": "f1couhl3",
+    "B0n5ga8": "f16gxe2i",
+    "s924m2": ["fpgykix", "fzybk4o"],
+    "B1q35kw": "f1osi826",
+    "Gp14am": ["fzybk4o", "fpgykix"]
   }
 }, {
-  "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);}", ".f1kp1iwg>.fluentui-react-card-preview{margin-left:-12px;}", ".f1819hsr>.fluentui-react-card-preview{margin-right:-12px;}", ".fthnjpr>.fluentui-react-card-preview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
-  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".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);}", ".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);}", ".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);}", ".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);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right: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);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top: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);}", ".f1k6fduh{cursor:pointer;}", ".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);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".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);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".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);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
+  "a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".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.
  */
 
 
-var useCardStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(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 useCardStyles_unstable = state => {
+  const styles = useStyles();
+  const orientationMap = {
+    horizontal: styles.orientationHorizontal,
+    vertical: styles.orientationVertical
+  };
+  const sizeMap = {
+    small: styles.sizeSmall,
+    medium: styles.sizeMedium,
+    large: styles.sizeLarge
+  };
+  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 = react_1.mergeClasses(exports.cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], 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, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.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,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAiB;AAC5C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,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,WATY,EAUrB,KAAK,CAAC,IAAN,CAAW,SAVU,CAAvB;AAaA,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\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 useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\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    ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n    ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\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: {\n        outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n        outlineWidth: tokens.strokeWidthThick,\n      },\n      selector: 'focus',\n    }),\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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n      marginLeft: `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    // 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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n      marginTop: `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  interactiveNoOutline: {\n    ':hover::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n    ':active::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\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  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\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  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\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  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\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  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  } as const;\n\n  const sizeMap = {\n    small: styles.sizeSmall,\n    medium: styles.sizeMedium,\n    large: styles.sizeLarge,\n  } as const;\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    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\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    interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardFooter = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
+const useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
 
-var renderCardFooter_1 = /*#__PURE__*/require("./renderCardFooter");
+const renderCardFooter_1 = /*#__PURE__*/require("./renderCardFooter");
 
-var useCardFooterStyles_1 = /*#__PURE__*/require("./useCardFooterStyles");
+const useCardFooterStyles_1 = /*#__PURE__*/require("./useCardFooterStyles");
 /**
  * Component to render Button actions in a Card component.
  */
 
 
-exports.CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardFooter_1.useCardFooter(props, ref);
-  useCardFooterStyles_1.useCardFooterStyles(state);
-  return renderCardFooter_1.renderCardFooter(state);
+exports.CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
+  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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,eAAA,CAAA,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AACA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["packages/react-components/react-card/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;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,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-commonjs/components/CardFooter/CardFooter.types.js.map

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./CardFooter"), exports);
 

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,"sources":["packages/react-components/react-card/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","sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,EAAiC,eAAA,CAAA,wBAAjC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
+{"version":3,"sources":["packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","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-commonjs/components/CardFooter/useCardFooter.js

@@ -3,40 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooter = exports.cardFooterShorthandProps = void 0;
+exports.useCardFooter_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-
-exports.cardFooterShorthandProps = ['root', 'action'];
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
  */
 
-var useCardFooter = function (props, ref) {
-  var action = props.action;
+
+const useCardFooter_unstable = (props, ref) => {
+  const {
+    action
+  } = props;
   return {
     components: {
       root: 'div',
       action: 'div'
     },
-    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({
-      ref: ref
-    }, props)),
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
     action: react_utilities_1.resolveShorthand(action)
   };
 };
 
-exports.useCardFooter = useCardFooter;
+exports.useCardFooter_unstable = useCardFooter_unstable;
 //# sourceMappingURL=useCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,wBAAA,GAAyD,CAAC,MAAD,EAAS,QAAT,CAAzD;AAEb;;;;;;;;AAQG;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAoD;AACvE,MAAA,MAAM,GAAK,KAAK,CAAV,MAAN;AAER,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA2B,OAAA,CAAA,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAA3B,CAND;AAUL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAVH,GAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE;EAAF,IAAa,KAAnB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAND;IAUL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;EAVH,CAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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/"}