@fluentui/react-card 9.0.0-beta.21 → 9.0.0-beta.24

package/assets/excel_logo.svg

@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.0007 7H15.5007C14.6737 7 14.0007 6.327 14.0007 5.5V2H6.00073V18H18.0007V7Z" fill="white" />
+  <path d="M18.0007 6V5.707L15.0007 2.707V5.5C15.0007 5.775 15.2257 6 15.5007 6H18.0007Z" fill="white" />
+  <path opacity="0.64" fill-rule="evenodd" clip-rule="evenodd"
+    d="M18.7077 5L15.0007 1.293C14.8132 1.10545 14.5589 1.00006 14.2937 1H6.00073C5.44845 1 5.00073 1.44772 5.00073 2V18C5.00073 18.5523 5.44845 19 6.00073 19H18.0007C18.553 19 19.0007 18.5523 19.0007 18V5.707C19.0007 5.4418 18.8953 5.18749 18.7077 5ZM18.0007 5.707V6H15.5007C15.2248 5.99945 15.0013 5.77591 15.0007 5.5V2.707L18.0007 5.707ZM6.00073 2.2V17.8C6.00073 17.9105 6.09028 18 6.20073 18H17.8007C17.9112 18 18.0007 17.9105 18.0007 17.8V7H15.5007C14.6723 7 14.0007 6.32843 14.0007 5.5V2H6.20073C6.09073 2 6.00073 2.09 6.00073 2.2Z"
+    fill="#605E5C" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12.5007 12H13.5007C13.7757 12 14.0007 12.225 14.0007 12.5C14.0007 12.775 13.7757 13 13.5007 13H12.5007C12.2257 13 12.0007 12.775 12.0007 12.5C12.0007 12.225 12.2257 12 12.5007 12ZM15.5007 12H16.5007C16.7757 12 17.0007 12.225 17.0007 12.5C17.0007 12.775 16.7757 13 16.5007 13H15.5007C15.2257 13 15.0007 12.775 15.0007 12.5C15.0007 12.225 15.2257 12 15.5007 12Z"
+    fill="#134A2C" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12.5007 10H13.5007C13.7757 10 14.0007 10.225 14.0007 10.5C14.0007 10.775 13.7757 11 13.5007 11H12.5007C12.2257 11 12.0007 10.775 12.0007 10.5C12.0007 10.225 12.2257 10 12.5007 10ZM15.5007 10H16.5007C16.7757 10 17.0007 10.225 17.0007 10.5C17.0007 10.775 16.7757 11 16.5007 11H15.5007C15.2257 11 15.0007 10.775 15.0007 10.5C15.0007 10.225 15.2257 10 15.5007 10Z"
+    fill="#21A366" />
+  <path
+    d="M16.5007 8H15.5007C15.2257 8 15.0007 8.225 15.0007 8.5C15.0007 8.775 15.2257 9 15.5007 9H16.5007C16.7757 9 17.0007 8.775 17.0007 8.5C17.0007 8.225 16.7757 8 16.5007 8Z"
+    fill="#33C481" />
+  <path
+    d="M13.5007 8H12.5007C12.2257 8 12.0007 8.225 12.0007 8.5C12.0007 8.775 12.2257 9 12.5007 9H13.5007C13.7757 9 14.0007 8.775 14.0007 8.5C14.0007 8.225 13.7757 8 13.5007 8Z"
+    fill="#21A366" />
+  <path
+    d="M2.00073 16H10.0007C10.553 16 11.0007 15.5523 11.0007 15V7C11.0007 6.44772 10.553 6 10.0007 6H2.00073C1.44845 6 1.00073 6.44772 1.00073 7V15C1.00073 15.5523 1.44845 16 2.00073 16Z"
+    fill="#107C41" />
+  <path d="M4.60674 14L8.31374 8H7.15074L3.39574 14H4.60674Z" fill="white" />
+  <path d="M7.37374 14L3.66774 8H4.82974L8.58374 14H7.37374Z" fill="white" />
+</svg>

package/assets/logo2.svg

