@fluentui/react-card 0.0.0-nightly-20230222-0421.1 → 0.0.0-nightly-20230223-2115.1

package/.swcrc

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    }
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es2019",
+    "externalHelpers": true
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Wed, 22 Feb 2023 04:30:03 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20230222-0421.1",
-      "version": "0.0.0-nightly-20230222-0421.1",
+      "date": "Thu, 23 Feb 2023 21:23:06 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20230223-2115.1",
+      "version": "0.0.0-nightly-20230223-2115.1",
       "comments": {
         "prerelease": [
           {
@@ -16,38 +16,53 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230222-0421.1",
-            "commit": "83b133f44271aa4429c91c2a6e65907522af6e3f"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230223-2115.1",
+            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230222-0421.1",
-            "commit": "83b133f44271aa4429c91c2a6e65907522af6e3f"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230223-2115.1",
+            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230222-0421.1",
-            "commit": "83b133f44271aa4429c91c2a6e65907522af6e3f"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230223-2115.1",
+            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230222-0421.1",
-            "commit": "83b133f44271aa4429c91c2a6e65907522af6e3f"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-2115.1",
+            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230222-0421.1",
-            "commit": "83b133f44271aa4429c91c2a6e65907522af6e3f"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-2115.1",
+            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230222-0421.1",
-            "commit": "83b133f44271aa4429c91c2a6e65907522af6e3f"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230223-2115.1",
+            "commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 23:06:04 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.47",
+      "version": "9.0.0-beta.47",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "9ee6caa17f745e014ecba467a4528181ae49be30",
+            "comment": "fix: allow elements of card to grow to fill the available space"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,23 +1,32 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Wed, 22 Feb 2023 04:30:03 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Feb 2023 21:23:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230222-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230222-0421.1)
+## [0.0.0-nightly-20230223-2115.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230223-2115.1)
 
-Wed, 22 Feb 2023 04:30:03 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.46..@fluentui/react-card_v0.0.0-nightly-20230222-0421.1)
+Thu, 23 Feb 2023 21:23:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.47..@fluentui/react-card_v0.0.0-nightly-20230223-2115.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230222-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/83b133f44271aa4429c91c2a6e65907522af6e3f) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230222-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/83b133f44271aa4429c91c2a6e65907522af6e3f) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230222-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/83b133f44271aa4429c91c2a6e65907522af6e3f) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230222-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/83b133f44271aa4429c91c2a6e65907522af6e3f) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230222-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/83b133f44271aa4429c91c2a6e65907522af6e3f) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20230222-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/83b133f44271aa4429c91c2a6e65907522af6e3f) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
+
+## [9.0.0-beta.47](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.47)
+
+Wed, 22 Feb 2023 23:06:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.46..@fluentui/react-card_v9.0.0-beta.47)
+
+### Changes
+
+- fix: allow elements of card to grow to fill the available space ([PR #26616](https://github.com/microsoft/fluentui/pull/26616) by marcosvmmoura@gmail.com)
 
 ## [9.0.0-beta.46](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.46)
 

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/Card.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Card/index';\n"]}
+{"version":3,"mappings":"AAAA,cAAc","names":[],"sources":["../src/Card.ts"],"sourcesContent":["export * from './components/Card/index';\n"]}

package/lib/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/CardFooter.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/CardFooter/index';\n"]}
+{"version":3,"mappings":"AAAA,cAAc","names":[],"sources":["../src/CardFooter.ts"],"sourcesContent":["export * from './components/CardFooter/index';\n"]}

package/lib/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/CardHeader.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/CardHeader/index';\n"]}
+{"version":3,"mappings":"AAAA,cAAc","names":[],"sources":["../src/CardHeader.ts"],"sourcesContent":["export * from './components/CardHeader/index';\n"]}

package/lib/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/CardPreview.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/CardPreview/index';\n"]}
+{"version":3,"mappings":"AAAA,cAAc","names":[],"sources":["../src/CardPreview.ts"],"sourcesContent":["export * from './components/CardPreview/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AAGxD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D;;;AAGA,OAAO,MAAMC,IAAI,gBAAmCL,KAAK,CAACM,UAAU,CAAiB,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGR,gBAAgB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC1C,MAAME,gBAAgB,GAAGN,mBAAmB,CAACK,KAAK,CAAC;EAEnDN,sBAAsB,CAACM,KAAK,CAAC;EAC7B,OAAOP,mBAAmB,CAACO,KAAK,EAAEC,gBAAgB,CAAC;AACrD,CAAC,CAAC;AAEFL,IAAI,CAACM,WAAW,GAAG,MAAM","names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"]}
+{"version":3,"mappings":"AAAA,YAAYA,WAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AAGvC,SAASC,mBAAmB,QAAQ;AAEpC;;;AAGA,OAAO,MAAMC,oBAAuCL,MAAMM,UAAU,CAAiB,CAACC,OAAOC,QAAQ;EACnG,MAAMC,QAAQR,iBAAiBM,OAAOC;EACtC,MAAME,mBAAmBN,oBAAoBK;EAE7CN,uBAAuBM;EACvB,OAAOP,oBAAoBO,OAAOC;AACpC;AAEAL,KAAKM,WAAW,GAAG","names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"]}

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

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=Card.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n  selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n  selectableA11yProps: {\n    referenceId?: string;\n    setReferenceId: (referenceId: string) => void;\n    referenceLabel?: string;\n    setReferenceLabel: (referenceLabel: string) => void;\n  };\n}\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   * Floating action that can be rendered on the top-right of a card. Often used together with\n   * `selected`, `defaultSelected`, and `onSelectionChange` props\n   */\n  floatingAction?: Slot<'div'>;\n\n  /**\n   * The internal checkbox element that renders when the card is selectable.\n   */\n  checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  /**\n   * Sets the appearance of the card.\n   *\n   * `filled`\n   * The card will have a shadow, border and background color.\n   *\n   * `filled-alternative`\n   * This appearance is similar to `filled`, but the background color will be a little darker.\n   *\n   * `outline`\n   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n   *\n   * `subtle`\n   * This appearance is similar to `filled-alternative`, but no border is applied.\n   *\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card.\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   * Defines the controlled selected state of the card.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Defines whether the card is initially in a selected state when rendered.\n   *\n   * @default false\n   */\n  defaultSelected?: boolean;\n\n  /**\n   * Callback to be called when the selected state value changes.\n   */\n  onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n  CardContextValue &\n  Required<\n    Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n      /**\n       * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n       *\n       * @default false\n       */\n      interactive: boolean;\n\n      /**\n       * Represents a selectable card.\n       *\n       * @default false\n       */\n      selectable: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n\n      /**\n       * Defines whether the card internal checkbox is currently focused.\n       *\n       * @default false\n       */\n      selectFocused: boolean;\n    }\n  >;\n"]}
+{"version":3,"mappings":"AAAA,YAAYA,WAAW","names":["React"],"sources":["../../../src/components/Card/Card.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n  selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n  selectableA11yProps: {\n    referenceId?: string;\n    setReferenceId: (referenceId: string) => void;\n    referenceLabel?: string;\n    setReferenceLabel: (referenceLabel: string) => void;\n  };\n}\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   * Floating action that can be rendered on the top-right of a card. Often used together with\n   * `selected`, `defaultSelected`, and `onSelectionChange` props\n   */\n  floatingAction?: Slot<'div'>;\n\n  /**\n   * The internal checkbox element that renders when the card is selectable.\n   */\n  checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  /**\n   * Sets the appearance of the card.\n   *\n   * `filled`\n   * The card will have a shadow, border and background color.\n   *\n   * `filled-alternative`\n   * This appearance is similar to `filled`, but the background color will be a little darker.\n   *\n   * `outline`\n   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n   *\n   * `subtle`\n   * This appearance is similar to `filled-alternative`, but no border is applied.\n   *\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card.\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   * Defines the controlled selected state of the card.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Defines whether the card is initially in a selected state when rendered.\n   *\n   * @default false\n   */\n  defaultSelected?: boolean;\n\n  /**\n   * Callback to be called when the selected state value changes.\n   */\n  onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n  CardContextValue &\n  Required<\n    Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n      /**\n       * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n       *\n       * @default false\n       */\n      interactive: boolean;\n\n      /**\n       * Represents a selectable card.\n       *\n       * @default false\n       */\n      selectable: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n\n      /**\n       * Defines whether the card internal checkbox is currently focused.\n       *\n       * @default false\n       */\n      selectFocused: boolean;\n    }\n  >;\n"]}

