npm - @fluentui/react-card - Versions diffs - 0.0.0-nightly-20220311-0445.1 → 0.0.0-nightly-20220316-0419.1 - Mend

@fluentui/react-card 0.0.0-nightly-20220311-0445.1 → 0.0.0-nightly-20220316-0419.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,52 +2,58 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Fri, 11 Mar 2022 04:54:33 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20220311-0445.1",
-      "version": "0.0.0-nightly-20220311-0445.1",
+      "date": "Wed, 16 Mar 2022 04:30:34 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20220316-0419.1",
+      "version": "0.0.0-nightly-20220316-0419.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-card",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1",
+            "commit": "not available",
             "comment": "Release nightly v9"
           },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Add static classnames to Card"
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           }
         ],
         "none": [

package/CHANGELOG.md CHANGED Viewed

@@ -1,23 +1,24 @@
 # Change Log - @fluentui/react-card
-This log was last generated on Fri, 11 Mar 2022 04:54:33 GMT and should not be manually modified.
+This log was last generated on Wed, 16 Mar 2022 04:30:34 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20220311-0445.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220311-0445.1)
+## [0.0.0-nightly-20220316-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220316-0419.1)
-Fri, 11 Mar 2022 04:54:33 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.10..@fluentui/react-card_v0.0.0-nightly-20220311-0445.1)
+Wed, 16 Mar 2022 04:30:34 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.10..@fluentui/react-card_v0.0.0-nightly-20220316-0419.1)
 ### Changes
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by email not defined)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-text to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- Add static classnames to Card ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-text to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
 ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.10)

package/dist/react-card.d.ts CHANGED Viewed

@@ -3,14 +3,20 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
  */
 export declare const Card: ForwardRefComponent<CardProps>;
+/**
+ * @deprecated Use `cardClassNames.root` instead.
+ */
 export declare const cardClassName = "fui-Card";
+export declare const cardClassNames: SlotClassNames<CardSlots>;
 export declare type CardCommons = {
     appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
 };
