@fluentui/react-card 0.0.0-nightly-20220603-0421.1 → 0.0.0-nightly-20220608-0420.1

package/CHANGELOG.json

@@ -2,16 +2,46 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Fri, 03 Jun 2022 04:31:00 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20220603-0421.1",
-      "version": "0.0.0-nightly-20220603-0421.1",
+      "date": "Wed, 08 Jun 2022 04:32:03 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20220608-0420.1",
+      "version": "0.0.0-nightly-20220608-0420.1",
       "comments": {
         "prerelease": [
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "06030b7cbf61b157df4b2a203a456aca6380ea6b",
+            "comment": "feat: add `orientation` prop"
+          },
+          {
+            "author": "39736248+andrefcdias@users.noreply.github.com",
+            "package": "@fluentui/react-card",
+            "commit": "0a35ab4703e21e5f6763b17ed33a48ad3ae4409b",
+            "comment": "chore: add basic API documentation"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220608-0420.1",
+            "commit": "60b10ac54e8953147582e39ccf022ad0044d1733"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220608-0420.1",
+            "commit": "60b10ac54e8953147582e39ccf022ad0044d1733"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220608-0420.1",
+            "commit": "60b10ac54e8953147582e39ccf022ad0044d1733"
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220603-0421.1",
-            "commit": "7e01ef3be7bd1ab07745569c2678301053222f6b"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220608-0420.1",
+            "commit": "60b10ac54e8953147582e39ccf022ad0044d1733"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,17 +1,22 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Fri, 03 Jun 2022 04:31:00 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Jun 2022 04:32:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220603-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220603-0421.1)
+## [0.0.0-nightly-20220608-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220608-0420.1)
 
-Fri, 03 Jun 2022 04:31:00 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220603-0421.1)
+Wed, 08 Jun 2022 04:32:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220608-0420.1)
 
 ### Changes
 
-- Bump @fluentui/react-button to v0.0.0-nightly-20220603-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/7e01ef3be7bd1ab07745569c2678301053222f6b) by beachball)
+- feat: add `orientation` prop ([PR #23037](https://github.com/microsoft/fluentui/pull/23037) by 39736248+andrefcdias@users.noreply.github.com)
+- chore: add basic API documentation ([PR #23410](https://github.com/microsoft/fluentui/pull/23410) by 39736248+andrefcdias@users.noreply.github.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220608-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/60b10ac54e8953147582e39ccf022ad0044d1733) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220608-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/60b10ac54e8953147582e39ccf022ad0044d1733) by beachball)
+- Bump @fluentui/react-text to v0.0.0-nightly-20220608-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/60b10ac54e8953147582e39ccf022ad0044d1733) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20220608-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/60b10ac54e8953147582e39ccf022ad0044d1733) by beachball)
 
 ## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.18)
 

package/assets/logo.svg

@@ -0,0 +1,9 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="192" height="192" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_8855_1044" transform="scale(0.00520833)"/>
+</pattern>
+<image id="image0_8855_1044" width="192" height="192" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

package/dist/index.d.ts

@@ -10,8 +10,14 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Card: ForwardRefComponent<CardProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardClassNames: SlotClassNames<CardSlots>;
 
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */
 export declare const cardCSSVars: {
     cardSizeVar: string;
 };
@@ -21,20 +27,32 @@ export declare const cardCSSVars: {
  */
 export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
 
 /**
- * CardFooter props
+ * CardFooter component props.
  */
 export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 
+/**
+ * Slots available in the CardFooter component.
+ */
 export declare type CardFooterSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
+    /**
+     * Container that renders on the far end of the footer, used for action buttons.
+     */
     action?: Slot<'div'>;
 };
 
 /**
- * State used in rendering CardFooter
+ * State used in rendering CardFooter.
  */
 export declare type CardFooterState = ComponentState<CardFooterSlots>;
 
@@ -43,24 +61,48 @@ export declare type CardFooterState = ComponentState<CardFooterSlots>;
  */
 export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
 
 /**
- * CardHeader props
+ * CardHeader component props.
  */
 export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
+/**
+ * Slots available in the CardHeader component.
+ */
 export declare type CardHeaderSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
+    /**
+     * Element used to render an image or avatar related to the card.
+     */
     image: Slot<'div'>;
+    /**
+     * Parent container of the header and description slots.
+     */
     content?: Slot<'div'>;
+    /**
+     * Element used to render the main header title.
+     */
     header: Slot<'span'>;
+    /**
+     * Element used to render short descriptions related to the title.
+     */
     description: Slot<'span'>;
+    /**
+     * Container that renders on the far end of the footer, used for action buttons.
+     */
     action?: Slot<'div'>;
 };
 
 /**
- * State used in rendering CardHeader
+ * State used in rendering CardHeader.
  */
 export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
 