@@ -0,0 +1,11 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect width="192" height="192" fill="url(#pattern0)" />
+  <defs>
+    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+      <use xlink:href="#image0_6503_14415" transform="scale(0.00520833)" />
+    </pattern>
+    <image id="image0_6503_14415" width="192" height="192"
+      xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAToSURBVHgB7d09j1RVHMfxMwQkYCCE3YCiJlZQSQzarNUaEmywpYUW34uW0NgYO1ps0FDYYMESTShMaCh8QBMgRARDMI57eUg2m2WZhzvLnPP7fJLNvoBzvzP/e+aemcHKytVhgUzDbQWCCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiLa9VOjrv78sk7py4Xa5fvleqd1gMCgPf/6uzJNr11ZKbeLeAT48ub/sWaiye2YgLoDXdm8rn3z2ZoFO5D3Awts7y9KpxQKxN8FHj+8rhw7vKmSL3gVaPnOg7NxtIyxZ9OrvWdhRTpx1P5As/uWvG4PeWx2HyOT9vzzdGl18Z2chjwDK063RE2ffcD8QyIo/090PHFt9JyCLANbotkbfff/1Qg4BrPPx6YMelQgigHW6+4HlMwcLGQSwAVujOQTwAh+dWvSoRAABbMKjEu2zupvotkY9Ndo2AbzEkaW97gcaJoAROEXWLgGMwCmydglgRE6RtUkAY3CKrD0CGJOt0bZYyTE5RdYWAUzAoxLtEMCEnCJrgwAm5BRZG6zeFJwiq58ApuQUWd0E0AOnyOolgB44RVYvAfSk2xr94FP3A7URQI+6rVGPStRFAD3zqERdrFTPuq3R5dPuB2ohgBnotkU9KlEHAcyIU2R1EMCMOEVWBwHM0M0fHxTmmwBm5OZPD8q1b+4W5psAZuDOr4/K91/9WZh/AujZ/TuPy6Vzt8qjh/8V5p8AetRd/Bc//231/7+FOgigJ90r/qVzf7j4KyOAnnQzfzf7UxcB9GDl4t0nuz7URwBT6i7+V7HdORwOC9MTwBSuX75nr79yAphQN+9fuXC7UDcBTOD5dif1E8CYnl/8PuhqgwDG0F30PuhqiwDG8O35Wy7+xghgRN0N7+83/im0RQAj6Pb6uy1P2iOAl3hVH3SxNQSwCYda2ieAF7jzi0MtCQSwgfu3H5dL5x1qSSCAdZ580PWFvf4UAljDoZY8Aljjxg9/OdQSRgBrHFna64ttw1jtNZ780IUvto0igHW6L7b1m185BLCB7je/jEIZrPIGjEI5BPACRqEMAtiEUah9VncTRqH2CeAljEJtE8AIjELtsqojMAq1SwAjMgq1SQBjMAq1x2qOwSjUHgGMySjUFgFMwCjUDqs4AaNQOwQwIaNQGwQwBaNQ/azeFIxC9RPAlIxCdRNAD4xC9bJqPehGoaVTi4X6CKAn3VeqHDq8q1AXAfRo+cwBo1BlrFaP9izsKMdO7i/UQwA9O3p8n1GoIgKYAaNQPazSDBiF6iGAGTEK1UEAM2QUmn9WZ4aMQvNPADNmFJpvAtgCRqH5ZVW2gFFofglgi3Sj0Furo9BgUHr7Y3qDlZWrwwKZht4BiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKJtX/0bFsg0/B/JiOOMqV0TXgAAAABJRU5ErkJggg==" />
+  </defs>
+</svg>

package/assets/logo3.svg