package/lib/components/Card/CardContext.js

@@ -7,12 +7,10 @@ export const cardContextDefaultValue = {
   selectableA11yProps: {
     referenceId: undefined,
     setReferenceId() {
-      /* Noop */
-    },
+      /* Noop */},
     referenceLabel: undefined,
     setReferenceLabel() {
-      /* Noop */
-    }
+      /* Noop */}
   }
 };
 /**
@@ -22,8 +20,5 @@ export const CardProvider = cardContext.Provider;
 /**
  * @internal
  */
-export const useCardContext_unstable = () => {
-  var _a;
-  return (_a = React.useContext(cardContext)) !== null && _a !== void 0 ? _a : cardContextDefaultValue;
-};
+export const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;
 //# sourceMappingURL=CardContext.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,MAAMC,WAAW,gBAAGD,KAAK,CAACE,aAAa,CAA+BC,SAAS,CAAC;AAEhF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAqB;EACvDC,mBAAmB,EAAE;IACnBC,WAAW,EAAEH,SAAS;IACtBI,cAAc;MACZ;IAAA,CACD;IACDC,cAAc,EAAEL,SAAS;IACzBM,iBAAiB;MACf;IAAA;;CAGL;AAED;;;AAGA,OAAO,MAAMC,YAAY,GAAGT,WAAW,CAACU,QAAQ;AAEhD;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACZ,WAAW,CAAC,mCAAIG,uBAAuB;AAAA","names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"]}
