@fluentui/react-card 9.7.1 → 9.7.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Card/useCard.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusFinders, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardBaseProps, CardBaseState, CardOnSelectionChangeEvent, 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\nconst interactiveEventProps = [\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>)[];\n\n/**\n * Compute whether a Card is interactive based on the presence of pointer/mouse\n * event props and the disabled flag. This intentionally does not depend on\n * focus management utilities so it can be used from headless contexts.\n */\nconst computeInteractive = (props: CardProps): boolean => {\n  if (props.disabled) {\n    return false;\n  }\n\n  return interactiveEventProps.some(prop => props[prop] !== undefined);\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', ...cardProps } = props;\n  const { disabled = false, focusMode: focusModeProp } = props;\n\n  // Focus-within ref drives the styled focus outline; merged with the user ref\n  // before being passed down so the base hook does not depend on react-tabster.\n  const focusWithinRef = useFocusWithin<HTMLDivElement>();\n  const cardRef = useMergedRefs(focusWithinRef, ref);\n\n  // Focus-aware predicate that prevents toggling the selection when the user\n  // interacts with an inner focusable element.\n  const { findAllFocusable } = useFocusFinders();\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!focusWithinRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(focusWithinRef.current);\n      const target = event.target as HTMLElement;\n\n      return focusableElements.some(element => element.contains(target));\n    },\n    [findAllFocusable, focusWithinRef],\n  );\n\n  const interactive = computeInteractive(props);\n  const focusMode = focusModeProp ?? (interactive ? 'no-tab' : 'off');\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const state = useCardBase_unstable(\n    {\n      shouldRestrictTriggerAction,\n      ...cardProps,\n    },\n    cardRef,\n  );\n\n  // Apply focusable-group attributes only when the card is not selectable, not\n  // disabled and the focus mode is enabled.\n  const shouldApplyFocusAttributes = !disabled && !state.selectable && focusMode !== 'off';\n  if (shouldApplyFocusAttributes) {\n    Object.assign(state.root, groupperAttrs, { tabIndex: 0 });\n  }\n\n  return {\n    ...state,\n    appearance,\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Card component, which manages state related to interactivity, selection,\n * ARIA attributes, and slot structure without design props or focus management.\n *\n * This hook is intentionally free of `@fluentui/react-tabster` so that it can be\n * consumed by headless component packages. Focus management (focusable group\n * attributes, focus-within, focus-restriction predicate) is layered on top in\n * `useCard_unstable`.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n * @param options - optional behavior overrides such as a focus-aware restriction predicate\n */\nexport const useCardBase_unstable = (props: CardBaseProps, ref: React.Ref<HTMLDivElement>): CardBaseState => {\n  const { disabled = false, ...restProps } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n    useCardSelectable(props, { referenceId, referenceLabel });\n\n  const interactive = computeInteractive(props);\n\n  let cardRootProps = {\n    ...restProps,\n    ...selectableCardProps,\n  };\n\n  if (disabled) {\n    cardRootProps = {\n      ...restProps,\n      'aria-disabled': true,\n      onClick: undefined,\n    };\n  }\n\n  return {\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    disabled,\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: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...cardRootProps,\n      }),\n      { elementType: 'div' },\n    ),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusFinders","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","interactiveEventProps","computeInteractive","props","disabled","some","prop","useCard_unstable","ref","appearance","orientation","size","cardProps","focusMode","focusModeProp","focusWithinRef","cardRef","findAllFocusable","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","element","contains","interactive","groupperAttrs","tabBehavior","state","useCardBase_unstable","shouldApplyFocusAttributes","selectable","Object","assign","root","tabIndex","restProps","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRootProps","onClick","components","floatingAction","checkbox","always","role","elementType"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Card/useCard.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusFinders, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardBaseProps, CardBaseState, CardOnSelectionChangeEvent, 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\nconst interactiveEventProps = [\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>)[];\n\n/**\n * Compute whether a Card is interactive based on the presence of pointer/mouse\n * event props and the disabled flag. This intentionally does not depend on\n * focus management utilities so it can be used from headless contexts.\n */\nconst computeInteractive = (props: CardProps): boolean => {\n  if (props.disabled) {\n    return false;\n  }\n\n  return interactiveEventProps.some(prop => props[prop] !== undefined);\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', ...cardProps } = props;\n  const { disabled = false, focusMode: focusModeProp } = props;\n\n  // Focus-within ref drives the styled focus outline; merged with the user ref\n  // before being passed down so the base hook does not depend on react-tabster.\n  const focusWithinRef = useFocusWithin<HTMLDivElement>();\n  const cardRef = useMergedRefs(focusWithinRef, ref);\n\n  // Focus-aware predicate that prevents toggling the selection when the user\n  // interacts with an inner focusable element.\n  const { findAllFocusable } = useFocusFinders();\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!focusWithinRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(focusWithinRef.current);\n      const target = event.target as HTMLElement;\n\n      return focusableElements.some(element => element.contains(target));\n    },\n    [findAllFocusable, focusWithinRef],\n  );\n\n  const interactive = computeInteractive(props);\n  const focusMode = focusModeProp ?? (interactive ? 'no-tab' : 'off');\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const state = useCardBase_unstable(\n    {\n      shouldRestrictTriggerAction,\n      ...cardProps,\n    },\n    cardRef,\n  );\n\n  // Apply focusable-group attributes only when the card is not selectable, not\n  // disabled and the focus mode is enabled.\n  const shouldApplyFocusAttributes = !disabled && !state.selectable && focusMode !== 'off';\n  if (shouldApplyFocusAttributes) {\n    Object.assign(state.root, groupperAttrs, { tabIndex: 0 });\n  }\n\n  return {\n    ...state,\n    appearance,\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Card component, which manages state related to interactivity, selection,\n * ARIA attributes, and slot structure without design props or focus management.\n *\n * This hook is intentionally free of `@fluentui/react-tabster` so that it can be\n * consumed by headless component packages. Focus management (focusable group\n * attributes, focus-within, focus-restriction predicate) is layered on top in\n * `useCard_unstable`.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n * @param options - optional behavior overrides such as a focus-aware restriction predicate\n */\nexport const useCardBase_unstable = (props: CardBaseProps, ref: React.Ref<HTMLDivElement>): CardBaseState => {\n  const { disabled = false, ...restProps } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n    useCardSelectable(props, { referenceId, referenceLabel });\n\n  const interactive = computeInteractive(props);\n\n  let cardRootProps = {\n    ...restProps,\n    ...selectableCardProps,\n  };\n\n  if (disabled) {\n    cardRootProps = {\n      ...restProps,\n      'aria-disabled': true,\n      onClick: undefined,\n    };\n  }\n\n  return {\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    disabled,\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: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...cardRootProps,\n      }),\n      { elementType: 'div' },\n    ),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusFinders","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","interactiveEventProps","computeInteractive","props","disabled","some","prop","useCard_unstable","ref","appearance","orientation","size","cardProps","focusMode","focusModeProp","focusWithinRef","cardRef","findAllFocusable","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","element","contains","interactive","groupperAttrs","tabBehavior","state","useCardBase_unstable","shouldApplyFocusAttributes","selectable","Object","assign","root","tabIndex","restProps","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRootProps","onClick","components","floatingAction","checkbox","always","role","elementType"],"mappings":"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"}