@@ -0,0 +1,17 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.45846 18.1689C9.93625 18.1689 11.1356 17.0061 11.1356 15.5734V12.9778H8.45846C6.98068 12.9778 5.7813 14.1407 5.7813 15.5734C5.7813 17.0061 6.98068 18.1689 8.45846 18.1689Z"
+    fill="#0ACF83" />
+  <path
+    d="M5.7813 10.3824C5.7813 8.94962 6.98068 7.7868 8.45846 7.7868H11.1356V12.9778H8.45846C6.98068 12.9779 5.7813 11.8151 5.7813 10.3824Z"
+    fill="#A259FF" />
+  <path
+    d="M5.7813 5.19119C5.7813 3.75846 6.98068 2.59564 8.45846 2.59564H11.1356V7.78668H8.45846C6.98068 7.78668 5.7813 6.62392 5.7813 5.19119Z"
+    fill="#F24E1E" />
+  <path
+    d="M11.1356 2.59583H13.8128C15.2906 2.59583 16.4899 3.75864 16.4899 5.19137C16.4899 6.62411 15.2906 7.78686 13.8128 7.78686H11.1356V2.59583Z"
+    fill="#FF7262" />
+  <path
+    d="M16.4899 10.3824C16.4899 11.8151 15.2906 12.9779 13.8128 12.9779C12.335 12.9779 11.1356 11.8151 11.1356 10.3824C11.1356 8.94962 12.335 7.7868 13.8128 7.7868C15.2906 7.7868 16.4899 8.94962 16.4899 10.3824Z"
+    fill="#1ABCFE" />
+</svg>

package/dist/index.d.ts

@@ -67,6 +67,13 @@ export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
  */
 export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 
+/**
+ * CSS variable names used internally for uniform styling in CardHeader.
+ */
+export declare const cardHeaderCSSVars: {
+    cardHeaderGapVar: string;
+};
+
 /**
  * CardHeader component props.
  */