@@ -20,8 +26,13 @@ export declare type CardCommons = {
  */
 export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
+/**
+ * @deprecated Use `cardFooterClassNames.root` instead.
+ */
 export declare const cardFooterClassName = "fui-CardFooter";
+export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
 /**
  * CardFooter props
  */
@@ -42,8 +53,13 @@ export declare type CardFooterState = ComponentState<CardFooterSlots>;
  */
 export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
 export declare const cardHeaderClassName = "fui-CardHeader";
+export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 /**
  * CardHeader props
  */
@@ -68,8 +84,13 @@ export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
  */
 export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
 export declare const cardPreviewClassName = "fui-CardPreview";
+export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 /**
  * CardPreview props
  */

package/lib/components/Card/useCardStyles.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
-import type { CardState } from './Card.types';
+import type { CardSlots, CardState } from './Card.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `cardClassNames.root` instead.
+ */
 export declare const cardClassName = "fui-Card";
+export declare const cardClassNames: SlotClassNames<CardSlots>;
 /**
  * Apply styling to the Card slots based on the state
  */

package/lib/components/Card/useCardStyles.js CHANGED Viewed

@@ -1,7 +1,14 @@
 import { shorthands, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { cardPreviewClassName } from '../CardPreview/index';
+import { cardPreviewClassNames } from '../CardPreview/index';
+/**
+ * @deprecated Use `cardClassNames.root` instead.
+ */
 export const cardClassName = 'fui-Card';
+export const cardClassNames = {
+  root: 'fui-Card'
+};
 /**
  * Styles for the root slot
  */
@@ -144,7 +151,7 @@ const useStyles = /*#__PURE__*/__styles({
 export const useCardStyles_unstable = state => {
   const styles = useStyles();
   const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
-  state.root.className = mergeClasses(cardClassName, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
+  state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
   return state;
 };
 //# sourceMappingURL=useCardStyles.js.map

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

	@@ -1 +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,~~oBAAT~~,~~QAAqC~~,~~sBAArC~~;~~AAGA~~,OAAO,MAAM,aAAa,GAAG,UAAtB;~~AAEP~~;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,~~aADiC~~,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CA3BM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { ~~cardPreviewClassName~~ } from '../CardPreview/index';\nimport type { CardState } from './Card.types';\n\nexport const cardClassName = 'fui-Card';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> :not(.${~~cardPreviewClassName~~})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/*\n Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick \|\|\n state.root.onMouseUp \|\|\n state.root.onMouseDown \|\|\n state.root.onPointerUp \|\|\n state.root.onPointerDown \|\|\n state.root.onTouchStart \|\|\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n ~~cardClassName~~,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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,sBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CA3BM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/*\n @deprecated Use `cardClassNames.root` instead.\n /\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> :not(.${cardPreviewClassNames.root})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/*\n Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick \|\|\n state.root.onMouseUp \|\|\n state.root.onMouseDown \|\|\n state.root.onPointerUp \|\|\n state.root.onPointerDown \|\|\n state.root.onTouchStart \|\|\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,5 +1,10 @@
-import type { CardFooterState } from './CardFooter.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
+/**
+ * @deprecated Use `cardFooterClassNames.root` instead.
+ */
 export declare const cardFooterClassName = "fui-CardFooter";
+export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
 /**
  * Apply styling to the CardFooter slots based on the state
  */

package/lib/components/CardFooter/useCardFooterStyles.js CHANGED Viewed

@@ -1,5 +1,13 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * @deprecated Use `cardFooterClassNames.root` instead.
+ */
 export const cardFooterClassName = 'fui-CardFooter';
+export const cardFooterClassNames = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action'
+};
 /**
  * Styles for the root slot
  */
@@ -24,10 +32,10 @@ const useStyles = /*#__PURE__*/__styles({
 export const useCardFooterStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
   if (state.action) {
-    state.action.className = mergeClasses(styles.action, state.action.className);
+    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
   return state;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"~~AAAA~~,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;~~AAEP~~;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,~~mBAAD~~,~~EAAsB~~,MAAM,CAAC,~~IAA7B~~,~~EAAmC~~,KAAK,CAAC,IAAN,CAAW,~~SAA9C~~,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,MAAM,CAAC,~~MAAR~~,~~EAAgB~~,KAAK,CAAC,MAAN,CAAa,~~SAA7B~~,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterState } from './CardFooter.types';\n\nexport const cardFooterClassName = 'fui-CardFooter';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/\n Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(~~cardFooterClassName~~, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,MAAM,EAAE;AAF2D,CAA9D;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/*\n @deprecated Use `cardFooterClassNames.root` instead.\n /\nexport const cardFooterClassName = 'fui-CardFooter';\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/\n Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardHeader/useCardHeader.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Create the state required to render CardHeader.
@@ -23,8 +22,8 @@ export const useCardHeader_unstable = (props, ref) => {
       root: 'div',
       image: 'div',
       content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'span',
+      description: 'span',
       action: 'div'
     },
     root: getNativeElementProps('div', {

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

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

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

@@ -1,5 +1,10 @@
-import type { CardHeaderState } from './CardHeader.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
 export declare const cardHeaderClassName = "fui-CardHeader";
+export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 /**
  * Apply styling to the CardHeader slots based on the state
  */

package/lib/components/CardHeader/useCardHeaderStyles.js CHANGED Viewed

@@ -1,5 +1,17 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
 export const cardHeaderClassName = 'fui-CardHeader';
+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'
+};
 /**
  * Styles for the root slot
  */
@@ -42,14 +54,26 @@ const useStyles = /*#__PURE__*/__styles({
 export const useCardHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
   if (state.content) {
-    state.content.className = mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
+  }
+  if (state.header) {
+    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
+  }
+  if (state.description) {
+    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
+  }
+  if (state.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
   }
   return state;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"~~AAAA~~,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;~~AAEP~~;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,~~mBAAD~~,~~EAAsB~~,MAAM,CAAC,~~IAA7B~~,~~EAAmC~~,KAAK,CAAC,IAAN,CAAW,~~SAA9C~~,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,~~KAAR~~,~~EAAe~~,KAAK,CAAC,KAAN,CAAY,~~SAA3B~~,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,~~aAAR~~,~~EAAuB~~,KAAK,CAAC,OAAN,CAAc,~~SAArC~~,CAAtC;AACD;;AAED,SAAO,KAAP;AACD,~~CAbM~~","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderState } from './CardHeader.types';\n\nexport const cardHeaderClassName = 'fui-CardHeader';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> ': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> ': {\n height: '50%',\n },\n },\n});\n\n/\n Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(~~cardHeaderClassName~~, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(styles.textContainer, state.content.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,OAAO,EAAE,yBAH0D;AAInE,EAAA,MAAM,EAAE,wBAJ2D;AAKnE,EAAA,WAAW,EAAE,6BALsD;AAMnE,EAAA,MAAM,EAAE;AAN2D,CAA9D;AASP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,oBAAoB,CAAC,OAAtB,EAA+B,MAAM,CAAC,aAAtC,EAAqD,KAAK,CAAC,OAAN,CAAc,SAAnE,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,MAAI,KAAK,CAAC,WAAV,EAAuB;AACrB,IAAA,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CAAC,oBAAoB,CAAC,WAAtB,EAAmC,KAAK,CAAC,WAAN,CAAkB,SAArD,CAA1C;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,SAAO,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 @deprecated Use `cardHeaderClassNames.root` instead.\n /\nexport const cardHeaderClassName = 'fui-CardHeader';\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\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> ': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> ': {\n height: '50%',\n },\n },\n});\n\n/\n Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(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/"}

package/lib/components/CardPreview/useCardPreviewStyles.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
-import type { CardPreviewState } from './CardPreview.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
 export declare const cardPreviewClassName = "fui-CardPreview";
+export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 /**
  * Apply styling to the CardPreview slots based on the state
  */

package/lib/components/CardPreview/useCardPreviewStyles.js CHANGED Viewed

@@ -1,5 +1,13 @@
 import { __styles, mergeClasses } from '@griffel/react';
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
 export const cardPreviewClassName = 'fui-CardPreview';
+export const cardPreviewClassNames = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo'
+};
 /**
  * Styles for the root slot
  */
@@ -27,10 +35,10 @@ const useStyles = /*#__PURE__*/__styles({
 export const useCardPreviewStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
   if (state.logo) {
-    state.logo.className = mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
   return state;

package/lib/components/CardPreview/useCardPreviewStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"~~AAAA~~,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;~~AAEP~~;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,~~oBAAD~~,~~EAAuB~~,MAAM,CAAC,~~IAA9B~~,~~EAAoC~~,KAAK,CAAC,IAAN,CAAW,~~SAA/C~~,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,~~IAAR~~,~~EAAc~~,KAAK,CAAC,IAAN,CAAW,~~SAAzB~~,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewState } from './CardPreview.types';\n\nexport const cardPreviewClassName = 'fui-CardPreview';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> ': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/*\n Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(~~cardPreviewClassName~~, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,IAAI,EAAE;AAF+D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/*\n @deprecated Use `cardPreviewClassNames.root` instead.\n /\nexport const cardPreviewClassName = 'fui-CardPreview';\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> ': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/*\n Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Card/useCardStyles.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
-import type { CardState } from './Card.types';
+import type { CardSlots, CardState } from './Card.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `cardClassNames.root` instead.
+ */
 export declare const cardClassName = "fui-Card";
+export declare const cardClassNames: SlotClassNames<CardSlots>;
 /**
  * Apply styling to the Card slots based on the state
  */

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

@@ -3,15 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardStyles_unstable = exports.cardClassName = void 0;
+exports.useCardStyles_unstable = exports.cardClassNames = exports.cardClassName = void 0;
 const react_1 = /*#__PURE__*/require("@griffel/react");
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 const index_1 = /*#__PURE__*/require("../CardPreview/index");
+/**
+ * @deprecated Use `cardClassNames.root` instead.
+ */
 exports.cardClassName = 'fui-Card';
+exports.cardClassNames = {
+  root: 'fui-Card'
+};
 /**
  * Styles for the root slot
  */
@@ -154,7 +161,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useCardStyles_unstable = state => {
   const styles = useStyles();
   const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
-  state.root.className = react_1.mergeClasses(exports.cardClassName, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;~~AAGa~~,OAAA,CAAA,aAAA,GAAgB,UAAhB;~~AAEb~~;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,~~aADqB~~,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHnB,EAIrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJ/B,EAKrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALpB,EAMrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANnB,EAOrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPlC,EAQrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAR9C,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATnC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVlC,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { ~~cardPreviewClassName~~ } from '../CardPreview/index';\nimport type { CardState } from './Card.types';\n\nexport const cardClassName = 'fui-Card';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> :not(.${~~cardPreviewClassName~~})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/*\n Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick \|\|\n state.root.onMouseUp \|\|\n state.root.onMouseDown \|\|\n state.root.onPointerUp \|\|\n state.root.onPointerDown \|\|\n state.root.onTouchStart \|\|\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n ~~cardClassName~~,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,aAAA,GAAgB,UAAhB;AACA,OAAA,CAAA,cAAA,GAA4C;AACvD,EAAA,IAAI,EAAE;AADiD,CAA5C;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cAAA,CAAe,IADM,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHnB,EAIrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJ/B,EAKrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALpB,EAMrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANnB,EAOrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPlC,EAQrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAR9C,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATnC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVlC,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/*\n @deprecated Use `cardClassNames.root` instead.\n /\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> :not(.${cardPreviewClassNames.root})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/*\n Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick \|\|\n state.root.onMouseUp \|\|\n state.root.onMouseDown \|\|\n state.root.onPointerUp \|\|\n state.root.onPointerDown \|\|\n state.root.onTouchStart \|\|\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
-import type { CardFooterState } from './CardFooter.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
+/**
+ * @deprecated Use `cardFooterClassNames.root` instead.
+ */
 export declare const cardFooterClassName = "fui-CardFooter";
+export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
 /**
  * Apply styling to the CardFooter slots based on the state
  */

package/lib-commonjs/components/CardFooter/useCardFooterStyles.js CHANGED Viewed

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardFooterStyles_unstable = exports.cardFooterClassName = void 0;
+exports.useCardFooterStyles_unstable = exports.cardFooterClassNames = exports.cardFooterClassName = void 0;
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `cardFooterClassNames.root` instead.
+ */
 exports.cardFooterClassName = 'fui-CardFooter';
+exports.cardFooterClassNames = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action'
+};
 /**
  * Styles for the root slot
  */
@@ -32,10 +40,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useCardFooterStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.cardFooterClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.cardFooterClassNames.root, styles.root, state.root.className);
   if (state.action) {
-    state.action.className = react_1.mergeClasses(styles.action, state.action.className);
+    state.action.className = react_1.mergeClasses(exports.cardFooterClassNames.action, styles.action, state.action.className);
   }
   return state;

package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;~~AAAA~~,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;~~AAGa~~,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;~~AAEb~~;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,~~mBAAb~~,~~EAAkC~~,MAAM,CAAC,~~IAAzC,EAA+~~C,KAAK,CAAC,IAAN,CAAW,~~SAA1D~~,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,~~MAApB~~,~~EAA4B~~,KAAK,CAAC,MAAN,CAAa,~~SAAzC~~,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterState } from './CardFooter.types';\n\nexport const cardFooterClassName = 'fui-CardFooter';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/\n Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(~~cardFooterClassName~~, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,MAAM,EAAE;AAF2D,CAAxD;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,MAAM,CAAC,MAAjD,EAAyD,KAAK,CAAC,MAAN,CAAa,SAAtE,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/*\n @deprecated Use `cardFooterClassNames.root` instead.\n /\nexport const cardFooterClassName = 'fui-CardFooter';\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/\n Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CardHeader/useCardHeader.js CHANGED Viewed

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCardHeader_unstable = void 0;
-const React = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render CardHeader.
@@ -32,8 +30,8 @@ const useCardHeader_unstable = (props, ref) => {
       root: 'div',
       image: 'div',
       content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'span',
+      description: 'span',
       action: 'div'
     },
     root: react_utilities_1.getNativeElementProps('div', {

package/lib-commonjs/components/CardHeader/useCardHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;~~AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;~~AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,~~KAAK,CAAC,QAJJ~~;AAKV,MAAA,WAAW,EAAE,~~KAAK,CAAC,QALT~~;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAVD;AAcL,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAxB,CAdF;AAiBL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAO,IAAI,EAA5B,CAjBJ;AAkBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAzB,CAlBH;AAqBL,IAAA,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,WAAjB,EAA8B;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAA9B,CArBR;AAwBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAxBH,GAAP;AA0BD,CA7BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/*\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, content, header, description, action } = props;\n\n return {\n components: {\n root: 'div',\n image: 'div',\n content: 'div',\n header: ~~React.Fragment~~,\n description: ~~React.Fragment~~,\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n image: resolveShorthand(image, {\n required: true,\n }),\n content: resolveShorthand(content \|\| {}),\n header: resolveShorthand(header, {\n required: true,\n }),\n description: resolveShorthand(description, {\n required: true,\n }),\n action: resolveShorthand(action),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,MAJE;AAKV,MAAA,WAAW,EAAE,MALH;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAVD;AAcL,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAxB,CAdF;AAiBL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAO,IAAI,EAA5B,CAjBJ;AAkBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAzB,CAlBH;AAqBL,IAAA,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,WAAjB,EAA8B;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAA9B,CArBR;AAwBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAxBH,GAAP;AA0BD,CA7BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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/"}

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
-import type { CardHeaderState } from './CardHeader.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
 export declare const cardHeaderClassName = "fui-CardHeader";
+export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 /**
  * Apply styling to the CardHeader slots based on the state
  */

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js CHANGED Viewed

@@ -3,11 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardHeaderStyles_unstable = exports.cardHeaderClassName = void 0;
+exports.useCardHeaderStyles_unstable = exports.cardHeaderClassNames = exports.cardHeaderClassName = void 0;
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
 exports.cardHeaderClassName = 'fui-CardHeader';
+exports.cardHeaderClassNames = {
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  content: 'fui-CardHeader__content',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action'
+};
 /**
  * Styles for the root slot
  */
@@ -50,14 +62,26 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useCardHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.cardHeaderClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.cardHeaderClassNames.root, styles.root, state.root.className);
   if (state.image) {
-    state.image.className = react_1.mergeClasses(styles.image, state.image.className);
+    state.image.className = react_1.mergeClasses(exports.cardHeaderClassNames.image, styles.image, state.image.className);
   }
   if (state.content) {
-    state.content.className = react_1.mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = react_1.mergeClasses(exports.cardHeaderClassNames.content, styles.textContainer, state.content.className);
+  }
+  if (state.header) {
+    state.header.className = react_1.mergeClasses(exports.cardHeaderClassNames.header, state.header.className);
+  }
+  if (state.description) {
+    state.description.className = react_1.mergeClasses(exports.cardHeaderClassNames.description, state.description.className);
+  }
+  if (state.action) {
+    state.action.className = react_1.mergeClasses(exports.cardHeaderClassNames.action, state.action.className);
   }
   return state;

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;~~AAAA~~,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;~~AAGa~~,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;~~AAEb~~;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,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;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,~~mBAAb~~,~~EAAkC~~,MAAM,CAAC,~~IAAzC,EAA+~~C,KAAK,CAAC,IAAN,CAAW,~~SAA1D~~,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,~~KAApB~~,~~EAA2B~~,KAAK,CAAC,KAAN,CAAY,~~SAAvC~~,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,~~aAApB~~,~~EAAmC~~,KAAK,CAAC,OAAN,CAAc,~~SAAjD~~,CAA1B;AACD;;AAED,SAAO,KAAP;AACD,~~CAbM~~;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderState } from './CardHeader.types';\n\nexport const cardHeaderClassName = 'fui-CardHeader';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> ': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> ': {\n height: '50%',\n },\n },\n});\n\n/\n Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(~~cardHeaderClassName~~, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(styles.textContainer, state.content.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,OAAO,EAAE,yBAH0D;AAInE,EAAA,MAAM,EAAE,wBAJ2D;AAKnE,EAAA,WAAW,EAAE,6BALsD;AAMnE,EAAA,MAAM,EAAE;AAN2D,CAAxD;AASb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,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;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,KAAlC,EAAyC,MAAM,CAAC,KAAhD,EAAuD,KAAK,CAAC,KAAN,CAAY,SAAnE,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,OAAlC,EAA2C,MAAM,CAAC,aAAlD,EAAiE,KAAK,CAAC,OAAN,CAAc,SAA/E,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,KAAK,CAAC,MAAN,CAAa,SAAvD,CAAzB;AACD;;AAED,MAAI,KAAK,CAAC,WAAV,EAAuB;AACrB,IAAA,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,WAAlC,EAA+C,KAAK,CAAC,WAAN,CAAkB,SAAjE,CAA9B;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,KAAK,CAAC,MAAN,CAAa,SAAvD,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","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 @deprecated Use `cardHeaderClassNames.root` instead.\n /\nexport const cardHeaderClassName = 'fui-CardHeader';\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\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> ': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> ': {\n height: '50%',\n },\n },\n});\n\n/\n Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(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/"}

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
-import type { CardPreviewState } from './CardPreview.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
 export declare const cardPreviewClassName = "fui-CardPreview";
+export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 /**
  * Apply styling to the CardPreview slots based on the state
  */

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js CHANGED Viewed

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardPreviewStyles_unstable = exports.cardPreviewClassName = void 0;
+exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames = exports.cardPreviewClassName = void 0;
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
 exports.cardPreviewClassName = 'fui-CardPreview';
+exports.cardPreviewClassNames = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo'
+};
 /**
  * Styles for the root slot
  */
@@ -35,10 +43,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useCardPreviewStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.cardPreviewClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.cardPreviewClassNames.root, styles.root, state.root.className);
   if (state.logo) {
-    state.logo.className = react_1.mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = react_1.mergeClasses(exports.cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
   return state;

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;~~AAAA~~,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;~~AAGa~~,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;~~AAEb~~;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,~~oBAAb~~,~~EAAmC~~,MAAM,CAAC,~~IAA1C~~,~~EAAgD~~,KAAK,CAAC,IAAN,CAAW,~~SAA3D~~,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,~~IAApB~~,~~EAA0B~~,KAAK,CAAC,IAAN,CAAW,~~SAArC~~,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewState } from './CardPreview.types';\n\nexport const cardPreviewClassName = 'fui-CardPreview';\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> ': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/*\n Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(~~cardPreviewClassName~~, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AACA,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,IAAI,EAAE;AAF+D,CAA1D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/*\n @deprecated Use `cardPreviewClassNames.root` instead.\n /\nexport const cardPreviewClassName = 'fui-CardPreview';\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\n/\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> ': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/*\n Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "0.0.0-nightly-20220311-0445.1",
+  "version": "0.0.0-nightly-20220316-0419.1",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -29,16 +29,16 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220311-0445.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220316-0419.1",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/react-text": "0.0.0-nightly-20220311-0445.1",
-    "@fluentui/react-button": "0.0.0-nightly-20220311-0445.1"
+    "@fluentui/react-text": "0.0.0-nightly-20220316-0419.1",
+    "@fluentui/react-button": "0.0.0-nightly-20220316-0419.1"
   },
   "dependencies": {
     "@griffel/react": "1.0.0",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220311-0445.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20220311-0445.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20220311-0445.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220316-0419.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20220316-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220316-0419.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {