@fluentui/react-card 9.0.0-beta.35 → 9.0.0-beta.37

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\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  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  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  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    (state.interactive || state.selectable) && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    state.selectFocused && styles.selectableFocused,\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,UAAU,YAAcC,YAAY,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE,SAASC,qBAAqB,QAAQ,qCAAqC;AAC3E,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,oBAAoB,QAAQ,mCAAmC;AAGxE;;;AAGA,OAAO,MAAMC,cAAc,GAA8B;EACvDC,IAAI,EAAE,UAAU;EAChBC,cAAc,EAAE,0BAA0B;EAC1CC,QAAQ,EAAE;CACX;AAED;;;AAGA,OAAO,MAAMC,WAAW,GAAG;EACzBC,WAAW,EAAE,kBAAkB;EAC/BC,mBAAmB,EAAE;CACtB;AAED,MAAMC,iBAAiB,GAAG;EACxBC,aAAa,EAAE,OAAOJ,WAAW,CAACE,mBAAmB,GAAG;EACxDG,YAAY,EAAEd,MAAM,CAACe;CACtB;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAuRhB;AAEF;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAgB,IAAe;EACpE,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAE1B,MAAMI,cAAc,GAAG;IACrBC,UAAU,EAAEF,MAAM,CAACG,qBAAqB;IACxCC,QAAQ,EAAEJ,MAAM,CAACK;GAClB;EAED,MAAMC,OAAO,GAAG;IACdC,KAAK,EAAEP,MAAM,CAACQ,SAAS;IACvBC,MAAM,EAAET,MAAM,CAACU,UAAU;IACzBC,KAAK,EAAEX,MAAM,CAACY;GACf;EAED,MAAMC,aAAa,GAAG;IACpBC,MAAM,EAAEd,MAAM,CAACc,MAAM;IACrB,oBAAoB,EAAEd,MAAM,CAACe,iBAAiB;IAC9CC,OAAO,EAAEhB,MAAM,CAACgB,OAAO;IACvBC,MAAM,EAAEjB,MAAM,CAACiB;GAChB;EAED,MAAMC,WAAW,GAAG;IAClBJ,MAAM,EAAEd,MAAM,CAACmB,yBAAyB;IACxC,oBAAoB,EAAEnB,MAAM,CAACoB,oCAAoC;IACjEJ,OAAO,EAAEhB,MAAM,CAACqB,0BAA0B;IAC1CJ,MAAM,EAAEjB,MAAM,CAACsB;GAChB;EACD,MAAMC,cAAc,GAAG;IACrBT,MAAM,EAAEd,MAAM,CAACwB,iBAAiB;IAChC,oBAAoB,EAAExB,MAAM,CAACyB,4BAA4B;IACzDT,OAAO,EAAEhB,MAAM,CAAC0B,kBAAkB;IAClCT,MAAM,EAAEjB,MAAM,CAAC2B;GAChB;EAED5B,KAAK,CAACZ,IAAI,CAACyC,SAAS,GAAGhD,YAAY,CACjCM,cAAc,CAACC,IAAI,EACnBa,MAAM,CAACb,IAAI,EACXc,cAAc,CAACF,KAAK,CAAC8B,WAAW,CAAC,EACjCvB,OAAO,CAACP,KAAK,CAAC+B,IAAI,CAAC,EACnBjB,aAAa,CAACd,KAAK,CAACgC,UAAU,CAAC,EAC/B,CAAChC,KAAK,CAACiC,WAAW,IAAIjC,KAAK,CAACkC,UAAU,KAAKV,cAAc,CAACxB,KAAK,CAACgC,UAAU,CAAC,EAC3EhC,KAAK,CAACmC,QAAQ,IAAIhB,WAAW,CAACnB,KAAK,CAACgC,UAAU,CAAC,EAC/ChC,KAAK,CAACoC,aAAa,IAAInC,MAAM,CAACoC,iBAAiB,EAC/CrC,KAAK,CAACZ,IAAI,CAACyC,SAAS,CACrB;EAED,IAAI7B,KAAK,CAACX,cAAc,EAAE;IACxBW,KAAK,CAACX,cAAc,CAACwC,SAAS,GAAGhD,YAAY,CAC3CM,cAAc,CAACE,cAAc,EAC7BY,MAAM,CAACqC,MAAM,EACbtC,KAAK,CAACX,cAAc,CAACwC,SAAS,CAC/B;;EAGH,IAAI7B,KAAK,CAACV,QAAQ,EAAE;IAClBU,KAAK,CAACV,QAAQ,CAACuC,SAAS,GAAGhD,YAAY,CAACM,cAAc,CAACG,QAAQ,EAAEW,MAAM,CAACsC,cAAc,EAAEvC,KAAK,CAACV,QAAQ,CAACuC,SAAS,CAAC;;EAGnH,OAAO7B,KAAK;AACd,CAAC","names":["shorthands","mergeClasses","tokens","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","useStyles","useCardStyles_unstable","state","styles","orientationMap","horizontal","orientationHorizontal","vertical","orientationVertical","sizeMap","small","sizeSmall","medium","sizeMedium","large","sizeLarge","appearanceMap","filled","filledAlternative","outline","subtle","selectedMap","filledInteractiveSelected","filledAlternativeInteractiveSelected","outlineInteractiveSelected","subtleInteractiveSelected","interactiveMap","filledInteractive","filledAlternativeInteractive","outlineInteractive","subtleInteractive","className","orientation","size","appearance","interactive","selectable","selected","selectFocused","selectableFocused","select","hiddenCheckbox"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCardStyles.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';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\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  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  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  state.root.className = mergeClasses(\n    cardClassNames.root,\n    styles.root,\n    orientationMap[state.orientation],\n    sizeMap[state.size],\n    appearanceMap[state.appearance],\n    (state.interactive || state.selectable) && interactiveMap[state.appearance],\n    state.selected && selectedMap[state.appearance],\n    state.selectFocused && styles.selectableFocused,\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"]}