@@ -83,11 +90,7 @@ export declare type CardHeaderSlots = {
     /**
      * Element used to render an image or avatar related to the card.
      */
-    image: Slot<'div'>;
-    /**
-     * Parent container of the header and description slots.
-     */
-    content?: Slot<'div'>;
+    image: Slot<'div', 'img'>;
     /**
      * Element used to render the main header title.
      */
@@ -133,7 +136,7 @@ export declare type CardPreviewSlots = {
     /**
      * Container that holds a logo related to the image preview provided.
      */
-    logo?: Slot<'div'>;
+    logo?: Slot<'div', 'img'>;
 };
 
 /**

package/lib/components/Card/useCardStyles.js

@@ -59,34 +59,35 @@ const useStyles = /*#__PURE__*/__styles({
     "B2jhnfs": "f16v3d5c",
     "wiictr": "f1su8t2g",
     "Brovlpu": "ftqa4ok",
-    "Bnmjwt4": "flfsvnh",
-    "Jopkrh": ["f1781m5e", "flvaaa9"],
-    "hhrs2v": "f50u1b5",
-    "B7jbng7": ["flvaaa9", "f1781m5e"],
-    "f1b1x7": "f1qcdkjp",
-    "Bsoonpj": "frwipam",
-    "kb7xbg": "fm04wnm",
-    "Bpbhbne": "ffifs4z",
-    "qtucbz": "f1jttrum",
-    "Bh4x314": ["fowbmzg", "f1kmm3zi"],
-    "pacjzv": "f1rvwwl",
-    "wv8bgo": ["f1kmm3zi", "fowbmzg"],
-    "Bpmb9kz": "fld4889",
-    "hnpbc": ["f1fyrmc6", "f1sx0t16"],
-    "six9ky": "fdoni5z",
-    "I0dgv4": ["f1sx0t16", "f1fyrmc6"],
-    "I0hmzl": ["f1o4bf66", "f10vrftj"],
-    "Bfxuv1t": ["f10vrftj", "f1o4bf66"],
-    "Bqb1ydo": ["f10tshoi", "f5b38mp"],
-    "Bwhd17d": ["f5b38mp", "f10tshoi"],
-    "B738g9f": "f1o5urc0",
-    "Ba0kx5p": ["fo4xo12", "f69zm5y"],
-    "mqxxu3": "f6upevr",
-    "Bybbesa": ["f69zm5y", "fo4xo12"],
-    "B65jt9l": "f187pic6",
-    "Bno0hdv": "fgb1g4v",
-    "znsjfh": ["fxk1nzy", "f1asvbfq"],
-    "B4k4nqf": ["f1asvbfq", "fxk1nzy"]
+    "B486eqv": "f2hkw1w",
+    "Bvjrn4i": "fvvvjju",
+    "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
+    "vkx7if": "f3za06g",
+    "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
+    "Bpou26a": "f1l3yytu",
+    "Bxui8rh": "fnfm6nw",
+    "v96tid": "f19m7vnf",
+    "cyjxpb": "f8p7r4r",
+    "Bn0no95": "f1iilt6f",
+    "B573luj": ["f2keu4t", "f14fcfgr"],
+    "B639bv6": "faptqjd",
+    "shdfye": ["f14fcfgr", "f2keu4t"],
+    "gekwd": "f1nughl9",
+    "Du8lva": ["f1aaumo5", "f1c1xt6v"],
+    "Bxo5kf0": "f1dr847h",
+    "G4c1lw": ["f1c1xt6v", "f1aaumo5"],
+    "B7295ny": ["f1ejgvib", "f17d706p"],
+    "Bfl2641": ["f17d706p", "f1ejgvib"],
+    "Bc850wg": ["fc8eb89", "fhk2ovg"],
+    "Bwbif6r": ["fhk2ovg", "fc8eb89"],
+    "Bc7x9ep": "f89yr8c",
+    "Btolfwl": ["f3vokhu", "fgoym2l"],
+    "nuwgkz": "f1b662q1",
+    "iduwum": ["fgoym2l", "f3vokhu"],
+    "zp4aim": "fi8ko2q",
+    "Br8g1vq": "fkyhedp",
+    "s8cxrh": ["fv0hvn5", "f1uj6r53"],
+    "dw1usy": ["f1uj6r53", "fv0hvn5"]
   },
   "orientationHorizontal": {
     "Beiy3e4": "f1063pyq",
@@ -210,8 +211,9 @@ const useStyles = /*#__PURE__*/__styles({
     "Gp14am": ["fzybk4o", "fpgykix"]
   }
 }, {
-  "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;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1qcdkjp:focus::after{content:\"\";}", "[data-keyboard-nav] .frwipam:focus::after{position:absolute;}", "[data-keyboard-nav] .fm04wnm:focus::after{pointer-events:none;}", "[data-keyboard-nav] .ffifs4z:focus::after{z-index:1;}", "[data-keyboard-nav] .f1jttrum:focus::after{border-top-style:solid;}", "[data-keyboard-nav] .fowbmzg:focus::after{border-right-style:solid;}", "[data-keyboard-nav] .f1kmm3zi:focus::after{border-left-style:solid;}", "[data-keyboard-nav] .f1rvwwl:focus::after{border-bottom-style:solid;}", "[data-keyboard-nav] .fld4889:focus::after{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1fyrmc6:focus::after{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1sx0t16:focus::after{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fdoni5z:focus::after{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1o4bf66:focus::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f10vrftj:focus::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f10tshoi:focus::after{border-top-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f5b38mp:focus::after{border-top-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f1o5urc0:focus::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fo4xo12:focus::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f69zm5y:focus::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f6upevr:focus::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f187pic6:focus::after{top:-var(--strokeWidthThick);}", "[data-keyboard-nav] .fgb1g4v:focus::after{bottom:-var(--strokeWidthThick);}", "[data-keyboard-nav] .fxk1nzy:focus::after{left:-var(--strokeWidthThick);}", "[data-keyboard-nav] .f1asvbfq:focus::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);}"],
+  "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;}", ".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .f1l3yytu.fui-focus-visible::after{content:\"\";}", ".fui-FluentProvider .fnfm6nw.fui-focus-visible::after{position:absolute;}", ".fui-FluentProvider .f19m7vnf.fui-focus-visible::after{pointer-events:none;}", ".fui-FluentProvider .f8p7r4r.fui-focus-visible::after{z-index:1;}", ".fui-FluentProvider .f1iilt6f.fui-focus-visible::after{border-top-style:solid;}", ".fui-FluentProvider .f2keu4t.fui-focus-visible::after{border-right-style:solid;}", ".fui-FluentProvider .f14fcfgr.fui-focus-visible::after{border-left-style:solid;}", ".fui-FluentProvider .faptqjd.fui-focus-visible::after{border-bottom-style:solid;}", ".fui-FluentProvider .f1nughl9.fui-focus-visible::after{border-top-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1aaumo5.fui-focus-visible::after{border-right-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1c1xt6v.fui-focus-visible::after{border-left-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1dr847h.fui-focus-visible::after{border-bottom-width:var(--strokeWidthThick);}", ".fui-FluentProvider .f1ejgvib.fui-focus-visible::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fui-FluentProvider .f17d706p.fui-focus-visible::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".fui-FluentProvider .fc8eb89.fui-focus-visible::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fui-FluentProvider .fhk2ovg.fui-focus-visible::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fui-FluentProvider .f89yr8c.fui-focus-visible::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f3vokhu.fui-focus-visible::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fgoym2l.fui-focus-visible::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1b662q1.fui-focus-visible::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fi8ko2q.fui-focus-visible::after{top:-var(--strokeWidthThick);}", ".fui-FluentProvider .fkyhedp.fui-focus-visible::after{bottom:-var(--strokeWidthThick);}", ".fui-FluentProvider .fv0hvn5.fui-focus-visible::after{left:-var(--strokeWidthThick);}", ".fui-FluentProvider .f1uj6r53.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);}"]
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,qCAAtC;AACA,SAAS,oBAAT,QAAqC,mCAArC;AACA,SAAS,oBAAT,QAAqC,mCAArC;AAGA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAA8B;EACvD,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,OAAO,MAAM,WAAW,GAAG;EACzB,WAAW,EAAE,kBADY;EAEzB,mBAAmB,EAAE;AAFI,CAApB;;AAKP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AA8MA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;EACpE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM,cAAc,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC,qBADE;IAErB,QAAQ,EAAE,MAAM,CAAC;EAFI,CAAvB;EAKA,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,MAAM,CAAC,SADA;IAEd,MAAM,EAAE,MAAM,CAAC,UAFD;IAGd,KAAK,EAAE,MAAM,CAAC;EAHA,CAAhB;EAMA,MAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;EASA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,cAAc,CAAC,KAAK,CAAC,WAAP,CAHmB,EAIjC,OAAO,CAAC,KAAK,CAAC,IAAP,CAJ0B,EAKjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MALP,EAMjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBANnB,EAOjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OAPR,EAQjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MARP,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBATtB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAVlC,EAWjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBAXvB,EAYjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAZtB,EAajC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAbvB,EAcjC,KAAK,CAAC,IAAN,CAAW,SAdsB,CAAnC;EAiBA,OAAO,KAAP;AACD,CAzCM","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/"}
+{"version":3,"sources":["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/components/CardHeader/CardHeader.types.js.map

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

package/lib/components/CardHeader/renderCardHeader.js

@@ -10,11 +10,10 @@ export const renderCardHeader_unstable = state => {
     slotProps
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
-  }), slots.content && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
-  }, /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
-  }), /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
-  })), slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  }, slots.image && /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
+  }), /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
+  }), slots.description && /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
+  }), slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
   }));
 };
 //# sourceMappingURL=renderCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,OAAN,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFF,CAHJ,EAQG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CARnB,CADF;AAYD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.image {...slotProps.image} />\n      {slots.content && (\n        <slots.content {...slotProps.content}>\n          <slots.header {...slotProps.header} />\n          <slots.description {...slotProps.description} />\n        </slots.content>\n      )}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFF,EAGG,KAAK,CAAC,WAAN,iBAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAHxB,EAIG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardHeader/useCardHeader.js

