@fluentui/react-card 0.0.0-nightly-20230526-0415.1 → 0.0.0-nightly-20230530-0415.1

package/lib/components/Card/useCardSelectable.js

@@ -13,104 +13,126 @@ import { useFocusFinders } from '@fluentui/react-tabster';
  * @param props - props from this instance of Card
  * @param a11yProps - accessibility props shared between elements of the card
  * @param ref - reference to the root element of Card
- */
-export const useCardSelectable = (props, {
-  referenceLabel,
-  referenceId
-}, cardRef) => {
-  const {
-    checkbox = {},
-    selected,
-    defaultSelected,
-    onSelectionChange,
-    floatingAction,
-    onClick,
-    onKeyDown
-  } = props;
-  const {
-    findAllFocusable
-  } = useFocusFinders();
-  const checkboxRef = React.useRef(null);
-  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
-  const [isCardSelected, setIsCardSelected] = React.useState(false);
-  const [isSelectFocused, setIsSelectFocused] = React.useState(false);
-  const shouldRestrictTriggerAction = React.useCallback(event => {
-    if (!cardRef.current) {
-      return false;
-    }
-    const focusableElements = findAllFocusable(cardRef.current);
-    const target = event.target;
-    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
-    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
-    return isElementInFocusableGroup && !isCheckboxSlot;
-  }, [cardRef, findAllFocusable]);
-  const onChangeHandler = React.useCallback(event => {
-    if (shouldRestrictTriggerAction(event)) {
-      return;
-    }
-    const newCheckedValue = !isCardSelected;
-    setIsCardSelected(newCheckedValue);
-    if (onSelectionChange) {
-      onSelectionChange(event, {
-        selected: newCheckedValue
-      });
-    }
-  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
-  const onKeyDownHandler = React.useCallback(event => {
-    if ([Enter].includes(event.key)) {
-      event.preventDefault();
-      onChangeHandler(event);
-    }
-  }, [onChangeHandler]);
-  const checkboxSlot = React.useMemo(() => {
-    if (!isSelectable || floatingAction) {
-      return;
-    }
-    const selectableCheckboxProps = {};
-    if (referenceId) {
-      selectableCheckboxProps['aria-labelledby'] = referenceId;
-    } else if (referenceLabel) {
-      selectableCheckboxProps['aria-label'] = referenceLabel;
-    }
-    return resolveShorthand(checkbox, {
-      defaultProps: {
-        ref: checkboxRef,
-        type: 'checkbox',
-        checked: isCardSelected,
-        onChange: event => onChangeHandler(event),
-        onFocus: () => setIsSelectFocused(true),
-        onBlur: () => setIsSelectFocused(false),
-        ...selectableCheckboxProps
-      }
-    });
-  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
-  const floatingActionSlot = React.useMemo(() => {
-    if (!floatingAction) {
-      return;
-    }
-    return resolveShorthand(floatingAction, {
-      defaultProps: {
-        ref: checkboxRef
-      }
-    });
-  }, [floatingAction]);
-  const selectableCardProps = React.useMemo(() => {
-    if (!isSelectable) {
-      return null;
-    }
+ */ export const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
+    const { checkbox ={} , selected , defaultSelected , onSelectionChange , floatingAction , onClick , onKeyDown  } = props;
+    const { findAllFocusable  } = useFocusFinders();
+    const checkboxRef = React.useRef(null);
+    const isSelectable = [
+        selected,
+        defaultSelected,
+        onSelectionChange
+    ].some((prop)=>typeof prop !== 'undefined');
+    const [isCardSelected, setIsCardSelected] = React.useState(false);
+    const [isSelectFocused, setIsSelectFocused] = React.useState(false);
+    const shouldRestrictTriggerAction = React.useCallback((event)=>{
+        if (!cardRef.current) {
+            return false;
+        }
+        const focusableElements = findAllFocusable(cardRef.current);
+        const target = event.target;
+        const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
+        const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
+        return isElementInFocusableGroup && !isCheckboxSlot;
+    }, [
+        cardRef,
+        findAllFocusable
+    ]);
+    const onChangeHandler = React.useCallback((event)=>{
+        if (shouldRestrictTriggerAction(event)) {
+            return;
+        }
+        const newCheckedValue = !isCardSelected;
+        setIsCardSelected(newCheckedValue);
+        if (onSelectionChange) {
+            onSelectionChange(event, {
+                selected: newCheckedValue
+            });
+        }
+    }, [
+        onSelectionChange,
+        isCardSelected,
+        shouldRestrictTriggerAction
+    ]);
+    const onKeyDownHandler = React.useCallback((event)=>{
+        if ([
+            Enter
+        ].includes(event.key)) {
+            event.preventDefault();
+            onChangeHandler(event);
+        }
+    }, [
+        onChangeHandler
+    ]);
+    const checkboxSlot = React.useMemo(()=>{
+        if (!isSelectable || floatingAction) {
+            return;
+        }
+        const selectableCheckboxProps = {};
+        if (referenceId) {
+            selectableCheckboxProps['aria-labelledby'] = referenceId;
+        } else if (referenceLabel) {
+            selectableCheckboxProps['aria-label'] = referenceLabel;
+        }
+        return resolveShorthand(checkbox, {
+            defaultProps: {
+                ref: checkboxRef,
+                type: 'checkbox',
+                checked: isCardSelected,
+                onChange: (event)=>onChangeHandler(event),
+                onFocus: ()=>setIsSelectFocused(true),
+                onBlur: ()=>setIsSelectFocused(false),
+                ...selectableCheckboxProps
+            }
+        });
+    }, [
+        checkbox,
+        floatingAction,
+        isCardSelected,
+        isSelectable,
+        onChangeHandler,
+        referenceId,
+        referenceLabel
+    ]);
+    const floatingActionSlot = React.useMemo(()=>{
+        if (!floatingAction) {
+            return;
+        }
+        return resolveShorthand(floatingAction, {
+            defaultProps: {
+                ref: checkboxRef
+            }
+        });
+    }, [
+        floatingAction
+    ]);
+    const selectableCardProps = React.useMemo(()=>{
+        if (!isSelectable) {
+            return null;
+        }
+        return {
+            onClick: mergeCallbacks(onClick, onChangeHandler),
+            onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
+        };
+    }, [
+        isSelectable,
+        onChangeHandler,
+        onClick,
+        onKeyDown,
+        onKeyDownHandler
+    ]);
+    React.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [
+        defaultSelected,
+        selected,
+        setIsCardSelected
+    ]);
     return {
-      onClick: mergeCallbacks(onClick, onChangeHandler),
-      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
+        selected: isCardSelected,
+        selectable: isSelectable,
+        selectFocused: isSelectFocused,
+        selectableCardProps,
+        checkboxSlot,
+        floatingActionSlot
     };
-  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
-  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
-  return {
-    selected: isCardSelected,
-    selectable: isSelectable,
-    selectFocused: isSelectFocused,
-    selectableCardProps,
-    checkboxSlot,
-    floatingActionSlot
-  };
 };
+
 //# sourceMappingURL=useCardSelectable.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["shorthands","__styles","mergeClasses","tokens","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","useStyles","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B2jhnfs","wiictr","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","Bhhzhcn","Bec0n69","B29w5g4","orientationHorizontal","Beiy3e4","Bt984gj","Bnoktp0","Idhjb2","ihgzqh","Bgp6ld0","Bbucpmy","orientationVertical","Bt4kzjz","B1ou843","y1433z","B7egwnw","B49b4xf","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","d","f","i","h","a","m","useCardStyles_unstable","state","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","interactive","selectable","className","orientation","size","appearance","selected","selectFocused"],"sources":["../../../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\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 = {\n  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  outlineWidth: tokens.strokeWidthThick,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.overflow('hidden'),\n    ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n    ...shorthands.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      ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    },\n\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n      flexShrink: 0,\n    },\n    // Allows non-card components to grow to fill the available space.\n    [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n      flexGrow: 1,\n    },\n\n    ...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  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      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      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      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      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      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      backgroundColor: tokens.colorTransparentBackgroundSelected,\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      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      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: 1,\n  },\n\n  hiddenCheckbox: {\n    ...shorthands.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\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  };\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.interactive || state.selectable;\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    isSelectableOrInteractive && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    state.selectFocused && styles.selectableFocused,\n    // High contrast overrides\n    isSelectableOrInteractive && styles.highContrastInteractive,\n    state.selected && styles.highContrastSelected,\n    state.root.className,\n  );\n\n  if (state.floatingAction) {\n    state.floatingAction.className = mergeClasses(\n      cardClassNames.floatingAction,\n      styles.select,\n      state.floatingAction.className,\n    );\n  }\n\n  if (state.checkbox) {\n    state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n  }\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["shorthands","__styles","mergeClasses","tokens","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","useStyles","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B2jhnfs","wiictr","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","Bhhzhcn","Bec0n69","B29w5g4","orientationHorizontal","Beiy3e4","Bt984gj","Bnoktp0","Idhjb2","ihgzqh","Bgp6ld0","Bbucpmy","orientationVertical","Bt4kzjz","B1ou843","y1433z","B7egwnw","B49b4xf","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","d","f","i","h","a","m","useCardStyles_unstable","state","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","interactive","selectable","className","orientation","size","appearance","selected","selectFocused"],"sources":["../../../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\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 = {\n  outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n  outlineWidth: tokens.strokeWidthThick,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.overflow('hidden'),\n    ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n    ...shorthands.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      ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n    },\n\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n      flexShrink: 0,\n    },\n    // Allows non-card components to grow to fill the available space.\n    [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n      flexGrow: 1,\n    },\n\n    ...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  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      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      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      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      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      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      backgroundColor: tokens.colorTransparentBackgroundSelected,\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      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      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: 1,\n  },\n\n  hiddenCheckbox: {\n    ...shorthands.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\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n  const styles = useStyles();\n\n  const orientationMap = {\n    horizontal: styles.orientationHorizontal,\n    vertical: styles.orientationVertical,\n  };\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.interactive || state.selectable;\n\n  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    isSelectableOrInteractive && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    state.selectFocused && styles.selectableFocused,\n    // High contrast overrides\n    isSelectableOrInteractive && styles.highContrastInteractive,\n    state.selected && styles.highContrastSelected,\n    state.root.className,\n  );\n\n  if (state.floatingAction) {\n    state.floatingAction.className = mergeClasses(\n      cardClassNames.floatingAction,\n      styles.select,\n      state.floatingAction.className,\n    );\n  }\n\n  if (state.checkbox) {\n    state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/CardFooter/CardFooter.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * 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';\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  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAI7C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQP,sBAAA,CAAuBK,KAAA,EAAOC,GAAA;EAE5CJ,4BAAA,CAA6BK,KAAA;EAC7B,OAAON,yBAAA,CAA0BM,KAAA;AACnC;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * 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';\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  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAI5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=CardFooter.types.js.map

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

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

package/lib/components/CardFooter/index.js

@@ -3,4 +3,5 @@ export * from './CardFooter.types';
 export * from './renderCardFooter';
 export * from './useCardFooter';
 export * from './useCardFooterStyles.styles';
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/CardFooter/index.ts"],"sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["../../../src/components/CardFooter/index.ts"],"sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,13 +1,10 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardFooter.
- */
-export const renderCardFooter_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children, slots.action && /*#__PURE__*/createElement(slots.action, slotProps.action));
+ */ export const renderCardFooter_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children, slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));
 };
+
 //# sourceMappingURL=renderCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderCardFooter_unstable","state","slots","slotProps","root","children","action"],"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlotsNext<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA8BE,KAAA;EAE3D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BD,SAAA,CAAUC,IAAI,CAACC,QAAQ,EACvBH,KAAA,CAAMI,MAAM,iBAAIR,aAhBvB,CAgBwBI,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM;AAGzD"}
+{"version":3,"sources":["../../../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlotsNext<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCardFooter_unstable","state","slots","slotProps","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BD,UAAUC,IAAI,CAACC,QAAQ,EACvBH,MAAMI,MAAM,kBAAI,AAhBvB,cAgBwBJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}

package/lib/components/CardFooter/useCardFooter.js

@@ -8,21 +8,19 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
- */
-export const useCardFooter_unstable = (props, ref) => {
-  const {
-    action
-  } = props;
-  return {
-    components: {
-      root: 'div',
-      action: 'div'
-    },
-    root: getNativeElementProps('div', {
-      ref,
-      ...props
-    }),
-    action: resolveShorthand(action)
-  };
+ */ export const useCardFooter_unstable = (props, ref)=>{
+    const { action  } = props;
+    return {
+        components: {
+            root: 'div',
+            action: 'div'
+        },
+        root: getNativeElementProps('div', {
+            ref,
+            ...props
+        }),
+        action: resolveShorthand(action)
+    };
 };
+
 //# sourceMappingURL=useCardFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useCardFooter_unstable","props","ref","action","components","root"],"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAGxD;;;;;;;;;AASA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAwBC,GAAA,KAAiD;EAC9G,MAAM;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnB,OAAO;IACLG,UAAA,EAAY;MACVC,IAAA,EAAM;MACNF,MAAA,EAAQ;IACV;IAEAE,IAAA,EAAMP,qBAAA,CAAsB,OAAO;MACjCI,GAAA;MACA,GAAGD;IACL;IACAE,MAAA,EAAQJ,gBAAA,CAAiBI,MAAA;EAC3B;AACF"}
+{"version":3,"sources":["../../../src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useCardFooter_unstable","props","ref","action","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMP,sBAAsB,OAAO;YACjCI;YACA,GAAGD,KAAK;QACV;QACAE,QAAQJ,iBAAiBI;IAC3B;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","Frg6f3","d","useCardFooterStyles_unstable","state","styles","className"],"sources":["../../../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD;;;AAGA,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;EACNC,MAAA,EAAQ;AACV;AAEA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EASlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA4C;EACvF,MAAMC,MAAA,GAAST,SAAA;EACfQ,KAAA,CAAMV,IAAI,CAACY,SAAS,GAAGf,YAAA,CAAaE,oBAAA,CAAqBC,IAAI,EAAEW,MAAA,CAAOX,IAAI,EAAEU,KAAA,CAAMV,IAAI,CAACY,SAAS;EAEhG,IAAIF,KAAA,CAAMT,MAAM,EAAE;IAChBS,KAAA,CAAMT,MAAM,CAACW,SAAS,GAAGf,YAAA,CAAaE,oBAAA,CAAqBE,MAAM,EAAEU,MAAA,CAAOV,MAAM,EAAES,KAAA,CAAMT,MAAM,CAACW,SAAS;EAC1G;EAEA,OAAOF,KAAA;AACT"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","Frg6f3","d","useCardFooterStyles_unstable","state","styles","className"],"sources":["../../../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD;;;AAGA,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;EACNC,MAAA,EAAQ;AACV;AAEA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA4C;EACvF,MAAMC,MAAA,GAAST,SAAA;EACfQ,KAAA,CAAMV,IAAI,CAACY,SAAS,GAAGf,YAAA,CAAaE,oBAAA,CAAqBC,IAAI,EAAEW,MAAA,CAAOX,IAAI,EAAEU,KAAA,CAAMV,IAAI,CAACY,SAAS;EAEhG,IAAIF,KAAA,CAAMT,MAAM,EAAE;IAChBS,KAAA,CAAMT,MAAM,CAACW,SAAS,GAAGf,YAAA,CAAaE,oBAAA,CAAqBE,MAAM,EAAEU,MAAA,CAAOV,MAAM,EAAES,KAAA,CAAMT,MAAM,CAACW,SAAS;EAC1G;EAEA,OAAOF,KAAA;AACT"}

package/lib/components/CardHeader/CardHeader.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import * 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';\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  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAI7C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQP,sBAAA,CAAuBK,KAAA,EAAOC,GAAA;EAE5CJ,4BAAA,CAA6BK,KAAA;EAC7B,OAAON,yBAAA,CAA0BM,KAAA;AACnC;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import * 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';\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  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAI5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/CardHeader/CardHeader.types.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=CardHeader.types.js.map

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

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

package/lib/components/CardHeader/index.js

@@ -3,4 +3,5 @@ export * from './CardHeader.types';
 export * from './renderCardHeader';
 export * from './useCardHeader';
 export * from './useCardHeaderStyles.styles';
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/CardHeader/index.ts"],"sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["../../../src/components/CardHeader/index.ts"],"sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}