package/lib/components/CardFooter/CardFooter.js

@@ -5,7 +5,6 @@ import { useCardFooterStyles_unstable } from './useCardFooterStyles';
 /**
  * Component to render Button actions in a Card component.
  */
-
 export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCardFooter_unstable(props, ref);
   useCardFooterStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EACA,OAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,uBAAuB;AAIpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAON,yBAAyB,CAACM,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/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';\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"]}

package/lib/components/CardFooter/renderCardFooter.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAE7D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BD,SAAS,CAACC,IAAI,CAACC,QAAQ,EACvBH,KAAK,CAACI,MAAM,iBAAIR,oBAACI,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI,CAC5C;AAEjB,CAAC","names":["React","getSlots","renderCardFooter_unstable","state","slots","slotProps","root","children","action"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/CardFooter/useCardFooter.js

@@ -8,7 +8,6 @@ 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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE;EAAF,IAAa,KAAnB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CANtB;IAUL,MAAM,EAAE,gBAAgB,CAAC,MAAD;EAVnB,CAAP;AAYD,CAfM","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC;EAAM,CAAE,GAAGF,KAAK;EAExB,OAAO;IACLG,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,MAAM,EAAE;KACT;IAEDE,IAAI,EAAEP,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,MAAM,EAAEJ,gBAAgB,CAACI,MAAM;GAChC;AACH,CAAC","names":["getNativeElementProps","resolveShorthand","useCardFooter_unstable","props","ref","action","components","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/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"]}

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -2,38 +2,32 @@ import { __styles, mergeClasses, shorthands } from '@griffel/react';
 /**
  * Static CSS class names used internally for the component slots.
  */
-
 export const cardFooterClassNames = {
   root: 'fui-CardFooter',
   action: 'fui-CardFooter__action'
 };
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "i8kkvl": "f4akndk",
-    "Belr9w4": "fe5j3v"
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    i8kkvl: "f4akndk",
+    Belr9w4: "fe5j3v"
   },
-  "action": {
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"]
+  action: {
+    Frg6f3: ["fcgxt0o", "f1ujusj6"]
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
 });
 /**
  * Apply styling to the CardFooter slots based on the state.
  */
-
-
 export const useCardFooterStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
-
   if (state.action) {
     state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useCardFooterStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,MAAM,EAAE;AAF2D,CAA9D;;AAKP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE;;;AAGA,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAShB;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAACH,MAAM,EAAE;IAChBG,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACE,oBAAoB,CAACE,MAAM,EAAEI,MAAM,CAACJ,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","useCardFooterStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.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"]}

package/lib/components/CardHeader/CardHeader.js

@@ -5,7 +5,6 @@ import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
 /**
  * Component to render an image, text and an action in a Card component.
  */
-
 export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCardHeader_unstable(props, ref);
   useCardHeaderStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EACA,OAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,uBAAuB;AAIpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAON,yBAAyB,CAACM,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/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';\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"]}

package/lib/components/CardHeader/renderCardHeader.js

@@ -3,17 +3,21 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardHeader.
  */
-
 export const renderCardHeader_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slots.image && /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
-  }), /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
-  }), slots.description && /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
-  }), slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.image && /*#__PURE__*/React.createElement(slots.image, {
+    ...slotProps.image
+  }), /*#__PURE__*/React.createElement(slots.header, {
+    ...slotProps.header
+  }), slots.description && /*#__PURE__*/React.createElement(slots.description, {
+    ...slotProps.description
+  }), slots.action && /*#__PURE__*/React.createElement(slots.action, {
+    ...slotProps.action
   }));
 };
 //# sourceMappingURL=renderCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFF,EAGG,KAAK,CAAC,WAAN,iBAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAHxB,EAIG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAE7D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,eACpDP,oBAACI,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI,EACrCJ,KAAK,CAACK,WAAW,iBAAIT,oBAACI,KAAK,CAACK,WAAW;IAAA,GAAKJ,SAAS,CAACI;EAAW,EAAI,EACrEL,KAAK,CAACM,MAAM,iBAAIV,oBAACI,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,CAC5C;AAEjB,CAAC","names":["React","getSlots","renderCardHeader_unstable","state","slots","slotProps","root","image","header","description","action"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/CardHeader/useCardHeader.js

@@ -11,7 +11,6 @@ import { cardHeaderClassNames } from './useCardHeaderStyles';
  * @param props - props from this instance of CardHeader
  * @param ref - reference to root HTMLElement of CardHeader
  */
-
 export const useCardHeader_unstable = (props, ref) => {
   const {
     image,

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAEA,SAAS,uBAAT,QAAwC,qBAAxC;AACA,SAAS,oBAAT,QAAqC,uBAArC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE,KAAF;IAAS,MAAT;IAAiB,WAAjB;IAA8B;EAA9B,IAAyC,KAA/C;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,WAAF;MAAe;IAAf;EADjB,IAEF,uBAAuB,EAF3B;EAGA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAlB;EAEA,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,WAA9B,CAAzB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,MAAM,IAAI,SAAS,CAAC,OAAxB,EAAiC;MAC/B,MAAM;QAAE;MAAF,IAAS,SAAS,CAAC,OAAzB;MAEA,cAAc,CAAC,EAAE,GAAG,EAAH,GAAQ,WAAX,CAAd;IACD;EACF,CAND,EAMG,CAAC,MAAD,EAAS,cAAT,EAAyB,WAAzB,CANH;EAQA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE,KAFG;MAGV,MAAM,EAAE,KAHE;MAIV,WAAW,EAAE,KAJH;MAKV,MAAM,EAAE;IALE,CADP;IASL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CATtB;IAaL,KAAK,EAAE,gBAAgB,CAAC,KAAD,CAblB;IAcL,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE,IADqB;MAE/B,YAAY,EAAE;QACZ,GAAG,EAAE,SADO;QAEZ,EAAE,EAAE;MAFQ;IAFiB,CAAT,CAdnB;IAqBL,WAAW,EAAE,gBAAgB,CAAC,WAAD,CArBxB;IAsBL,MAAM,EAAE,gBAAgB,CAAC,MAAD;EAtBnB,CAAP;AAwBD,CA1CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, header, description, action } = props;\n\n  const {\n    selectableA11yProps: { referenceId, setReferenceId },\n  } = useCardContext_unstable();\n  const headerRef = React.useRef<HTMLDivElement>(null);\n\n  const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n  React.useEffect(() => {\n    if (header && headerRef.current) {\n      const { id } = headerRef.current;\n\n      setReferenceId(id ? id : generatedId);\n    }\n  }, [header, setReferenceId, generatedId]);\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'div',\n      description: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: resolveShorthand(header, {\n      required: true,\n      defaultProps: {\n        ref: headerRef,\n        id: referenceId,\n      },\n    }),\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAE1F,SAASC,uBAAuB,QAAQ,qBAAqB;AAC7D,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D;;;;;;;;;AASA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAE,GAAGL,KAAK;EAEpD,MAAM;IACJM,mBAAmB,EAAE;MAAEC,WAAW;MAAEC;IAAc;EAAE,CACrD,GAAGX,uBAAuB,EAAE;EAC7B,MAAMY,SAAS,GAAGhB,KAAK,CAACiB,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAMC,WAAW,GAAGf,KAAK,CAACE,oBAAoB,CAACK,MAAM,EAAEI,WAAW,CAAC;EAEnEd,KAAK,CAACmB,SAAS,CAAC,MAAK;IACnB,IAAIT,MAAM,IAAIM,SAAS,CAACI,OAAO,EAAE;MAC/B,MAAM;QAAEC;MAAE,CAAE,GAAGL,SAAS,CAACI,OAAO;MAEhCL,cAAc,CAACM,EAAE,GAAGA,EAAE,GAAGH,WAAW,CAAC;;EAEzC,CAAC,EAAE,CAACR,MAAM,EAAEK,cAAc,EAAEG,WAAW,CAAC,CAAC;EAEzC,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXd,KAAK,EAAE,KAAK;MACZC,MAAM,EAAE,KAAK;MACbC,WAAW,EAAE,KAAK;MAClBC,MAAM,EAAE;KACT;IAEDW,IAAI,EAAEtB,qBAAqB,CAAC,KAAK,EAAE;MACjCO,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,KAAK,EAAEP,gBAAgB,CAACO,KAAK,CAAC;IAC9BC,MAAM,EAAER,gBAAgB,CAACQ,MAAM,EAAE;MAC/Bc,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZjB,GAAG,EAAEQ,SAAS;QACdK,EAAE,EAAEP;;KAEP,CAAC;IACFH,WAAW,EAAET,gBAAgB,CAACS,WAAW,CAAC;IAC1CC,MAAM,EAAEV,gBAAgB,CAACU,MAAM;GAChC;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useId","useCardContext_unstable","cardHeaderClassNames","useCardHeader_unstable","props","ref","image","header","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","generatedId","useEffect","current","id","components","root","required","defaultProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, header, description, action } = props;\n\n  const {\n    selectableA11yProps: { referenceId, setReferenceId },\n  } = useCardContext_unstable();\n  const headerRef = React.useRef<HTMLDivElement>(null);\n\n  const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n  React.useEffect(() => {\n    if (header && headerRef.current) {\n      const { id } = headerRef.current;\n\n      setReferenceId(id ? id : generatedId);\n    }\n  }, [header, setReferenceId, generatedId]);\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'div',\n      description: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: resolveShorthand(header, {\n      required: true,\n      defaultProps: {\n        ref: headerRef,\n        id: referenceId,\n      },\n    }),\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"]}

package/lib/components/CardHeader/useCardHeaderStyles.js

@@ -2,7 +2,6 @@ import { __styles, mergeClasses } from '@griffel/react';
 /**
  * Static CSS class names used internally for the component slots.
  */