package/lib/components/Card/useCardSelectable.js

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';
-import { Enter } from '@fluentui/keyboard-keys';
+import * as React from "react";
+import { mergeCallbacks, slot, useControllableState } from "@fluentui/react-utilities";
+import { Enter } from "@fluentui/keyboard-keys";
 /**
  * Create the state related to selectable cards.
  *

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

@@ -1,13 +1,13 @@
 'use client';
 
-import * as React from 'react';
-import { shorthands, __styles, mergeClasses, __resetStyles } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { textClassNames } from '@fluentui/react-text';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
-import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
-import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
+import * as React from "react";
+import { shorthands, __styles, mergeClasses, __resetStyles } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { textClassNames } from "@fluentui/react-text";
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { cardPreviewClassNames } from "../CardPreview/useCardPreviewStyles.styles.js";
+import { cardHeaderClassNames } from "../CardHeader/useCardHeaderStyles.styles.js";
+import { cardFooterClassNames } from "../CardFooter/useCardFooterStyles.styles.js";
 /**
  * Static CSS class names used internally for the component slots.
  */

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

@@ -1 +1 @@
-{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n    overflow: 'hidden',\n    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    padding: `var(${cardCSSVars.cardSizeVar})`,\n    gap: `var(${cardCSSVars.cardSizeVar})`,\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\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        ...shorthands.borderStyle('solid'),\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n    },\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n        flexShrink: 0\n    }\n});\nconst disabledStyles = {\n    cursor: 'not-allowed',\n    userSelect: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    boxShadow: tokens.shadow2,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '::before': {\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        zIndex: `calc(${tokens.zIndexContent} + 1)`\n    },\n    '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    }\n};\nconst useCardStyles = makeStyles({\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `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 last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `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 bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    interactive: {\n        [`& .${textClassNames.root}`]: {\n            color: 'currentColor'\n        }\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Selected,\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    outlineDisabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '&:hover, &:active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            boxShadow: 'none'\n        },\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: tokens.zIndexContent\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    },\n    disabled: {\n        ...disabledStyles,\n        '&:hover, &:active': disabledStyles\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    const resetStyles = useCardResetStyles();\n    const styles = useCardStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n    const focusedClassName = React.useMemo(()=>{\n        if (state.disabled) {\n            return '';\n        }\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.disabled,\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n    if (state.floatingAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from \"react\";\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { textClassNames } from \"@fluentui/react-text\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { cardPreviewClassNames } from \"../CardPreview/useCardPreviewStyles.styles.js\";\nimport { cardHeaderClassNames } from \"../CardHeader/useCardHeaderStyles.styles.js\";\nimport { cardFooterClassNames } from \"../CardFooter/useCardFooterStyles.styles.js\";\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n    overflow: 'hidden',\n    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    padding: `var(${cardCSSVars.cardSizeVar})`,\n    gap: `var(${cardCSSVars.cardSizeVar})`,\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\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        ...shorthands.borderStyle('solid'),\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n    },\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n        flexShrink: 0\n    }\n});\nconst disabledStyles = {\n    cursor: 'not-allowed',\n    userSelect: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    boxShadow: tokens.shadow2,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '::before': {\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        zIndex: `calc(${tokens.zIndexContent} + 1)`\n    },\n    '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    }\n};\nconst useCardStyles = makeStyles({\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `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 last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `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 bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    interactive: {\n        [`& .${textClassNames.root}`]: {\n            color: 'currentColor'\n        }\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Selected,\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    outlineDisabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '&:hover, &:active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            boxShadow: 'none'\n        },\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: tokens.zIndexContent\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    },\n    disabled: {\n        ...disabledStyles,\n        '&:hover, &:active': disabledStyles\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    const resetStyles = useCardResetStyles();\n    const styles = useCardStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n    const focusedClassName = React.useMemo(()=>{\n        if (state.disabled) {\n            return '';\n        }\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.disabled,\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n    if (state.floatingAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Card/useCardStyles.styles.raw.js

@@ -1,12 +1,12 @@
 'use client';
-import * as React from 'react';
-import { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { textClassNames } from '@fluentui/react-text';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
-import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
-import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
+import * as React from "react";
+import { shorthands, makeStyles, mergeClasses, makeResetStyles } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { textClassNames } from "@fluentui/react-text";
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { cardPreviewClassNames } from "../CardPreview/useCardPreviewStyles.styles.js";
+import { cardHeaderClassNames } from "../CardHeader/useCardHeaderStyles.styles.js";
+import { cardFooterClassNames } from "../CardFooter/useCardFooterStyles.styles.js";
 /**
  * Static CSS class names used internally for the component slots.
  */ export const cardClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n  floatingAction: 'fui-Card__floatingAction',\n  checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n  cardSizeVar: '--fui-Card--size',\n  cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  outlineWidth: tokens.strokeWidthThick,\n  outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n  overflow: 'hidden',\n  borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  padding: `var(${cardCSSVars.cardSizeVar})`,\n  gap: `var(${cardCSSVars.cardSizeVar})`,\n\n  display: 'flex',\n  position: 'relative',\n  boxSizing: 'border-box',\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    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  },\n\n  // Prevents CardHeader and CardFooter from shrinking.\n  [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n    flexShrink: 0,\n  },\n});\n\nconst disabledStyles: GriffelStyle = {\n  cursor: 'not-allowed',\n  userSelect: 'none',\n  color: tokens.colorNeutralForegroundDisabled,\n  backgroundColor: tokens.colorNeutralBackgroundDisabled,\n  boxShadow: tokens.shadow2,\n  ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n  '::before': {\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    zIndex: `calc(${tokens.zIndexContent} + 1)`,\n  },\n\n  '::after': {\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n  },\n};\n\nconst useCardStyles = makeStyles({\n  focused: {\n    ...createFocusOutlineStyle({\n      style: focusOutlineStyle,\n      selector: 'focus',\n    }),\n  },\n\n  selectableFocused: createFocusOutlineStyle({\n    style: focusOutlineStyle,\n    selector: 'focus-within',\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n      marginLeft: `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 last element.\n    // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n      marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n\n    // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n    [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n      flexGrow: 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\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\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 bottom padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n      marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n\n  sizeSmall: {\n    [cardCSSVars.cardSizeVar]: '8px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n  },\n  sizeMedium: {\n    [cardCSSVars.cardSizeVar]: '12px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n  },\n  sizeLarge: {\n    [cardCSSVars.cardSizeVar]: '16px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n  },\n\n  interactive: {\n    [`& .${textClassNames.root}`]: {\n      color: 'currentColor',\n    },\n  },\n\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\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      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n  filledInteractiveSelected: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground1Selected,\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n    },\n  },\n\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\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      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n    },\n  },\n  filledAlternativeInteractiveSelected: {\n    backgroundColor: tokens.colorNeutralBackground2Selected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground2Selected,\n      backgroundColor: tokens.colorNeutralBackground2Selected,\n    },\n  },\n\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\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      color: tokens.colorNeutralForeground1Hover,\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  outlineInteractiveSelected: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground1Selected,\n      backgroundColor: tokens.colorTransparentBackgroundSelected,\n    },\n  },\n  outlineDisabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n    '&:hover, &:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      boxShadow: 'none',\n    },\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    },\n  },\n\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\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      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtleInteractiveSelected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground1Selected,\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n  },\n\n  highContrastSelected: {\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n\n      [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n        forcedColorAdjust: 'auto',\n      },\n\n      '::after': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n\n  highContrastInteractive: {\n    '@media (forced-colors: active)': {\n      ':hover, :active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n\n        [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n          forcedColorAdjust: 'auto',\n        },\n      },\n\n      '::after': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n\n  select: {\n    position: 'absolute',\n    top: '4px',\n    right: '4px',\n    zIndex: tokens.zIndexContent,\n  },\n\n  hiddenCheckbox: {\n    overflow: 'hidden',\n    width: '1px',\n    height: '1px',\n    position: 'absolute',\n    clip: 'rect(0 0 0 0)',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n  },\n\n  disabled: {\n    ...disabledStyles,\n    '&:hover, &:active': disabledStyles,\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 resetStyles = useCardResetStyles();\n  const styles = useCardStyles();\n\n  const orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  };\n\n  const sizeMap = {\n    small: styles.sizeSmall,\n    medium: styles.sizeMedium,\n    large: styles.sizeLarge,\n  };\n\n  const appearanceMap = {\n    filled: styles.filled,\n    'filled-alternative': styles.filledAlternative,\n    outline: styles.outline,\n    subtle: styles.subtle,\n  };\n\n  const selectedMap = {\n    filled: styles.filledInteractiveSelected,\n    'filled-alternative': styles.filledAlternativeInteractiveSelected,\n    outline: styles.outlineInteractiveSelected,\n    subtle: styles.subtleInteractiveSelected,\n  };\n  const interactiveMap = {\n    filled: styles.filledInteractive,\n    'filled-alternative': styles.filledAlternativeInteractive,\n    outline: styles.outlineInteractive,\n    subtle: styles.subtleInteractive,\n  };\n\n  const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n  const focusedClassName = React.useMemo(() => {\n    if (state.disabled) {\n      return '';\n    }\n\n    if (state.selectable) {\n      if (state.selectFocused) {\n        return styles.selectableFocused;\n      }\n\n      return '';\n    }\n\n    return styles.focused;\n  }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    resetStyles,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    isSelectableOrInteractive && styles.interactive,\n    isSelectableOrInteractive && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    focusedClassName,\n    isSelectableOrInteractive && styles.highContrastInteractive,\n    state.selected && styles.highContrastSelected,\n    state.disabled && styles.disabled,\n    state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n    state.root.className,\n  );\n\n  if (state.floatingAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.floatingAction.className = mergeClasses(\n      cardClassNames.floatingAction,\n      styles.select,\n      state.floatingAction.className,\n    );\n  }\n\n  if (state.checkbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n  }\n\n  return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n  root: 'fui-Card',\n  floatingAction: 'fui-Card__floatingAction',\n  checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n  cardSizeVar: '--fui-Card--size',\n  cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  outlineWidth: tokens.strokeWidthThick,\n  outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n  overflow: 'hidden',\n  borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  padding: `var(${cardCSSVars.cardSizeVar})`,\n  gap: `var(${cardCSSVars.cardSizeVar})`,\n\n  display: 'flex',\n  position: 'relative',\n  boxSizing: 'border-box',\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    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  },\n\n  // Prevents CardHeader and CardFooter from shrinking.\n  [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n    flexShrink: 0,\n  },\n});\n\nconst disabledStyles: GriffelStyle = {\n  cursor: 'not-allowed',\n  userSelect: 'none',\n  color: tokens.colorNeutralForegroundDisabled,\n  backgroundColor: tokens.colorNeutralBackgroundDisabled,\n  boxShadow: tokens.shadow2,\n  ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n  '::before': {\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    zIndex: `calc(${tokens.zIndexContent} + 1)`,\n  },\n\n  '::after': {\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n  },\n};\n\nconst useCardStyles = makeStyles({\n  focused: {\n    ...createFocusOutlineStyle({\n      style: focusOutlineStyle,\n      selector: 'focus',\n    }),\n  },\n\n  selectableFocused: createFocusOutlineStyle({\n    style: focusOutlineStyle,\n    selector: 'focus-within',\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n      marginLeft: `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 last element.\n    // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n      marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n\n    // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n    [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n      flexGrow: 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\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\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n    [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n      marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\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 bottom padding is removed to keep the content flush with the border.\n    [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n      marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n    },\n  },\n\n  sizeSmall: {\n    [cardCSSVars.cardSizeVar]: '8px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n  },\n  sizeMedium: {\n    [cardCSSVars.cardSizeVar]: '12px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n  },\n  sizeLarge: {\n    [cardCSSVars.cardSizeVar]: '16px',\n    [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n  },\n\n  interactive: {\n    [`& .${textClassNames.root}`]: {\n      color: 'currentColor',\n    },\n  },\n\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow4,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\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      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n  filledInteractiveSelected: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground1Selected,\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n    },\n  },\n\n  filledAlternative: {\n    backgroundColor: tokens.colorNeutralBackground2,\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      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n      boxShadow: tokens.shadow8,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground2Pressed,\n    },\n  },\n  filledAlternativeInteractiveSelected: {\n    backgroundColor: tokens.colorNeutralBackground2Selected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground2Selected,\n      backgroundColor: tokens.colorNeutralBackground2Selected,\n    },\n  },\n\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\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      color: tokens.colorNeutralForeground1Hover,\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  outlineInteractiveSelected: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground1Selected,\n      backgroundColor: tokens.colorTransparentBackgroundSelected,\n    },\n  },\n  outlineDisabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    boxShadow: 'none',\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n    '&:hover, &:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      boxShadow: 'none',\n    },\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    },\n  },\n\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    boxShadow: 'none',\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorTransparentStroke),\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      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n  subtleInteractiveSelected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground1Selected,\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n  },\n\n  highContrastSelected: {\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n\n      [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n        forcedColorAdjust: 'auto',\n      },\n\n      '::after': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n\n  highContrastInteractive: {\n    '@media (forced-colors: active)': {\n      ':hover, :active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n\n        [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n          forcedColorAdjust: 'auto',\n        },\n      },\n\n      '::after': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n\n  select: {\n    position: 'absolute',\n    top: '4px',\n    right: '4px',\n    zIndex: tokens.zIndexContent,\n  },\n\n  hiddenCheckbox: {\n    overflow: 'hidden',\n    width: '1px',\n    height: '1px',\n    position: 'absolute',\n    clip: 'rect(0 0 0 0)',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n  },\n\n  disabled: {\n    ...disabledStyles,\n    '&:hover, &:active': disabledStyles,\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 resetStyles = useCardResetStyles();\n  const styles = useCardStyles();\n\n  const orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  };\n\n  const sizeMap = {\n    small: styles.sizeSmall,\n    medium: styles.sizeMedium,\n    large: styles.sizeLarge,\n  };\n\n  const appearanceMap = {\n    filled: styles.filled,\n    'filled-alternative': styles.filledAlternative,\n    outline: styles.outline,\n    subtle: styles.subtle,\n  };\n\n  const selectedMap = {\n    filled: styles.filledInteractiveSelected,\n    'filled-alternative': styles.filledAlternativeInteractiveSelected,\n    outline: styles.outlineInteractiveSelected,\n    subtle: styles.subtleInteractiveSelected,\n  };\n  const interactiveMap = {\n    filled: styles.filledInteractive,\n    'filled-alternative': styles.filledAlternativeInteractive,\n    outline: styles.outlineInteractive,\n    subtle: styles.subtleInteractive,\n  };\n\n  const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n  const focusedClassName = React.useMemo(() => {\n    if (state.disabled) {\n      return '';\n    }\n\n    if (state.selectable) {\n      if (state.selectFocused) {\n        return styles.selectableFocused;\n      }\n\n      return '';\n    }\n\n    return styles.focused;\n  }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    resetStyles,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    isSelectableOrInteractive && styles.interactive,\n    isSelectableOrInteractive && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    focusedClassName,\n    isSelectableOrInteractive && styles.highContrastInteractive,\n    state.selected && styles.highContrastSelected,\n    state.disabled && styles.disabled,\n    state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n    state.root.className,\n  );\n\n  if (state.floatingAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.floatingAction.className = mergeClasses(\n      cardClassNames.floatingAction,\n      styles.select,\n      state.floatingAction.className,\n    );\n  }\n\n  if (state.checkbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n  }\n\n  return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}

package/lib/components/CardFooter/CardFooter.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useCardFooter_unstable } from './useCardFooter';
-import { renderCardFooter_unstable } from './renderCardFooter';
-import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useCardFooter_unstable } from "./useCardFooter.js";
+import { renderCardFooter_unstable } from "./renderCardFooter.js";
+import { useCardFooterStyles_unstable } from "./useCardFooterStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Component to render Button actions in a Card component.
  */ export const CardFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n  const state = useCardFooter_unstable(props, ref);\n\n  useCardFooterStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);\n\n  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","useCustomStyleHook_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n  const state = useCardFooter_unstable(props, ref);\n\n  useCardFooterStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);\n\n  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","useCustomStyleHook_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,kCAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/CardFooter/index.js