+{"version":3,"mappings":"AAAA,YAAYA,WAAW;AAGvB,MAAMC,2BAAcD,MAAME,aAAa,CAA+BC;AAEtE;;;AAGA,OAAO,MAAMC,0BAA4C;EACvDC,qBAAqB;IACnBC,aAAaH;IACbI,iBAAiB;MACf,WACF;IACAC,gBAAgBL;IAChBM,oBAAoB;MAClB;EAEJ;AACF;AAEA;;;AAGA,OAAO,MAAMC,eAAeT,YAAYU,QAAQ;AAEhD;;;AAGA,OAAO,MAAMC,0BAA0B,MAAMZ,MAAMa,UAAU,CAACZ,gBAAgBG","names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"sources":["../../../src/components/Card/CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}
+{"version":3,"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","names":[],"sources":["../../../src/components/Card/index.ts"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}

package/lib/components/Card/renderCard.js

@@ -1,3 +1,4 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import { CardProvider } from './CardContext';
@@ -9,14 +10,8 @@ export const renderCard_unstable = (state, cardContextValue) => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(CardProvider, {
+  return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root), /*#__PURE__*/React.createElement(CardProvider, {
     value: cardContextValue
-  }, slots.checkbox ? /*#__PURE__*/React.createElement(slots.checkbox, {
-    ...slotProps.checkbox
-  }) : null, slots.floatingAction ? /*#__PURE__*/React.createElement(slots.floatingAction, {
-    ...slotProps.floatingAction
-  }) : null, slotProps.root.children));
+  }, slots.checkbox ? /*#__PURE__*/React.createElement(slots.checkbox, _extends({}, slotProps.checkbox)) : null, slots.floatingAction ? /*#__PURE__*/React.createElement(slots.floatingAction, _extends({}, slotProps.floatingAction)) : null, slotProps.root.children));
 };
 //# sourceMappingURL=renderCard.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,YAAY,QAAQ,eAAe;AAE5C;;;AAGA,OAAO,MAAMC,mBAAmB,GAAG,CAACC,KAAgB,EAAEC,gBAAkC,KAAI;EAC1F,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAYG,KAAK,CAAC;EAEvD,oBACEJ,oBAACM,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BR,oBAACE,YAAY;IAACO,KAAK,EAAEJ;EAAgB,GAClCC,KAAK,CAACI,QAAQ,gBAAGV,oBAACM,KAAK,CAACI,QAAQ;IAAA,GAAKH,SAAS,CAACG;EAAQ,EAAI,GAAG,IAAI,EAClEJ,KAAK,CAACK,cAAc,gBAAGX,oBAACM,KAAK,CAACK,cAAc;IAAA,GAAKJ,SAAS,CAACI;EAAc,EAAI,GAAG,IAAI,EACpFJ,SAAS,CAACC,IAAI,CAACI,QAAQ,CACX,CACJ;AAEjB,CAAC","names":["React","getSlots","CardProvider","renderCard_unstable","state","cardContextValue","slots","slotProps","root","value","checkbox","floatingAction","children"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/renderCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <CardProvider value={cardContextValue}>\n        {slots.checkbox ? <slots.checkbox {...slotProps.checkbox} /> : null}\n        {slots.floatingAction ? <slots.floatingAction {...slotProps.floatingAction} /> : null}\n        {slotProps.root.children}\n      </CardProvider>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"mappings":";AAAA,YAAYA,WAAW;AACvB,SAASC,QAAQ,QAAQ;AAEzB,SAASC,YAAY,QAAQ;AAE7B;;;AAGA,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,qBAAuC;EAC3F,MAAM;IAAEC;IAAOC;EAAS,CAAE,GAAGN,SAAoBG;EAEjD,oBACEJ,oBAACM,MAAME,IAAI,eAAKD,UAAUC,IAAI,gBAC5BR,oBAACE;IAAaO,OAAOJ;KAClBC,MAAMI,QAAQ,gBAAGV,oBAACM,MAAMI,QAAQ,eAAKH,UAAUG,QAAQ,KAAO,IAAI,EAClEJ,MAAMK,cAAc,gBAAGX,oBAACM,MAAMK,cAAc,eAAKJ,UAAUI,cAAc,KAAO,IAAI,EACpFJ,UAAUC,IAAI,CAACI,QAAQ;AAIhC","names":["React","getSlots","CardProvider","renderCard_unstable","state","cardContextValue","slots","slotProps","root","value","checkbox","floatingAction","children"],"sources":["../../../src/components/Card/renderCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <CardProvider value={cardContextValue}>\n        {slots.checkbox ? <slots.checkbox {...slotProps.checkbox} /> : null}\n        {slots.floatingAction ? <slots.floatingAction {...slotProps.floatingAction} /> : null}\n        {slotProps.root.children}\n      </CardProvider>\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Card/useCard.js