@@ -12,7 +12,6 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
 export const useCardHeader_unstable = (props, ref) => {
   const {
     image,
-    content,
     header,
     description,
     action
@@ -21,7 +20,6 @@ export const useCardHeader_unstable = (props, ref) => {
     components: {
       root: 'div',
       image: 'div',
-      content: 'div',
       header: 'span',
       description: 'span',
       action: 'div'
@@ -30,16 +28,11 @@ export const useCardHeader_unstable = (props, ref) => {
       ref,
       ...props
     }),
-    image: resolveShorthand(image, {
-      required: true
-    }),
-    content: resolveShorthand(content || {}),
+    image: resolveShorthand(image),
     header: resolveShorthand(header, {
       required: true
     }),
-    description: resolveShorthand(description, {
-      required: true
-    }),
+    description: resolveShorthand(description),
     action: resolveShorthand(action)
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE,KAAF;IAAS,OAAT;IAAkB,MAAlB;IAA0B,WAA1B;IAAuC;EAAvC,IAAkD,KAAxD;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE,KAFG;MAGV,OAAO,EAAE,KAHC;MAIV,MAAM,EAAE,MAJE;MAKV,WAAW,EAAE,MALH;MAMV,MAAM,EAAE;IANE,CADP;IAUL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CAVtB;IAcL,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,QAAQ,EAAE;IADmB,CAAR,CAdlB;IAiBL,OAAO,EAAE,gBAAgB,CAAC,OAAO,IAAI,EAAZ,CAjBpB;IAkBL,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE;IADqB,CAAT,CAlBnB;IAqBL,WAAW,EAAE,gBAAgB,CAAC,WAAD,EAAc;MACzC,QAAQ,EAAE;IAD+B,CAAd,CArBxB;IAwBL,MAAM,EAAE,gBAAgB,CAAC,MAAD;EAxBnB,CAAP;AA0BD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, content, header, description, action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      content: 'div',\n      header: 'span',\n      description: 'span',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image, {\n      required: true,\n    }),\n    content: resolveShorthand(content || {}),\n    header: resolveShorthand(header, {\n      required: true,\n    }),\n    description: resolveShorthand(description, {\n      required: true,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE,KAAF;IAAS,MAAT;IAAiB,WAAjB;IAA8B;EAA9B,IAAyC,KAA/C;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE,KAFG;MAGV,MAAM,EAAE,MAHE;MAIV,WAAW,EAAE,MAJH;MAKV,MAAM,EAAE;IALE,CADP;IASL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CATtB;IAaL,KAAK,EAAE,gBAAgB,CAAC,KAAD,CAblB;IAcL,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE;IADqB,CAAT,CAdnB;IAiBL,WAAW,EAAE,gBAAgB,CAAC,WAAD,CAjBxB;IAkBL,MAAM,EAAE,gBAAgB,CAAC,MAAD;EAlBnB,CAAP;AAoBD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, header, description, action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'span',\n      description: 'span',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: resolveShorthand(header, {\n      required: true,\n    }),\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardHeader/useCardHeaderStyles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 /**
  * Static CSS class names used internally for the component slots.
  */
@@ -6,42 +6,46 @@ import { __styles, mergeClasses, shorthands } from '@griffel/react';
 export const cardHeaderClassNames = {
   root: 'fui-CardHeader',
   image: 'fui-CardHeader__image',
-  content: 'fui-CardHeader__content',
   header: 'fui-CardHeader__header',
   description: 'fui-CardHeader__description',
   action: 'fui-CardHeader__action'
 };
+/**
+ * CSS variable names used internally for uniform styling in CardHeader.
+ */
+
+export const cardHeaderCSSVars = {
+  cardHeaderGapVar: '--fui-CardHeader--gap'
+};
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "Bt984gj": "f122n59",
-    "i8kkvl": "f4akndk",
-    "Belr9w4": "fe5j3v",
-    "Bqenvij": "f1d2rq10"
+    "Bkc6ea2": "fkufhic",
+    "mc9l5x": "f13qh94s",
+    "t4k1zu": "f8a668j",
+    "v29qe6": "f4h39za",
+    "Bt984gj": "f122n59"
   },
   "image": {
-    "Bf4jedk": "f17fgpbq",
-    "sshi5w": "f1pha7fy",
-    "B2u0y6b": "f44c6la",
-    "Bxyxcbc": "f17bzqcb",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "uw7vt1": "fgn7ydb",
-    "Dzuj6k": "f1jevvm1",
-    "zsb7ef": "fqihwjc",
-    "f2epyl": "f6x1sus"
+    "t21cq0": ["fql5097", "f6yss9k"],
+    "Br312pm": "fwpfdsa",
+    "Ijaq50": "fldnz9j"
   },
-  "textContainer": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bh6795r": "fqerorx",
-    "Bqenvij": "fwk23hs",
-    "Bn3e79g": "f1con4nn"
+  "header": {
+    "Br312pm": "fd46tj4",
+    "Ijaq50": "f16hsg94"
+  },
+  "description": {
+    "Br312pm": "fd46tj4",
+    "Ijaq50": "faunodf"
+  },
+  "action": {
+    "Frg6f3": ["f6yss9k", "fql5097"],
+    "Br312pm": "fis13di",
+    "Ijaq50": "fldnz9j"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
+  "d": [".fkufhic{--fui-CardHeader--gap:12px;}", ".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".f4h39za{grid-auto-rows:1fr min-content;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
 });
 /**
  * Apply styling to the CardHeader slots based on the state.
@@ -56,20 +60,16 @@ export const useCardHeaderStyles_unstable = state => {
     state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
 
-  if (state.content) {
-    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
-  }
-
   if (state.header) {
-    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
+    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);
   }
 
   if (state.description) {
-    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
+    state.description.className = mergeClasses(cardHeaderClassNames.description, styles.description, state.description.className);
   }
 
   if (state.action) {
-    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
+    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);
   }
 
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,KAAK,EAAE,uBAF4D;EAGnE,OAAO,EAAE,yBAH0D;EAInE,MAAM,EAAE,wBAJ2D;EAKnE,WAAW,EAAE,6BALsD;EAMnE,MAAM,EAAE;AAN2D,CAA9D;;AASP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;EACD;;EAED,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,oBAAoB,CAAC,OAAtB,EAA+B,MAAM,CAAC,aAAtC,EAAqD,KAAK,CAAC,OAAN,CAAc,SAAnE,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CAAC,oBAAoB,CAAC,WAAtB,EAAmC,KAAK,CAAC,WAAN,CAAkB,SAArD,CAA1C;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  content: 'fui-CardHeader__content',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    ...shorthands.gap('12px'),\n    height: '32px',\n  },\n  image: {\n    minWidth: '24px',\n    minHeight: '24px',\n    maxWidth: '32px',\n    maxHeight: '32px',\n\n    display: 'flex',\n    alignItems: 'center',\n\n    '> *': {\n      minWidth: 'inherit',\n      minHeight: 'inherit',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n  },\n\n  textContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    height: 'inherit',\n\n    '> *': {\n      height: '50%',\n    },\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,KAAK,EAAE,uBAF4D;EAGnE,MAAM,EAAE,wBAH2D;EAInE,WAAW,EAAE,6BAJsD;EAKnE,MAAM,EAAE;AAL2D,CAA9D;AAQP;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG;EAC/B,gBAAgB,EAAE;AADa,CAA1B;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AA4BA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CACxC,oBAAoB,CAAC,WADmB,EAExC,MAAM,CAAC,WAFiC,EAGxC,KAAK,CAAC,WAAN,CAAkB,SAHsB,CAA1C;EAKD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n  cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n    gridAutoRows: '1fr min-content',\n    alignItems: 'center',\n  },\n  image: {\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      cardHeaderClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.types.js","sourceRoot":"../src/","sources":["components/CardPreview/CardPreview.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the Card component.\n */\nexport type CardPreviewSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Container that holds a logo related to the image preview provided.\n   */\n  logo?: Slot<'div'>;\n};\n\n/**\n * CardPreview component props.\n */\nexport type CardPreviewProps = ComponentProps<CardPreviewSlots>;\n\n/**\n * State used in rendering CardPreview.\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n"]}
+{"version":3,"file":"CardPreview.types.js","sourceRoot":"../src/","sources":["components/CardPreview/CardPreview.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the Card component.\n */\nexport type CardPreviewSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Container that holds a logo related to the image preview provided.\n   */\n  logo?: Slot<'div', 'img'>;\n};\n\n/**\n * CardPreview component props.\n */\nexport type CardPreviewProps = ComponentProps<CardPreviewSlots>;\n\n/**\n * State used in rendering CardPreview.\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n"]}

package/lib/index.js

@@ -1,5 +1,5 @@
 export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
 export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
-export { CardHeader, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
+export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
 export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,IADF,EAEE,cAFF,EAGE,WAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,IADF,EAEE,cAFF,EAGE,WAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  cardHeaderCSSVars,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}