@@ -1,4 +1,4 @@
-export { CardFooter } from './CardFooter';
-export { renderCardFooter_unstable } from './renderCardFooter';
-export { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';
-export { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
+export { CardFooter } from "./CardFooter.js";
+export { renderCardFooter_unstable } from "./renderCardFooter.js";
+export { useCardFooter_unstable, useCardFooterBase_unstable } from "./useCardFooter.js";
+export { cardFooterClassNames, useCardFooterStyles_unstable } from "./useCardFooterStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type {\n  CardFooterBaseProps,\n  CardFooterBaseState,\n  CardFooterProps,\n  CardFooterSlots,\n  CardFooterState,\n} from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","renderCardFooter_unstable","useCardFooter_unstable","useCardFooterBase_unstable","cardFooterClassNames","useCardFooterStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAQ1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type {\n  CardFooterBaseProps,\n  CardFooterBaseState,\n  CardFooterProps,\n  CardFooterSlots,\n  CardFooterState,\n} from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","renderCardFooter_unstable","useCardFooter_unstable","useCardFooterBase_unstable","cardFooterClassNames","useCardFooterStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAe;AAQ1C,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,qBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B"}

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of CardFooter.
  */ export const renderCardFooter_unstable = (state)=>{

package/lib/components/CardFooter/useCardFooter.js

@@ -1,5 +1,5 @@
 'use client';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from "@fluentui/react-utilities";
 /**
  * Create the state required to render CardFooter.
  *

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses, shorthands } from "@griffel/react";
 /**
  * Static CSS class names used internally for the component slots.
  */

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n    root: 'fui-CardFooter',\n    action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '12px'\n    },\n    action: {\n        marginLeft: 'auto',\n        // when the card is selected or hovered, it has custom high contrast color and background styles\n        // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n        '@media (forced-colors: active)': {\n            '& .fui-Button, & .fui-Link': {\n                ...shorthands.borderColor('currentColor'),\n                color: 'currentColor',\n                outlineColor: 'currentColor'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n    if (state.action) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,MAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B;EACAiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;EACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;IACd;IACAkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;EAC7G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n    root: 'fui-CardFooter',\n    action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '12px'\n    },\n    action: {\n        marginLeft: 'auto',\n        // when the card is selected or hovered, it has custom high contrast color and background styles\n        // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n        '@media (forced-colors: active)': {\n            '& .fui-Button, & .fui-Link': {\n                ...shorthands.borderColor('currentColor'),\n                color: 'currentColor',\n                outlineColor: 'currentColor'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n    if (state.action) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,MAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B;EACAiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;EACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;IACd;IACAkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;EAC7G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 /**
  * Static CSS class names used internally for the component slots.
  */ export const cardFooterClassNames = {

package/lib/components/CardHeader/CardHeader.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useCardHeader_unstable } from './useCardHeader';
-import { renderCardHeader_unstable } from './renderCardHeader';
-import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useCardHeader_unstable } from "./useCardHeader.js";
+import { renderCardHeader_unstable } from "./renderCardHeader.js";
+import { useCardHeaderStyles_unstable } from "./useCardHeaderStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Component to render an image, text and an action in a Card component.
  */ export const CardHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useCardHeader_unstable(props, ref);\n\n  useCardHeaderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useCardHeader_unstable(props, ref);\n\n  useCardHeaderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,kCAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/CardHeader/index.js

@@ -1,4 +1,4 @@
-export { CardHeader } from './CardHeader';
-export { renderCardHeader_unstable } from './renderCardHeader';
-export { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';
-export { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
+export { CardHeader } from "./CardHeader.js";
+export { renderCardHeader_unstable } from "./renderCardHeader.js";
+export { useCardHeader_unstable, useCardHeaderBase_unstable } from "./useCardHeader.js";
+export { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from "./useCardHeaderStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n  CardHeaderBaseProps,\n  CardHeaderBaseState,\n  CardHeaderProps,\n  CardHeaderSlots,\n  CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAQ1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,iBAAiB,EAAEC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n  CardHeaderBaseProps,\n  CardHeaderBaseState,\n  CardHeaderProps,\n  CardHeaderSlots,\n  CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAe;AAQ1C,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,qBAAkB;AACrF,SAASC,iBAAiB,EAAEC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B"}

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of CardHeader.
  */ export const renderCardHeader_unstable = (state)=>{

package/lib/components/CardHeader/useCardHeader.js

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
-import { useCardContext_unstable } from '../Card/CardContext';
+import * as React from "react";
+import { getIntrinsicElementProps, useId, slot } from "@fluentui/react-utilities";
+import { useCardContext_unstable } from "../Card/CardContext.js";
 /**
  * Finds the first child of CardHeader with an id prop.
  *