@@ -69,25 +111,37 @@ export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
  */
 export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
 
 /**
- * CardPreview props
+ * CardPreview component props.
  */
 export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
+/**
+ * Slots available in the Card component.
+ */
 export declare type CardPreviewSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
+    /**
+     * Container that holds a logo related to the image preview provided.
+     */
     logo?: Slot<'div'>;
 };
 
 /**
- * State used in rendering CardPreview
+ * State used in rendering CardPreview.
  */
 export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
 
 /**
- * Card Props
+ * Card component props.
  */
 export declare type CardProps = ComponentProps<CardSlots> & {
     appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
@@ -109,38 +163,55 @@ export declare type CardProps = ComponentProps<CardSlots> & {
      * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
      * after the last inner element.
      *
-     * @defaultvalue off
+     * @default 'off'
      */
     focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
+    /**
+     * Defines the orientation of the card.
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controls the card's border radius and padding between inner elements.
+     *
+     * @default 'medium'
+     */
     size?: 'small' | 'medium' | 'large';
 };
 
+/**
+ * Slots available in the Card component.
+ */
 export declare type CardSlots = {
+    /**
+     * Root element of the component.
+     */
     root: Slot<'div'>;
 };
 
 /**
- * State used in rendering Card
+ * State used in rendering Card.
  */
-export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'size'>>;
+export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;
 
 /**
- * Render the final JSX of Card
+ * Render the final JSX of Card.
  */
 export declare const renderCard_unstable: (state: CardState) => JSX.Element;
 
 /**
- * Render the final JSX of CardFooter
+ * Render the final JSX of CardFooter.
  */
 export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
 
 /**
- * Render the final JSX of CardHeader
+ * Render the final JSX of CardHeader.
  */
 export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
 
 /**
- * Render the final JSX of CardPreview
+ * Render the final JSX of CardPreview.
  */
 export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
 
@@ -167,7 +238,7 @@ export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLE
 export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
 
 /**
- * Apply styling to the CardFooter slots based on the state
+ * Apply styling to the CardFooter slots based on the state.
  */
 export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
 
@@ -183,7 +254,7 @@ export declare const useCardFooterStyles_unstable: (state: CardFooterState) => C
 export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
 
 /**
- * Apply styling to the CardHeader slots based on the state
+ * Apply styling to the CardHeader slots based on the state.
  */
 export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
 
@@ -199,12 +270,12 @@ export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => C
 export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
 
 /**
- * Apply styling to the CardPreview slots based on the state
+ * Apply styling to the CardPreview slots based on the state.
  */
 export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
 
 /**
- * Apply styling to the Card slots based on the state
+ * Apply styling to the Card slots based on the state.
  */
 export declare const useCardStyles_unstable: (state: CardState) => CardState;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @defaultvalue off\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'size'>>;\n"]}
+{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @default 'off'\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  /**\n   * Defines the orientation of the card.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n\n  /**\n   * Controls the card's border radius and padding between inner elements.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;\n"]}

package/lib/components/Card/renderCard.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
- * Render the final JSX of Card
+ * Render the final JSX of Card.
  */
 
 export const renderCard_unstable = state => {

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

@@ -1 +1 @@
-{"version":3,"sources":["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;EACtD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAY,KAAZ,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card\n */\nexport const renderCard_unstable = (state: CardState) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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;EACtD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAY,KAAZ,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Card/useCard.js

@@ -14,6 +14,7 @@ export const useCard_unstable = (props, ref) => {
   const {
     appearance = 'filled',
     focusMode = 'off',
+    orientation = 'vertical',
     size = 'medium'
   } = props;
   const focusMap = {
@@ -31,6 +32,7 @@ export const useCard_unstable = (props, ref) => {
   } : null;
   return {
     appearance,
+    orientation,
     size,
     components: {
       root: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["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;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,IAAI,GAAG;EAAnD,IAAgE,KAAtE;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAD,CAAvC;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,IAFK;IAIL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CAJP;IAKL,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAApB;EALtB,CAAP;AAYD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const { appearance = 'filled', focusMode = 'off', size = 'medium' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited',\n  } as const;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n  return {\n    appearance,\n    size,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...focusAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAD,CAAvC;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAApB;EANtB,CAAP;AAaD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const { appearance = 'filled', focusMode = 'off', orientation = 'vertical', size = 'medium' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited',\n  } as const;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n  return {\n    appearance,\n    orientation,\n    size,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...focusAttrs,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Card/useCardStyles.js

@@ -1,20 +1,26 @@
 import { shorthands, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { cardPreviewClassNames } from '../CardPreview/index';
+import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
+import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
+import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+
 export const cardClassNames = {
   root: 'fui-Card'
 };
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */
+
 export const cardCSSVars = {
   cardSizeVar: '--fui-Card--size'
 };
-/**
- * Styles for the root slot
- */
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
     "qhf8xq": "f10pi13n",
     "B68tc82": "f1p9o1ba",
     "Bmxbyg5": "f1sil6mw",
@@ -40,6 +46,18 @@ const useStyles = /*#__PURE__*/__styles({
     "uwmqm3": ["f1k04kkk", "f10m5gbb"],
     "i8kkvl": "fxsr4vj",
     "Belr9w4": "fcvsdzp",
+    "B2jhnfs": "f16v3d5c",
+    "wiictr": "f1su8t2g"
+  },
+  "orientationHorizontal": {
+    "Beiy3e4": "f1063pyq",
+    "Bt984gj": "f122n59",
+    "Bnoktp0": "fpfyeui",
+    "Idhjb2": "fwi74qw",
+    "Bsdbyht": ["f1yfsbdm", "f1vk4t4a"]
+  },
+  "orientationVertical": {
+    "Beiy3e4": "f1vx9l62",
     "Bt4kzjz": ["fobhde4", "fx5r7kn"],
     "B1ou843": ["fx5r7kn", "fobhde4"],
     "ydhu1d": "frl7skw"
@@ -162,24 +180,28 @@ const useStyles = /*#__PURE__*/__styles({
     "Gp14am": ["fzybk4o", "fpgykix"]
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
   "h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   "a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
- * Apply styling to the Card slots based on the state
+ * Apply styling to the Card slots based on the state.
  */
 
 
 export const useCardStyles_unstable = state => {
   const styles = useStyles();
+  const orientationMap = {
+    horizontal: styles.orientationHorizontal,
+    vertical: styles.orientationVertical
+  };
   const sizeMap = {
     small: styles.sizeSmall,
     medium: styles.sizeMedium,
     large: styles.sizeLarge
   };
   const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
-  state.root.className = mergeClasses(cardClassNames.root, styles.root, sizeMap[state.size], state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
+  state.root.className = mergeClasses(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
   return state;
 };
 //# sourceMappingURL=useCardStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n};\nexport const cardCSSVars = {\n  cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n    color: tokens.colorNeutralForeground1,\n\n    '::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      content: '\"\"',\n      pointerEvents: 'none',\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n    },\n\n    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n    ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n    [`> .${cardPreviewClassNames.root}`]: {\n      marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n      marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n\n  sizeSmall: {\n    [cardCSSVars.cardSizeVar]: '8px',\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  sizeMedium: {\n    [cardCSSVars.cardSizeVar]: '12px',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  sizeLarge: {\n    [cardCSSVars.cardSizeVar]: '16px',\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n\n  interactiveNoOutline: {\n    ':hover::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n    ':active::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n\n  filledInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  filledAlternativeInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n    },\n  },\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  outlineInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      },\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n  subtleInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const sizeMap = {\n    small: styles.sizeSmall,\n    medium: styles.sizeMedium,\n    large: styles.sizeLarge,\n  } as const;\n\n  const interactive =\n    state.root.onClick ||\n    state.root.onMouseUp ||\n    state.root.onMouseDown ||\n    state.root.onPointerUp ||\n    state.root.onPointerDown ||\n    state.root.onTouchStart ||\n    state.root.onTouchEnd;\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    sizeMap[state.size],\n    state.appearance === 'filled' && styles.filled,\n    state.appearance === 'filled-alternative' && styles.filledAlternative,\n    state.appearance === 'outline' && styles.outline,\n    state.appearance === 'subtle' && styles.subtle,\n    interactive && state.appearance === 'filled' && styles.filledInteractive,\n    interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n    interactive && state.appearance === 'outline' && styles.outlineInteractive,\n    interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n    interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n  cardSizeVar: '--fui-Card--size',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n    color: tokens.colorNeutralForeground1,\n\n    // Border setting using after pseudo element to allow CardPreview to render behind it.\n    '::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      content: '\"\"',\n      pointerEvents: 'none',\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n    },\n\n    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n    ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n      flexShrink: 0,\n    },\n    // Allows non-card components to grow to fill the available space.\n    [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n      flexGrow: 1,\n    },\n  },\n\n  orientationHorizontal: {\n    flexDirection: 'row',\n    alignItems: 'center',\n\n    // Remove vertical padding to keep CardPreview content flush with Card's borders.\n    [`> .${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n      marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n    // As such, the code below targets a CardPreview, when it's the first element.\n    // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n      marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n  orientationVertical: {\n    flexDirection: 'column',\n\n    // Remove lateral padding to keep CardPreview content flush with Card's borders.\n    [`> .${cardPreviewClassNames.root}`]: {\n      marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n      marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n    // As such, the code below targets a CardPreview, when it's the first element.\n    // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n\n  sizeSmall: {\n    [cardCSSVars.cardSizeVar]: '8px',\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  sizeMedium: {\n    [cardCSSVars.cardSizeVar]: '12px',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  sizeLarge: {\n    [cardCSSVars.cardSizeVar]: '16px',\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n\n  interactiveNoOutline: {\n    ':hover::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n    ':active::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n\n  filledInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  filledAlternativeInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n    },\n  },\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n  outlineInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n      '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      },\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n  subtleInteractive: {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\n    },\n  },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  } as const;\n\n  const sizeMap = {\n    small: styles.sizeSmall,\n    medium: styles.sizeMedium,\n    large: styles.sizeLarge,\n  } as const;\n\n  const interactive =\n    state.root.onClick ||\n    state.root.onMouseUp ||\n    state.root.onMouseDown ||\n    state.root.onPointerUp ||\n    state.root.onPointerDown ||\n    state.root.onTouchStart ||\n    state.root.onTouchEnd;\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    state.appearance === 'filled' && styles.filled,\n    state.appearance === 'filled-alternative' && styles.filledAlternative,\n    state.appearance === 'outline' && styles.outline,\n    state.appearance === 'subtle' && styles.subtle,\n    interactive && state.appearance === 'filled' && styles.filledInteractive,\n    interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n    interactive && state.appearance === 'outline' && styles.outlineInteractive,\n    interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n    interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.types.js","sourceRoot":"../src/","sources":["components/CardFooter/CardFooter.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardFooterSlots = {\n  root: Slot<'div'>;\n  action?: Slot<'div'>;\n};\n\n/**\n * CardFooter props\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * State used in rendering CardFooter\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"]}
+{"version":3,"file":"CardFooter.types.js","sourceRoot":"../src/","sources":["components/CardFooter/CardFooter.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardFooter component.\n */\nexport type CardFooterSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Container that renders on the far end of the footer, used for action buttons.\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * CardFooter component props.\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"]}

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
- * Render the final JSX of CardFooter
+ * Render the final JSX of CardFooter.
  */
 
 export const renderCardFooter_unstable = state => {

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

@@ -1 +1 @@
-{"version":3,"sources":["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;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,11 +1,12 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+
 export const cardFooterClassNames = {
   root: 'fui-CardFooter',
   action: 'fui-CardFooter__action'
 };
-/**
- * Styles for the root slot
- */
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
@@ -21,7 +22,7 @@ const useStyles = /*#__PURE__*/__styles({
   "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
 });
 /**
- * Apply styling to the CardFooter slots based on the state
+ * Apply styling to the CardFooter slots based on the state.
  */
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,MAAM,EAAE;AAF2D,CAA9D;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\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/"}
+{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,MAAM,EAAE;AAF2D,CAA9D;;AAKP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,OAAO,KAAP;AACD,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 * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\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/CardHeader.types.js.map

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