-
 export const cardHeaderClassNames = {
   root: 'fui-CardHeader',
   image: 'fui-CardHeader__image',
@@ -13,66 +12,57 @@ export const cardHeaderClassNames = {
 /**
  * CSS variable names used internally for uniform styling in CardHeader.
  */
-
 export const cardHeaderCSSVars = {
   cardHeaderGapVar: '--fui-CardHeader--gap'
 };
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "Bkc6ea2": "fkufhic",
-    "mc9l5x": "f13qh94s",
-    "t4k1zu": "f8a668j",
-    "v29qe6": "f4h39za",
-    "Bt984gj": "f122n59"
+  root: {
+    Bkc6ea2: "fkufhic",
+    mc9l5x: "f13qh94s",
+    t4k1zu: "f8a668j",
+    v29qe6: "f4h39za",
+    Bt984gj: "f122n59"
   },
-  "image": {
-    "mc9l5x": "ftuwxu6",
-    "t21cq0": ["fql5097", "f6yss9k"],
-    "Br312pm": "fwpfdsa",
-    "Ijaq50": "fldnz9j"
+  image: {
+    mc9l5x: "ftuwxu6",
+    t21cq0: ["fql5097", "f6yss9k"],
+    Br312pm: "fwpfdsa",
+    Ijaq50: "fldnz9j"
   },
-  "header": {
-    "Br312pm": "fd46tj4",
-    "Ijaq50": "f16hsg94"
+  header: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "f16hsg94"
   },
-  "description": {
-    "Br312pm": "fd46tj4",
-    "Ijaq50": "faunodf"
+  description: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "faunodf"
   },
-  "action": {
-    "Frg6f3": ["f6yss9k", "fql5097"],
-    "Br312pm": "fis13di",
-    "Ijaq50": "fldnz9j"
+  action: {
+    Frg6f3: ["f6yss9k", "fql5097"],
+    Br312pm: "fis13di",
+    Ijaq50: "fldnz9j"
   }
 }, {
-  "d": [".fkufhic{--fui-CardHeader--gap:12px;}", ".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".f4h39za{grid-auto-rows:1fr min-content;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
+  d: [".fkufhic{--fui-CardHeader--gap:12px;}", ".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".f4h39za{grid-auto-rows:1fr min-content;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
 });
 /**
  * Apply styling to the CardHeader slots based on the state.
  */
-
-
 export const useCardHeaderStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
-
   if (state.image) {
     state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
-
   if (state.header) {
     state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);
   }
-
   if (state.description) {
     state.description.className = mergeClasses(cardHeaderClassNames.description, styles.description, state.description.className);
   }
-
   if (state.action) {
     state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useCardHeaderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,KAAK,EAAE,uBAF4D;EAGnE,MAAM,EAAE,wBAH2D;EAInE,WAAW,EAAE,6BAJsD;EAKnE,MAAM,EAAE;AAL2D,CAA9D;AAQP;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG;EAC/B,gBAAgB,EAAE;AADa,CAA1B;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AA6BA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CACxC,oBAAoB,CAAC,WADmB,EAExC,MAAM,CAAC,WAFiC,EAGxC,KAAK,CAAC,WAAN,CAAkB,SAHsB,CAA1C;EAKD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n  cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n    gridAutoRows: '1fr min-content',\n    alignItems: 'center',\n  },\n  image: {\n    display: 'inline-flex',\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      cardHeaderClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,mBAAqBA,YAAY,QAAQ,gBAAgB;AAGzD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE,wBAAwB;EAChCC,WAAW,EAAE,6BAA6B;EAC1CC,MAAM,EAAE;CACT;AAED;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA2BhB;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,oBAAoB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAACR,KAAK,EAAE;IACfQ,KAAK,CAACR,KAAK,CAACU,SAAS,GAAGb,YAAY,CAACC,oBAAoB,CAACE,KAAK,EAAES,MAAM,CAACT,KAAK,EAAEQ,KAAK,CAACR,KAAK,CAACU,SAAS,CAAC;;EAGvG,IAAIF,KAAK,CAACP,MAAM,EAAE;IAChBO,KAAK,CAACP,MAAM,CAACS,SAAS,GAAGb,YAAY,CAACC,oBAAoB,CAACG,MAAM,EAAEQ,MAAM,CAACR,MAAM,EAAEO,KAAK,CAACP,MAAM,CAACS,SAAS,CAAC;;EAG3G,IAAIF,KAAK,CAACN,WAAW,EAAE;IACrBM,KAAK,CAACN,WAAW,CAACQ,SAAS,GAAGb,YAAY,CACxCC,oBAAoB,CAACI,WAAW,EAChCO,MAAM,CAACP,WAAW,EAClBM,KAAK,CAACN,WAAW,CAACQ,SAAS,CAC5B;;EAGH,IAAIF,KAAK,CAACL,MAAM,EAAE;IAChBK,KAAK,CAACL,MAAM,CAACO,SAAS,GAAGb,YAAY,CAACC,oBAAoB,CAACK,MAAM,EAAEM,MAAM,CAACN,MAAM,EAAEK,KAAK,CAACL,MAAM,CAACO,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","useCardHeaderStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n  cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n    gridAutoRows: '1fr min-content',\n    alignItems: 'center',\n  },\n  image: {\n    display: 'inline-flex',\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      cardHeaderClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"]}

package/lib/components/CardPreview/CardPreview.js

@@ -5,7 +5,6 @@ import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
-
 export const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCardPreview_unstable(props, ref);
   useCardPreviewStyles_unstable(state);

package/lib/components/CardPreview/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n  const state = useCardPreview_unstable(props, ref);\n\n  useCardPreviewStyles_unstable(state);\n  return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n  const state = useCardPreview_unstable(props, ref);\n\n  useCardPreviewStyles_unstable(state);\n  return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"]}

package/lib/components/CardPreview/renderCardPreview.js

@@ -3,14 +3,15 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardPreview.
  */
-
 export const renderCardPreview_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slotProps.root.children, slots.logo && /*#__PURE__*/React.createElement(slots.logo, { ...slotProps.logo
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slotProps.root.children, slots.logo && /*#__PURE__*/React.createElement(slots.logo, {
+    ...slotProps.logo
   }));
 };
 //# sourceMappingURL=renderCardPreview.js.map

package/lib/components/CardPreview/renderCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n  const { slots, slotProps } = getSlots<CardPreviewSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.logo && <slots.logo {...slotProps.logo} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BD,SAAS,CAACC,IAAI,CAACC,QAAQ,EACvBH,KAAK,CAACI,IAAI,iBAAIR,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderCardPreview_unstable","state","slots","slotProps","root","children","logo"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n  const { slots, slotProps } = getSlots<CardPreviewSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.logo && <slots.logo {...slotProps.logo} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/CardPreview/useCardPreview.js

@@ -11,7 +11,6 @@ import { cardPreviewClassNames } from './useCardPreviewStyles';
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
  */
-
 export const useCardPreview_unstable = (props, ref) => {
   const {
     logo
@@ -29,14 +28,11 @@ export const useCardPreview_unstable = (props, ref) => {
     if (referenceLabel && referenceId) {
       return;
     }
-
     if (previewRef.current && previewRef.current.parentNode) {
       const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);
-
       if (img) {
         const ariaLabel = img.getAttribute('aria-label');
         const ariaDescribedby = img.getAttribute('aria-describedby');
-
         if (ariaDescribedby) {
           setReferenceId(ariaDescribedby);
         } else if (img.alt) {

package/lib/components/CardPreview/useCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AAEA,SAAS,uBAAT,QAAwC,qBAAxC;AACA,SAAS,qBAAT,QAAsC,wBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,cAAF;MAAkB,WAAlB;MAA+B,iBAA/B;MAAkD;IAAlD;EADjB,IAEF,uBAAuB,EAF3B;EAGA,MAAM,UAAU,GAAG,aAAa,CAAC,GAAD,EAAM,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAN,CAAhC;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,cAAc,IAAI,WAAtB,EAAmC;MACjC;IACD;;IAED,IAAI,UAAU,CAAC,OAAX,IAAsB,UAAU,CAAC,OAAX,CAAmB,UAA7C,EAAyD;MACvD,MAAM,GAAG,GAAG,UAAU,CAAC,OAAX,CAAmB,UAAnB,CAA8B,aAA9B,CAA8D,IAAI,qBAAqB,CAAC,IAAI,QAA5F,CAAZ;;MAEA,IAAI,GAAJ,EAAS;QACP,MAAM,SAAS,GAAG,GAAG,CAAC,YAAJ,CAAiB,YAAjB,CAAlB;QACA,MAAM,eAAe,GAAG,GAAG,CAAC,YAAJ,CAAiB,kBAAjB,CAAxB;;QAEA,IAAI,eAAJ,EAAqB;UACnB,cAAc,CAAC,eAAD,CAAd;QACD,CAFD,MAEO,IAAI,GAAG,CAAC,GAAR,EAAa;UAClB,iBAAiB,CAAC,GAAG,CAAC,GAAL,CAAjB;QACD,CAFM,MAEA,IAAI,SAAJ,EAAe;UACpB,iBAAiB,CAAC,SAAD,CAAjB;QACD;MACF;IACF;EACF,CArBD,EAqBG,CAAC,iBAAD,EAAoB,cAApB,EAAoC,UAApC,EAAgD,WAAhD,EAA6D,cAA7D,CArBH;EAuBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,UAD4B;MAEjC,GAAG;IAF8B,CAAR,CANtB;IAUL,IAAI,EAAE,gBAAgB,CAAC,IAAD;EAVjB,CAAP;AAYD,CA3CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n  React.useEffect(() => {\n    if (referenceLabel && referenceId) {\n      return;\n    }\n\n    if (previewRef.current && previewRef.current.parentNode) {\n      const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n      if (img) {\n        const ariaLabel = img.getAttribute('aria-label');\n        const ariaDescribedby = img.getAttribute('aria-describedby');\n\n        if (ariaDescribedby) {\n          setReferenceId(ariaDescribedby);\n        } else if (img.alt) {\n          setReferenceLabel(img.alt);\n        } else if (ariaLabel) {\n          setReferenceLabel(ariaLabel);\n        }\n      }\n    }\n  }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: previewRef,\n      ...props,\n    }),\n    logo: resolveShorthand(logo),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAElG,SAASC,uBAAuB,QAAQ,qBAAqB;AAC7D,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAEtB,MAAM;IACJG,mBAAmB,EAAE;MAAEC,cAAc;MAAEC,WAAW;MAAEC,iBAAiB;MAAEC;IAAc;EAAE,CACxF,GAAGV,uBAAuB,EAAE;EAC7B,MAAMW,UAAU,GAAGZ,aAAa,CAACK,GAAG,EAAER,KAAK,CAACgB,MAAM,CAAiB,IAAI,CAAC,CAAC;EAEzEhB,KAAK,CAACiB,SAAS,CAAC,MAAK;IACnB,IAAIN,cAAc,IAAIC,WAAW,EAAE;MACjC;;IAGF,IAAIG,UAAU,CAACG,OAAO,IAAIH,UAAU,CAACG,OAAO,CAACC,UAAU,EAAE;MACvD,MAAMC,GAAG,GAAGL,UAAU,CAACG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,IAAIhB,qBAAqB,CAACiB,IAAI,QAAQ,CAAC;MAEjH,IAAIF,GAAG,EAAE;QACP,MAAMG,SAAS,GAAGH,GAAG,CAACI,YAAY,CAAC,YAAY,CAAC;QAChD,MAAMC,eAAe,GAAGL,GAAG,CAACI,YAAY,CAAC,kBAAkB,CAAC;QAE5D,IAAIC,eAAe,EAAE;UACnBX,cAAc,CAACW,eAAe,CAAC;SAChC,MAAM,IAAIL,GAAG,CAACM,GAAG,EAAE;UAClBb,iBAAiB,CAACO,GAAG,CAACM,GAAG,CAAC;SAC3B,MAAM,IAAIH,SAAS,EAAE;UACpBV,iBAAiB,CAACU,SAAS,CAAC;;;;EAIpC,CAAC,EAAE,CAACV,iBAAiB,EAAEF,cAAc,EAAEI,UAAU,EAAEH,WAAW,EAAEE,cAAc,CAAC,CAAC;EAEhF,OAAO;IACLa,UAAU,EAAE;MACVL,IAAI,EAAE,KAAK;MACXb,IAAI,EAAE;KACP;IAEDa,IAAI,EAAErB,qBAAqB,CAAC,KAAK,EAAE;MACjCO,GAAG,EAAEO,UAAU;MACf,GAAGR;KACJ,CAAC;IACFE,IAAI,EAAEP,gBAAgB,CAACO,IAAI;GAC5B;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n  React.useEffect(() => {\n    if (referenceLabel && referenceId) {\n      return;\n    }\n\n    if (previewRef.current && previewRef.current.parentNode) {\n      const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n      if (img) {\n        const ariaLabel = img.getAttribute('aria-label');\n        const ariaDescribedby = img.getAttribute('aria-describedby');\n\n        if (ariaDescribedby) {\n          setReferenceId(ariaDescribedby);\n        } else if (img.alt) {\n          setReferenceLabel(img.alt);\n        } else if (ariaLabel) {\n          setReferenceLabel(ariaLabel);\n        }\n      }\n    }\n  }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: previewRef,\n      ...props,\n    }),\n    logo: resolveShorthand(logo),\n  };\n};\n"]}