@@ -17,10 +17,11 @@ const focusMap = {
  *
  * @param props - props from this instance of Card
  */
-const useCardInteractive = ({
-  focusMode = 'off',
-  ...props
-}) => {
+const useCardInteractive = param => {
+  let {
+    focusMode = 'off',
+    ...props
+  } = param;
   const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);
   const groupperAttrs = useFocusableGroup({
     tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,yBAAyB;AAG3E,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,uBAAuB,QAAQ,eAAe;AAEvD,MAAMC,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GAAI,CACnB,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CACoC,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3E,MAAMC,aAAa,GAAGb,iBAAiB,CAAC;IACtCc,WAAW,EAAEV,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMO,0BAA0B,GAAG;IACjC,GAAGF,aAAa;IAChBG,QAAQ,EAAE;GACX;EAED,OAAO;IACLN,WAAW;IACXO,eAAe,EAAET,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGO;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASA,OAAO,MAAMG,gBAAgB,GAAG,CAACT,KAAgB,EAAEU,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGb,KAAK;EAElF,MAAM,CAACc,WAAW,EAAEC,cAAc,CAAC,GAAG3B,KAAK,CAAC4B,QAAQ,CAACtB,uBAAuB,CAACuB,mBAAmB,CAACH,WAAW,CAAC;EAC7G,MAAM,CAACI,cAAc,EAAEC,iBAAiB,CAAC,GAAG/B,KAAK,CAAC4B,QAAQ,CAACtB,uBAAuB,CAACuB,mBAAmB,CAACH,WAAW,CAAC;EAEnH,MAAMM,WAAW,GAAG5B,cAAc,EAAkB;EACpD,MAAM;IACJ6B,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,aAAa;IACbC,YAAY;IACZC;EAAkB,CACnB,GAAGjC,iBAAiB,CAACO,KAAK,EAAE;IAAEc,WAAW;IAAEI;EAAc,CAAE,EAAEE,WAAW,CAAC;EAE1E,MAAMO,OAAO,GAAGrC,aAAa,CAAC8B,WAAW,EAAEV,GAAG,CAAC;EAE/C,MAAM;IAAET,WAAW;IAAEO;EAAe,CAAE,GAAGV,kBAAkB,CAACE,KAAK,CAAC;EAElE,OAAO;IACLW,UAAU;IACVC,WAAW;IACXC,IAAI;IACJZ,WAAW;IACXoB,UAAU;IACVG,aAAa;IACbF,QAAQ;IACRL,mBAAmB,EAAE;MACnBF,cAAc;MACdD,WAAW;MACXI,cAAc;MACdC;KACD;IAEDS,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,cAAc,EAAE,KAAK;MACrBC,QAAQ,EAAE;KACX;IAEDF,IAAI,EAAExC,qBAAqB,CAAC,KAAK,EAAE;MACjCqB,GAAG,EAAEiB,OAAO;MACZK,IAAI,EAAE,OAAO;MACb,GAAGxB,eAAe;MAClB,GAAGR,KAAK;MACR,GAAGuB;KACJ,CAAC;IAEFO,cAAc,EAAEJ,kBAAkB;IAClCK,QAAQ,EAAEN;GACX;AACH,CAAC","names":["React","getNativeElementProps","useMergedRefs","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","role"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n  const interactive = ([\n    'onClick',\n    'onDoubleClick',\n    'onMouseUp',\n    'onMouseDown',\n    'onPointerUp',\n    'onPointerDown',\n    'onTouchStart',\n    'onTouchEnd',\n    'onDragStart',\n    'onDragEnd',\n  ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n  });\n\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n  };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const {\n    selectable,\n    selected,\n    selectableCardProps,\n    selectFocused,\n    checkboxSlot,\n    floatingActionSlot,\n  } = useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps,\n    }),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"]}
+{"version":3,"mappings":"AAAA,YAAYA,WAAW;AACvB,SAASC,qBAAqB,EAAEC,aAAa,QAAQ;AACrD,SAASC,iBAAiB,EAAEC,cAAc,QAAQ;AAGlD,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AAExC,MAAMC,WAAW;EACfC,KAAKC;EACL,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AAEA;;;;;;;;AAQA,MAAMC,qBAAqBC,SAAgD;MAA/C;IAAEC,YAAY;IAAO,GAAGC;EAAAA,CAAkB;EACpE,MAAMC,cAAc,CAClB,WACA,iBACA,aACA,eACA,eACA,iBACA,gBACA,cACA,eACA,YACD,CAAiDC,IAAI,CAACC,QAAQH,KAAK,CAACG,KAAK;EAE1E,MAAMC,gBAAgBd,kBAAkB;IACtCe,aAAaX,QAAQ,CAACO,cAAc,WAAWF,SAAS;EAC1D;EAEA,MAAMO,6BAA6B;IACjC,GAAGF,aAAa;IAChBG,UAAU;EACZ;EAEA,OAAO;IACLN;IACAO,iBAAiBT,cAAc,QAAQ,IAAI,GAAGO;EAChD;AACF;AAEA;;;;;;;;;AASA,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU,QAA8C;EAC/F,MAAM;IAAEC,aAAa;IAAUC,cAAc;IAAYC,OAAO;EAAQ,CAAE,GAAGb;EAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG5B,MAAM6B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;EAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGhC,MAAM6B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;EAElH,MAAMM,cAAc7B;EACpB,MAAM;IACJ8B;IACAC;IACAC;IACAC;IACAC;IACAC;EAAkB,CACnB,GAAGlC,kBAAkBQ,OAAO;IAAEc;IAAaI;EAAe,GAAGE;EAE9D,MAAMO,UAAUtC,cAAc+B,aAAaV;EAE3C,MAAM;IAAET;IAAaO;EAAe,CAAE,GAAGX,mBAAmBG;EAE5D,OAAO;IACLW;IACAC;IACAC;IACAZ;IACAoB;IACAG;IACAF;IACAL,qBAAqB;MACnBF;MACAD;MACAI;MACAC;IACF;IAEAS,YAAY;MACVC,MAAM;MACNC,gBAAgB;MAChBC,UAAU;IACZ;IAEAF,MAAMzC,sBAAsB,OAAO;MACjCsB,KAAKiB;MACLK,MAAM;MACN,GAAGxB,eAAe;MAClB,GAAGR,KAAK;MACR,GAAGuB;IACL;IAEAO,gBAAgBJ;IAChBK,UAAUN;EACZ;AACF","names":["React","getNativeElementProps","useMergedRefs","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","param","focusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","role"],"sources":["../../../src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n  const interactive = ([\n    'onClick',\n    'onDoubleClick',\n    'onMouseUp',\n    'onMouseDown',\n    'onPointerUp',\n    'onPointerDown',\n    'onTouchStart',\n    'onTouchEnd',\n    'onDragStart',\n    'onDragEnd',\n  ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n  });\n\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n  };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const {\n    selectable,\n    selected,\n    selectableCardProps,\n    selectFocused,\n    checkboxSlot,\n    floatingActionSlot,\n  } = useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps,\n    }),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"]}

package/lib/components/Card/useCardContextValue.js

@@ -1,6 +1,7 @@
-export function useCardContextValue({
-  selectableA11yProps
-}) {
+export function useCardContextValue(param) {
+  let {
+    selectableA11yProps
+  } = param;
   return {
     selectableA11yProps
   };

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,OAAM,SAAUA,mBAAmB,CAAC;EAAEC;AAAmB,CAAa;EACpE,OAAO;IAAEA;EAAmB,CAAE;AAChC","names":["useCardContextValue","selectableA11yProps"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"]}
+{"version":3,"mappings":"AAEA,OAAO,SAASA,oBAAoBC,KAAkC,EAAoB;MAAtD;IAAEC;EAAmB,CAAa,GAAlCD;EAClC,OAAO;IAAEC;EAAoB;AAC/B","names":["useCardContextValue","param","selectableA11yProps"],"sources":["../../../src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"]}

package/lib/components/Card/useCardSelectable.js

@@ -14,10 +14,11 @@ import { useFocusFinders } from '@fluentui/react-tabster';
  * @param a11yProps - accessibility props shared between elements of the card
  * @param ref - reference to the root element of Card
  */
-export const useCardSelectable = (props, {
-  referenceLabel,
-  referenceId
-}, cardRef) => {
+export const useCardSelectable = (props, param, cardRef) => {
+  let {
+    referenceLabel,
+    referenceId
+  } = param;
   const {
     checkbox = {},
     selected,
@@ -103,7 +104,7 @@ export const useCardSelectable = (props, {
       onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
     };
   }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
-  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
+  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [defaultSelected, selected, setIsCardSelected]);
   return {
     selected: isCardSelected,
     selectable: isSelectable,

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n    defaultSelected,\n    selected,\n    setIsCardSelected,\n  ]);\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"]}
+{"version":3,"mappings":"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","names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","cardRef","referenceLabel","referenceId","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sources":["../../../src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n    defaultSelected,\n    selected,\n    setIsCardSelected,\n  ]);\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"]}

package/lib/components/Card/useCardStyles.js

@@ -131,7 +131,8 @@ const useStyles = /*#__PURE__*/__styles({
     Bnoktp0: "fpfyeui",
     Idhjb2: "fwi74qw",
     ihgzqh: ["ffcmwrh", "f6ppoih"],
-    Bgp6ld0: ["f1dc9p14", "fd933vt"]
+    Bgp6ld0: ["f1dc9p14", "fd933vt"],
+    Bbucpmy: "f18esqgw"
   },
   orientationVertical: {
     Beiy3e4: "f1vx9l62",
@@ -288,7 +289,7 @@ const useStyles = /*#__PURE__*/__styles({
     Huce71: "fz5stix"
   }
 }, {
-  d: [".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".f99gebs[data-fui-focus-visible]::after{border-top-width:var(--strokeWidthThick);}", ".f13b0oaq[data-fui-focus-visible]::after{border-right-width:var(--strokeWidthThick);}", ".f8t2bz6[data-fui-focus-visible]::after{border-left-width:var(--strokeWidthThick);}", ".f1jvq617[data-fui-focus-visible]::after{border-bottom-width:var(--strokeWidthThick);}", ".f11unbnk[data-fui-focus-visible]::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fbd201q[data-fui-focus-visible]::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f12nqxso[data-fui-focus-visible]::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1uguk4w[data-fui-focus-visible]::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f3l4wcz[data-fui-focus-visible]::after{top:-var(--strokeWidthThick);}", ".f6j2biq[data-fui-focus-visible]::after{bottom:-var(--strokeWidthThick);}", ".fdzzmfx[data-fui-focus-visible]::after{left:-var(--strokeWidthThick);}", ".fduh8kh[data-fui-focus-visible]::after{right:-var(--strokeWidthThick);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f125hn41[data-fui-focus-within]:focus-within::after{border-top-width:var(--strokeWidthThick);}", ".fgxkx34[data-fui-focus-within]:focus-within::after{border-right-width:var(--strokeWidthThick);}", ".f1v56tyl[data-fui-focus-within]:focus-within::after{border-left-width:var(--strokeWidthThick);}", ".fdxas6f[data-fui-focus-within]:focus-within::after{border-bottom-width:var(--strokeWidthThick);}", ".fxwickw[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f1ia5cve[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f194aguw[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fqicc6c[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f4a0pcc[data-fui-focus-within]:focus-within::after{top:-var(--strokeWidthThick);}", ".f11go4w5[data-fui-focus-within]:focus-within::after{bottom:-var(--strokeWidthThick);}", ".f4dzull[data-fui-focus-within]:focus-within::after{left:-var(--strokeWidthThick);}", ".fy687nj[data-fui-focus-within]:focus-within::after{right:-var(--strokeWidthThick);}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left: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);}", ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fy4glsf>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".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);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{-webkit-clip-path:inset(50%);clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
+  d: [".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".f99gebs[data-fui-focus-visible]::after{border-top-width:var(--strokeWidthThick);}", ".f13b0oaq[data-fui-focus-visible]::after{border-right-width:var(--strokeWidthThick);}", ".f8t2bz6[data-fui-focus-visible]::after{border-left-width:var(--strokeWidthThick);}", ".f1jvq617[data-fui-focus-visible]::after{border-bottom-width:var(--strokeWidthThick);}", ".f11unbnk[data-fui-focus-visible]::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fbd201q[data-fui-focus-visible]::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f12nqxso[data-fui-focus-visible]::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1uguk4w[data-fui-focus-visible]::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f3l4wcz[data-fui-focus-visible]::after{top:-var(--strokeWidthThick);}", ".f6j2biq[data-fui-focus-visible]::after{bottom:-var(--strokeWidthThick);}", ".fdzzmfx[data-fui-focus-visible]::after{left:-var(--strokeWidthThick);}", ".fduh8kh[data-fui-focus-visible]::after{right:-var(--strokeWidthThick);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f125hn41[data-fui-focus-within]:focus-within::after{border-top-width:var(--strokeWidthThick);}", ".fgxkx34[data-fui-focus-within]:focus-within::after{border-right-width:var(--strokeWidthThick);}", ".f1v56tyl[data-fui-focus-within]:focus-within::after{border-left-width:var(--strokeWidthThick);}", ".fdxas6f[data-fui-focus-within]:focus-within::after{border-bottom-width:var(--strokeWidthThick);}", ".fxwickw[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f1ia5cve[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f194aguw[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fqicc6c[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f4a0pcc[data-fui-focus-within]:focus-within::after{top:-var(--strokeWidthThick);}", ".f11go4w5[data-fui-focus-within]:focus-within::after{bottom:-var(--strokeWidthThick);}", ".f4dzull[data-fui-focus-within]:focus-within::after{left:-var(--strokeWidthThick);}", ".fy687nj[data-fui-focus-within]:focus-within::after{right:-var(--strokeWidthThick);}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f18esqgw>.fui-CardHeader:last-of-type,.f18esqgw>.fui-CardFooter:last-of-type{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow: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);}", ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fy4glsf>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".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);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{-webkit-clip-path:inset(50%);clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],