@fluentui/react-card 0.0.0-nightly003de9a95220220111.1 → 0.0.0-nightly0bc161458e20220126.1

package/CHANGELOG.json

@@ -2,15 +2,15 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Tue, 11 Jan 2022 04:18:35 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly003de9a95220220111.1",
-      "version": "0.0.0-nightly003de9a95220220111.1",
+      "date": "Wed, 26 Jan 2022 04:16:44 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly0bc161458e20220126.1",
+      "version": "0.0.0-nightly0bc161458e20220126.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-card",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c",
             "comment": "Release nightly v9"
           },
           {
@@ -32,66 +32,84 @@
             "comment": "Remove empty CardCommons type and outdated boilerplate comments"
           },
           {
-            "author": "olfedias@microsoft.com",
+            "author": "behowell@microsoft.com",
             "package": "@fluentui/react-card",
-            "commit": "158d89b5d98e3544e06f4f09967d2af8ab43e249",
-            "comment": "update styles no not use CSS shorthands"
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
           },
           {
-            "author": "beachball",
+            "author": "olfedias@microsoft.com",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "commit": "1249d2ee042780865e877fc2ed48f56e0eff25d1",
+            "comment": "use Griffel packages"
           },
           {
-            "author": "beachball",
+            "author": "olfedias@microsoft.com",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "commit": "158d89b5d98e3544e06f4f09967d2af8ab43e249",
+            "comment": "update styles no not use CSS shorthands"
           },
           {
-            "author": "beachball",
+            "author": "behowell@microsoft.com",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "Remove component's shorthandProps array"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-text to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "comment": "Bump @fluentui/react-text to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly003de9a95220220111.1",
-            "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           }
         ],
         "none": [
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "8e04b14546f264bb197ffce70bdff8ec83762c49",
+            "comment": "Add Alpha notice"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
           {
             "author": "andredias@microsoft.com",
             "package": "@fluentui/react-card",
             "commit": "c6c745b664df52f5cbdd5a190cc08cae971216e0",
             "comment": "Add component spec"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,29 +1,29 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Tue, 11 Jan 2022 04:18:35 GMT and should not be manually modified.
+This log was last generated on Wed, 26 Jan 2022 04:16:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly003de9a95220220111.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly003de9a95220220111.1)
+## [0.0.0-nightly0bc161458e20220126.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly0bc161458e20220126.1)
 
-Tue, 11 Jan 2022 04:18:35 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.5..@fluentui/react-card_v0.0.0-nightly003de9a95220220111.1)
+Wed, 26 Jan 2022 04:16:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.5..@fluentui/react-card_v0.0.0-nightly0bc161458e20220126.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by email not defined)
 - Update react-icons usage to resizable icons ([PR #21074](https://github.com/microsoft/fluentui/pull/21074) by ololubek@microsoft.com)
 - react-card: Replacing use of functions in makeStyles with direct use of tokens. ([PR #21040](https://github.com/microsoft/fluentui/pull/21040) by Humberto.Morimoto@microsoft.com)
 - Remove empty CardCommons type and outdated boilerplate comments ([PR #21150](https://github.com/microsoft/fluentui/pull/21150) by elcraig@microsoft.com)
+- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
+- use Griffel packages ([PR #21417](https://github.com/microsoft/fluentui/pull/21417) by olfedias@microsoft.com)
 - update styles no not use CSS shorthands ([PR #20794](https://github.com/microsoft/fluentui/pull/20794) by olfedias@microsoft.com)
-- Bump @fluentui/react-make-styles to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/react-text to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
+- Bump @fluentui/react-text to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
 
 ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.5)
 

package/README.md

@@ -1,7 +1,9 @@
-# @fluentui/react-card
+# @fluentui/react-card [ALPHA]
 
 **React Card components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
+**⚠️ Please note that functionality is still being added to this package. Due to lockstep versioning, the version of this package is aligned with the others in _react-components_.**
+
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
 To import React Card components:

package/dist/react-card.d.ts

@@ -23,11 +23,6 @@ export declare const cardFooterClassName = "fui-CardFooter";
  */
 export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: Array<keyof CardFooterSlots>;
-
 export declare type CardFooterSlots = {
     root: IntrinsicShorthandProps<'div'>;
     action?: IntrinsicShorthandProps<'div'>;
@@ -50,8 +45,6 @@ export declare const cardHeaderClassName = "fui-CardHeader";
  */
 export declare type CardHeaderProps = ComponentProps<CardHeaderSlots>;
 
-export declare const cardHeaderShorthandProps: Array<keyof CardHeaderSlots>;
-
 export declare type CardHeaderSlots = {
     root: IntrinsicShorthandProps<'div'>;
     image: IntrinsicShorthandProps<'div'>;
@@ -78,11 +71,6 @@ export declare const cardPreviewClassName = "fui-CardPreview";
  */
 export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-export declare const cardPreviewShorthandProps: Array<keyof CardPreviewSlots>;
-
 export declare type CardPreviewSlots = {
     root: IntrinsicShorthandProps<'div'>;
     logo?: IntrinsicShorthandProps<'div'>;
@@ -110,85 +98,85 @@ export declare type CardState = ComponentState<CardSlots>;
 /**
  * Render the final JSX of Card
  */
-export declare const renderCard: (state: CardState) => JSX.Element;
+export declare const renderCard_unstable: (state: CardState) => JSX.Element;
 
 /**
  * Render the final JSX of CardFooter
  */
-export declare const renderCardFooter: (state: CardFooterState) => JSX.Element;
+export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
 
 /**
  * Render the final JSX of CardHeader
  */
-export declare const renderCardHeader: (state: CardHeaderState) => JSX.Element;
+export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
 
 /**
  * Render the final JSX of CardPreview
  */
-export declare const renderCardPreview: (state: CardPreviewState) => JSX.Element;
+export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
 
 /**
  * Create the state required to render Card.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
  */
-export declare const useCard: (props: CardProps, ref: React_2.Ref<HTMLElement>) => CardState;
+export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLElement>) => CardState;
 
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
  */
-export declare const useCardFooter: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
+export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
 
 /**
  * Apply styling to the CardFooter slots based on the state
  */
-export declare const useCardFooterStyles: (state: CardFooterState) => CardFooterState;
+export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
 
 /**
  * Create the state required to render CardHeader.
  *
- * The returned state can be modified with hooks such as useCardHeaderStyles,
- * before being passed to renderCardHeader.
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+ * before being passed to renderCardHeader_unstable.
  *
  * @param props - props from this instance of CardHeader
  * @param ref - reference to root HTMLElement of CardHeader
  */
-export declare const useCardHeader: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
+export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
 
 /**
  * Apply styling to the CardHeader slots based on the state
  */
-export declare const useCardHeaderStyles: (state: CardHeaderState) => CardHeaderState;
+export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
 
 /**
  * Create the state required to render CardPreview.
  *
- * The returned state can be modified with hooks such as useCardPreviewStyles,
- * before being passed to renderCardPreview.
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+ * before being passed to renderCardPreview_unstable.
  *
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
  */
-export declare const useCardPreview: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
+export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
 
 /**
  * Apply styling to the CardPreview slots based on the state
  */
-export declare const useCardPreviewStyles: (state: CardPreviewState) => CardPreviewState;
+export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
 
 /**
  * Apply styling to the Card slots based on the state
  */
-export declare const useCardStyles: (state: CardState) => CardState;
+export declare const useCardStyles_unstable: (state: CardState) => CardState;
 
 export { }

package/lib/components/Card/Card.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCard } from './useCard';
-import { renderCard } from './renderCard';
-import { useCardStyles } from './useCardStyles';
+import { useCard_unstable } from './useCard';
+import { renderCard_unstable } from './renderCard';
+import { useCardStyles_unstable } from './useCardStyles';
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
  */
 
 export const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCard(props, ref);
-  useCardStyles(state);
-  return renderCard(state);
+  const state = useCard_unstable(props, ref);
+  useCardStyles_unstable(state);
+  return renderCard_unstable(state);
 });
 Card.displayName = 'Card';
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,QAAwB,WAAxB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AAEA,EAAA,aAAa,CAAC,KAAD,CAAb;AACA,SAAO,UAAU,CAAC,KAAD,CAAjB;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AACA,SAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}

package/lib/components/Card/renderCard.d.ts

@@ -2,4 +2,4 @@ import type { CardState } from './Card.types';
 /**
  * Render the final JSX of Card
  */
-export declare const renderCard: (state: CardState) => JSX.Element;
+export declare const renderCard_unstable: (state: CardState) => JSX.Element;

package/lib/components/Card/renderCard.js

@@ -4,7 +4,7 @@ import { getSlots } from '@fluentui/react-utilities';
  * Render the final JSX of Card
  */
 
-export const renderCard = state => {
+export const renderCard_unstable = state => {
   const {
     slots,
     slotProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourceRoot":""}

package/lib/components/Card/useCard.d.ts

@@ -3,10 +3,10 @@ import type { CardProps, CardState } from './Card.types';
 /**
  * Create the state required to render Card.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
  */
-export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;
+export declare const useCard_unstable: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;

package/lib/components/Card/useCard.js

@@ -3,14 +3,14 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
 /**
  * Create the state required to render Card.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
  */
 
-export const useCard = (props, ref) => {
+export const useCard_unstable = (props, ref) => {
   const groupperAttrs = useFocusableGroup({
     tabBehavior: 'limitedTrapFocus'
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAClF,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE;AADyB,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAHtB,GAAP;AAUD,CAfM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE;AADyB,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAHtB,GAAP;AAUD,CAfM","sourceRoot":""}

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

@@ -3,4 +3,4 @@ export declare const cardClassName = "fui-Card";
 /**
  * Apply styling to the Card slots based on the state
  */
-export declare const useCardStyles: (state: CardState) => CardState;
+export declare const useCardStyles_unstable: (state: CardState) => CardState;

package/lib/components/Card/useCardStyles.js

@@ -1,4 +1,4 @@
-import { shorthands, __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { cardPreviewClassName } from '../CardPreview/index';
 export const cardClassName = 'fui-Card';
@@ -44,7 +44,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useCardStyles = state => {
+export const useCardStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardClassName, styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,6BAArD;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,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVwB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CAjBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/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,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVwB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CAjBM","sourceRoot":""}

package/lib/components/CardFooter/CardFooter.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCardFooter } from './useCardFooter';
-import { renderCardFooter } from './renderCardFooter';
-import { useCardFooterStyles } from './useCardFooterStyles';
+import { useCardFooter_unstable } from './useCardFooter';
+import { renderCardFooter_unstable } from './renderCardFooter';
+import { useCardFooterStyles_unstable } from './useCardFooterStyles';
 /**
  * Component to render Button actions in a Card component.
  */
 
 export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardFooter(props, ref);
-  useCardFooterStyles(state);
-  return renderCardFooter(state);
+  const state = useCardFooter_unstable(props, ref);
+  useCardFooterStyles_unstable(state);
+  return renderCardFooter_unstable(state);
 });
 CardFooter.displayName = 'CardFooter';
 //# sourceMappingURL=CardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}

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

@@ -2,4 +2,4 @@ import type { CardFooterState } from './CardFooter.types';
 /**
  * Render the final JSX of CardFooter
  */
-export declare const renderCardFooter: (state: CardFooterState) => JSX.Element;
+export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { cardFooterShorthandProps } from './useCardFooter';
 /**
  * Render the final JSX of CardFooter
  */
 
-export const renderCardFooter = state => {
+export const renderCardFooter_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, cardFooterShorthandProps);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, slotProps.root.children, /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,wBAAT,QAAyC,iBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFF,CADF;AAMD,CATM","sourceRoot":""}

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: Array<keyof CardFooterSlots>;
+import type { CardFooterProps, CardFooterState } from './CardFooter.types';
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
  */
-export declare const useCardFooter: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;
+export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;

package/lib/components/CardFooter/useCardFooter.js

@@ -1,20 +1,15 @@
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-
-export const cardFooterShorthandProps = ['root', 'action'];
 /**
  * Create the state required to render CardFooter.
  *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
  */
 
-export const useCardFooter = (props, ref) => {
+export const useCardFooter_unstable = (props, ref) => {
   const {
     action
   } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAiC,CAAC,MAAD,EAAS,QAAT,CAA/D;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,aAAa,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AACpG,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAVnB,GAAP;AAYD,CAfM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAVnB,GAAP;AAYD,CAfM","sourceRoot":""}

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

@@ -3,4 +3,4 @@ export declare const cardFooterClassName = "fui-CardFooter";
 /**
  * Apply styling to the CardFooter slots based on the state
  */
-export declare const useCardFooterStyles: (state: CardFooterState) => CardFooterState;
+export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 export const cardFooterClassName = 'fui-CardFooter';
 /**
  * Styles for the root slot
@@ -22,7 +22,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useCardFooterStyles = state => {
+export const useCardFooterStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,6BAArD;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,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,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","sourceRoot":""}
+{"version":3,"sources":["../../../src/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","sourceRoot":""}

package/lib/components/CardHeader/CardHeader.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCardHeader } from './useCardHeader';
-import { renderCardHeader } from './renderCardHeader';
-import { useCardHeaderStyles } from './useCardHeaderStyles';
+import { useCardHeader_unstable } from './useCardHeader';
+import { renderCardHeader_unstable } from './renderCardHeader';
+import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
 /**
  * Component to render an image, text and an action in a Card component.
  */
 
 export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCardHeader(props, ref);
-  useCardHeaderStyles(state);
-  return renderCardHeader(state);
+  const state = useCardHeader_unstable(props, ref);
+  useCardHeaderStyles_unstable(state);
+  return renderCardHeader_unstable(state);
 });
 CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=CardHeader.js.map