@fluentui/react-card 9.0.13 → 9.0.14

package/lib-commonjs/CardFooter.js

@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./components/CardFooter/index"), exports);
- //# sourceMappingURL=CardFooter.js.map
-
-//# sourceMappingURL=CardFooter.js.map

package/lib-commonjs/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CardFooter.js"],"sourcesContent":["export * from './components/CardFooter/index';\n//# sourceMappingURL=CardFooter.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
+{"version":3,"sources":["CardFooter.js"],"sourcesContent":["export * from './components/CardFooter/index';\n"],"names":[],"mappings":";;;;;oBAAc"}

package/lib-commonjs/CardHeader.js

@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./components/CardHeader/index"), exports);
- //# sourceMappingURL=CardHeader.js.map
-
-//# sourceMappingURL=CardHeader.js.map

package/lib-commonjs/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CardHeader.js"],"sourcesContent":["export * from './components/CardHeader/index';\n//# sourceMappingURL=CardHeader.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
+{"version":3,"sources":["CardHeader.js"],"sourcesContent":["export * from './components/CardHeader/index';\n"],"names":[],"mappings":";;;;;oBAAc"}

package/lib-commonjs/CardPreview.js

@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./components/CardPreview/index"), exports);
- //# sourceMappingURL=CardPreview.js.map
-
-//# sourceMappingURL=CardPreview.js.map

package/lib-commonjs/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CardPreview.js"],"sourcesContent":["export * from './components/CardPreview/index';\n//# sourceMappingURL=CardPreview.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}
+{"version":3,"sources":["CardPreview.js"],"sourcesContent":["export * from './components/CardPreview/index';\n"],"names":[],"mappings":";;;;;oBAAc"}

package/lib-commonjs/components/Card/Card.js

@@ -18,6 +18,4 @@ const Card = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _useCardStylesStyles.useCardStyles_unstable)(state);
     return (0, _renderCard.renderCard_unstable)(state, cardContextValue);
 });
-Card.displayName = 'Card'; //# sourceMappingURL=Card.js.map
-
-//# sourceMappingURL=Card.js.map
+Card.displayName = 'Card';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/Card.js"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport { useCardContextValue } from './useCardContextValue';\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\nCard.displayName = 'Card';\n//# sourceMappingURL=Card.js.map"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;yBACU;4BACG;qCACG;qCACH;AAI7B,MAAMA,OAAO,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAChE,MAAMC,QAAQC,IAAAA,yBAAgB,EAACH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAmB,EAACH;IAC7CI,IAAAA,2CAAsB,EAACJ;IACvB,OAAOK,IAAAA,+BAAmB,EAACL,OAAOE;AACpC;AACAP,KAAKW,WAAW,GAAG,QACnB,gCAAgC"}
+{"version":3,"sources":["Card.js"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport { useCardContextValue } from './useCardContextValue';\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */ export const Card = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useCard_unstable(props, ref);\n    const cardContextValue = useCardContextValue(state);\n    useCardStyles_unstable(state);\n    return renderCard_unstable(state, cardContextValue);\n});\nCard.displayName = 'Card';\n"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;yBACU;4BACG;qCACG;qCACH;AAGzB,MAAMA,OAAO,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACjE,MAAMC,QAAQC,IAAAA,yBAAgB,EAACH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAmB,EAACH;IAC7CI,IAAAA,2CAAsB,EAACJ;IACvB,OAAOK,IAAAA,+BAAmB,EAACL,OAAOE;AACtC;AACAP,KAAKW,WAAW,GAAG"}

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

@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
- //# sourceMappingURL=Card.types.js.map
-
-//# sourceMappingURL=Card.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/Card.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Card.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,sCAAsC"}
+{"version":3,"sources":["Card.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}

package/lib-commonjs/components/Card/CardContext.js

@@ -28,6 +28,4 @@ const cardContextDefaultValue = {
 };
 const CardProvider = cardContext.Provider;
 var _React_useContext;
-const useCardContext_unstable = ()=>(_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue; //# sourceMappingURL=CardContext.js.map
-
-//# sourceMappingURL=CardContext.js.map
+const useCardContext_unstable = ()=>(_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = /*#__PURE__*/React.createContext(undefined);\n/**\n * @internal\n */\nexport const cardContextDefaultValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */},\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */}\n  }\n};\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\nvar _React_useContext;\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => (_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n//# sourceMappingURL=CardContext.js.map"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAKaA,uBAAuB,MAAvBA;IAaAC,YAAY,MAAZA;IAKAC,uBAAuB,MAAvBA;;;6DAvBU;AACvB,MAAMC,cAAc,WAAW,GAAEC,OAAMC,aAAa,CAACC;AAI9C,MAAMN,0BAA0B;IACrCO,qBAAqB;QACnBC,aAAaF;QACbG,kBAAiB;QACf,QAAQ,GAAE;QACZC,gBAAgBJ;QAChBK,qBAAoB;QAClB,QAAQ,GAAE;IACd;AACF;AAIO,MAAMV,eAAeE,YAAYS,QAAQ;AAChD,IAAIC;AAIG,MAAMX,0BAA0B,IAAM,AAACW,CAAAA,oBAAoBT,OAAMU,UAAU,CAACX,YAAW,MAAO,IAAI,IAAIU,sBAAsB,KAAK,IAAIA,oBAAoBb,uBAAuB,EACvL,uCAAuC"}
+{"version":3,"sources":["CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = React.createContext(undefined);\n/**\n * @internal\n */ export const cardContextDefaultValue = {\n    selectableA11yProps: {\n        referenceId: undefined,\n        setReferenceId () {\n        /* Noop */ },\n        referenceLabel: undefined,\n        setReferenceLabel () {\n        /* Noop */ }\n    }\n};\n/**\n * @internal\n */ export const CardProvider = cardContext.Provider;\nvar _React_useContext;\n/**\n * @internal\n */ export const useCardContext_unstable = ()=>(_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAIiBA,uBAAuB,MAAvBA;IAYAC,YAAY,MAAZA;IAIAC,uBAAuB,MAAvBA;;;6DApBM;AACvB,MAAMC,4BAAcC,OAAMC,aAAa,CAACC;AAG7B,MAAMN,0BAA0B;IACvCO,qBAAqB;QACjBC,aAAaF;QACbG,kBAAkB;QAClB,QAAQ,GAAG;QACXC,gBAAgBJ;QAChBK,qBAAqB;QACrB,QAAQ,GAAG;IACf;AACJ;AAGW,MAAMV,eAAeE,YAAYS,QAAQ;AACpD,IAAIC;AAGO,MAAMX,0BAA0B,IAAI,AAACW,CAAAA,oBAAoBT,OAAMU,UAAU,CAACX,YAAW,MAAO,IAAI,IAAIU,sBAAsB,KAAK,IAAIA,oBAAoBb,uBAAuB"}

package/lib-commonjs/components/Card/index.js

@@ -9,6 +9,3 @@ _exportStar(require("./CardContext"), exports);
 _exportStar(require("./renderCard"), exports);
 _exportStar(require("./useCard"), exports);
 _exportStar(require("./useCardStyles.styles"), exports);
- //# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/index.js"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/lib-commonjs/components/Card/renderCard.js

@@ -14,6 +14,4 @@ const renderCard_unstable = (state, cardContextValue)=>{
     return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_cardContext.CardProvider, {
         value: cardContextValue
     }, slots.checkbox ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));
-}; //# sourceMappingURL=renderCard.js.map
-
-//# sourceMappingURL=renderCard.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/renderCard.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state, cardContextValue) => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(CardProvider, {\n    value: cardContextValue\n  }, slots.checkbox ? /*#__PURE__*/createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));\n};\n//# sourceMappingURL=renderCard.js.map"],"names":["renderCard_unstable","state","cardContextValue","slots","slotProps","getSlotsNext","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMrCA;;aAAAA;;iCANqE;gCACrD;6BACA;AAItB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAqB;IAC9D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAED,IAAAA,8BAAa,EAACE,yBAAY,EAAE;QACrGC,OAAOP;IACT,GAAGC,MAAMO,QAAQ,GAAG,WAAW,GAAEJ,IAAAA,8BAAa,EAACH,MAAMO,QAAQ,EAAEN,UAAUM,QAAQ,IAAI,IAAI,EAAEP,MAAMQ,cAAc,GAAG,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMQ,cAAc,EAAEP,UAAUO,cAAc,IAAI,IAAI,EAAEP,UAAUG,IAAI,CAACK,QAAQ;AAC9N,GACA,sCAAsC"}
+{"version":3,"sources":["renderCard.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */ export const renderCard_unstable = (state, cardContextValue)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(CardProvider, {\n        value: cardContextValue\n    }, slots.checkbox ? /*#__PURE__*/ createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));\n};\n"],"names":["renderCard_unstable","state","cardContextValue","slots","slotProps","getSlotsNext","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;6BACA;AAGlB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAmB;IAC9D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,yBAAY,EAAE;QACrGC,OAAOP;IACX,GAAGC,MAAMO,QAAQ,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMO,QAAQ,EAAEN,UAAUM,QAAQ,IAAI,IAAI,EAAEP,MAAMQ,cAAc,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMQ,cAAc,EAAEP,UAAUO,cAAc,IAAI,IAAI,EAAEP,UAAUG,IAAI,CAACK,QAAQ;AAClO"}

package/lib-commonjs/components/Card/useCard.js

@@ -90,6 +90,4 @@ const useCard_unstable = (props, ref)=>{
         floatingAction: floatingActionSlot,
         checkbox: checkboxSlot
     };
-}; //# sourceMappingURL=useCard.js.map
-
-//# sourceMappingURL=useCard.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited'\n};\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({\n  focusMode = 'off',\n  ...props\n}) => {\n  const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n  });\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0\n  };\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\n  };\n};\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props, ref) => {\n  const {\n    appearance = 'filled',\n    orientation = 'vertical',\n    size = 'medium'\n  } = props;\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const cardBaseRef = useFocusWithin();\n  const {\n    selectable,\n    selected,\n    selectableCardProps,\n    selectFocused,\n    checkboxSlot,\n    floatingActionSlot\n  } = useCardSelectable(props, {\n    referenceId,\n    referenceLabel\n  }, cardBaseRef);\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n  const {\n    interactive,\n    focusAttributes\n  } = useCardInteractive(props);\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel\n    },\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input'\n    },\n    root: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps\n    }),\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot\n  };\n};\n//# sourceMappingURL=useCard.js.map"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role"],"mappings":";;;;+BA6CaA;;aAAAA;;;6DA7CU;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AACA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAC1BC,WAAY,MAAK,EACjB,GAAGC,OACJ,GAAK;IACJ,MAAMC,cAAc;QAAC;QAAW;QAAiB;QAAa;QAAe;QAAe;QAAiB;QAAgB;QAAc;QAAe;KAAY,CAACC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAC/L,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACtCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC3D;IACA,MAAMQ,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IACA,OAAO;QACLP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC1E;AACF;AAUO,MAAMb,mBAAmB,CAACM,OAAOU,MAAQ;IAC9C,MAAM,EACJC,YAAa,SAAQ,EACrBC,aAAc,WAAU,EACxBC,MAAO,SAAQ,EAChB,GAAGb;IACJ,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EACJC,WAAU,EACVC,SAAQ,EACRC,oBAAmB,EACnBC,cAAa,EACbC,aAAY,EACZC,mBAAkB,EACnB,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAC3Bc;QACAM;IACF,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EACJT,YAAW,EACXQ,gBAAe,EAChB,GAAGX,mBAAmBE;IACvB,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QACAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YACjC3B,KAAKqB;YACLO,MAAM;YACN,GAAG7B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB;QACAS,gBAAgBN;QAChBO,UAAUR;IACZ;AACF,GACA,mCAAmC"}
+{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited'\n};\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */ const useCardInteractive = ({ focusMode ='off' , ...props })=>{\n    const interactive = [\n        'onClick',\n        'onDoubleClick',\n        'onMouseUp',\n        'onMouseDown',\n        'onPointerUp',\n        'onPointerDown',\n        'onTouchStart',\n        'onTouchEnd',\n        'onDragStart',\n        'onDragEnd'\n    ].some((prop)=>props[prop]);\n    const groupperAttrs = useFocusableGroup({\n        tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n    });\n    const interactiveFocusAttributes = {\n        ...groupperAttrs,\n        tabIndex: 0\n    };\n    return {\n        interactive,\n        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\n    };\n};\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */ export const useCard_unstable = (props, ref)=>{\n    const { appearance ='filled' , orientation ='vertical' , size ='medium'  } = props;\n    const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n    const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n    const cardBaseRef = useFocusWithin();\n    const { selectable , selected , selectableCardProps , selectFocused , checkboxSlot , floatingActionSlot  } = useCardSelectable(props, {\n        referenceId,\n        referenceLabel\n    }, cardBaseRef);\n    const cardRef = useMergedRefs(cardBaseRef, ref);\n    const { interactive , focusAttributes  } = useCardInteractive(props);\n    return {\n        appearance,\n        orientation,\n        size,\n        interactive,\n        selectable,\n        selectFocused,\n        selected,\n        selectableA11yProps: {\n            setReferenceId,\n            referenceId,\n            referenceLabel,\n            setReferenceLabel\n        },\n        components: {\n            root: 'div',\n            floatingAction: 'div',\n            checkbox: 'input'\n        },\n        root: getNativeElementProps('div', {\n            ref: cardRef,\n            role: 'group',\n            ...focusAttributes,\n            ...props,\n            ...selectableCardProps\n        }),\n        floatingAction: floatingActionSlot,\n        checkbox: checkboxSlot\n    };\n};\n"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role"],"mappings":";;;;+BAmDiBA;;aAAAA;;;6DAnDM;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACbC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AAChB;AACA;;;;;;;CAOC,GAAG,MAAMC,qBAAqB,CAAC,EAAEC,WAAW,MAAK,EAAG,GAAGC,OAAO,GAAG;IAC9D,MAAMC,cAAc;QAChB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH,CAACC,IAAI,CAAC,CAACC,OAAOH,KAAK,CAACG,KAAK;IAC1B,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACpCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC7D;IACA,MAAMQ,6BAA6B;QAC/B,GAAGH,aAAa;QAChBI,UAAU;IACd;IACA,OAAO;QACHP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC5E;AACJ;AASW,MAAMb,mBAAmB,CAACM,OAAOU,MAAM;IAC9C,MAAM,EAAEC,YAAY,SAAQ,EAAGC,aAAa,WAAU,EAAGC,MAAM,SAAQ,EAAG,GAAGb;IAC7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EAAEC,WAAU,EAAGC,SAAQ,EAAGC,oBAAmB,EAAGC,cAAa,EAAGC,aAAY,EAAGC,mBAAkB,EAAG,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAClIc;QACAM;IACJ,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EAAET,YAAW,EAAGQ,gBAAe,EAAG,GAAGX,mBAAmBE;IAC9D,OAAO;QACHW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACjBJ;YACAD;YACAM;YACAC;QACJ;QACAY,YAAY;YACRC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACd;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YAC/B3B,KAAKqB;YACLO,MAAM;YACN,GAAG7B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QAC1B;QACAS,gBAAgBN;QAChBO,UAAUR;IACd;AACJ"}

package/lib-commonjs/components/Card/useCardContextValue.js

@@ -10,6 +10,4 @@ function useCardContextValue({ selectableA11yProps  }) {
     return {
         selectableA11yProps
     };
-} //# sourceMappingURL=useCardContextValue.js.map
-
-//# sourceMappingURL=useCardContextValue.js.map
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/useCardContextValue.js"],"sourcesContent":["export function useCardContextValue({\n  selectableA11yProps\n}) {\n  return {\n    selectableA11yProps\n  };\n}\n//# sourceMappingURL=useCardContextValue.js.map"],"names":["useCardContextValue","selectableA11yProps"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,oBAAoB,EAClCC,oBAAmB,EACpB,EAAE;IACD,OAAO;QACLA;IACF;AACF,EACA,+CAA+C"}
+{"version":3,"sources":["useCardContextValue.js"],"sourcesContent":["export function useCardContextValue({ selectableA11yProps  }) {\n    return {\n        selectableA11yProps\n    };\n}\n"],"names":["useCardContextValue","selectableA11yProps"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,oBAAoB,EAAEC,oBAAmB,EAAG,EAAE;IAC1D,OAAO;QACHA;IACJ;AACJ"}

package/lib-commonjs/components/Card/useCardSelectable.js

@@ -131,6 +131,4 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         checkboxSlot,
         floatingActionSlot
     };
-}; //# sourceMappingURL=useCardSelectable.js.map
-
-//# sourceMappingURL=useCardSelectable.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/useCardSelectable.js"],"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/**\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 = (props, {\n  referenceLabel,\n  referenceId\n}, cardRef) => {\n  const {\n    checkbox = {},\n    selected,\n    defaultSelected,\n    onSelectionChange,\n    floatingAction,\n    onClick,\n    onKeyDown\n  } = props;\n  const {\n    findAllFocusable\n  } = useFocusFinders();\n  const checkboxRef = React.useRef(null);\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n  const shouldRestrictTriggerAction = React.useCallback(event => {\n    if (!cardRef.current) {\n      return false;\n    }\n    const focusableElements = findAllFocusable(cardRef.current);\n    const target = event.target;\n    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;\n    return isElementInFocusableGroup && !isCheckboxSlot;\n  }, [cardRef, findAllFocusable]);\n  const onChangeHandler = React.useCallback(event => {\n    if (shouldRestrictTriggerAction(event)) {\n      return;\n    }\n    const newCheckedValue = !isCardSelected;\n    setIsCardSelected(newCheckedValue);\n    if (onSelectionChange) {\n      onSelectionChange(event, {\n        selected: newCheckedValue\n      });\n    }\n  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);\n  const onKeyDownHandler = React.useCallback(event => {\n    if ([Enter].includes(event.key)) {\n      event.preventDefault();\n      onChangeHandler(event);\n    }\n  }, [onChangeHandler]);\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n    const selectableCheckboxProps = {};\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: event => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps\n      }\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef\n      }\n    });\n  }, [floatingAction]);\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot\n  };\n};\n//# sourceMappingURL=useCardSelectable.js.map"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","resolveShorthand","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}
+{"version":3,"sources":["useCardSelectable.js"],"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/**\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 */ export const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{\n    const { checkbox ={} , selected , defaultSelected , onSelectionChange , floatingAction , onClick , onKeyDown  } = props;\n    const { findAllFocusable  } = useFocusFinders();\n    const checkboxRef = React.useRef(null);\n    const isSelectable = [\n        selected,\n        defaultSelected,\n        onSelectionChange\n    ].some((prop)=>typeof prop !== 'undefined');\n    const [isCardSelected, setIsCardSelected] = React.useState(false);\n    const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n    const shouldRestrictTriggerAction = React.useCallback((event)=>{\n        if (!cardRef.current) {\n            return false;\n        }\n        const focusableElements = findAllFocusable(cardRef.current);\n        const target = event.target;\n        const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));\n        const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;\n        return isElementInFocusableGroup && !isCheckboxSlot;\n    }, [\n        cardRef,\n        findAllFocusable\n    ]);\n    const onChangeHandler = React.useCallback((event)=>{\n        if (shouldRestrictTriggerAction(event)) {\n            return;\n        }\n        const newCheckedValue = !isCardSelected;\n        setIsCardSelected(newCheckedValue);\n        if (onSelectionChange) {\n            onSelectionChange(event, {\n                selected: newCheckedValue\n            });\n        }\n    }, [\n        onSelectionChange,\n        isCardSelected,\n        shouldRestrictTriggerAction\n    ]);\n    const onKeyDownHandler = React.useCallback((event)=>{\n        if ([\n            Enter\n        ].includes(event.key)) {\n            event.preventDefault();\n            onChangeHandler(event);\n        }\n    }, [\n        onChangeHandler\n    ]);\n    const checkboxSlot = React.useMemo(()=>{\n        if (!isSelectable || floatingAction) {\n            return;\n        }\n        const selectableCheckboxProps = {};\n        if (referenceId) {\n            selectableCheckboxProps['aria-labelledby'] = referenceId;\n        } else if (referenceLabel) {\n            selectableCheckboxProps['aria-label'] = referenceLabel;\n        }\n        return resolveShorthand(checkbox, {\n            defaultProps: {\n                ref: checkboxRef,\n                type: 'checkbox',\n                checked: isCardSelected,\n                onChange: (event)=>onChangeHandler(event),\n                onFocus: ()=>setIsSelectFocused(true),\n                onBlur: ()=>setIsSelectFocused(false),\n                ...selectableCheckboxProps\n            }\n        });\n    }, [\n        checkbox,\n        floatingAction,\n        isCardSelected,\n        isSelectable,\n        onChangeHandler,\n        referenceId,\n        referenceLabel\n    ]);\n    const floatingActionSlot = React.useMemo(()=>{\n        if (!floatingAction) {\n            return;\n        }\n        return resolveShorthand(floatingAction, {\n            defaultProps: {\n                ref: checkboxRef\n            }\n        });\n    }, [\n        floatingAction\n    ]);\n    const selectableCardProps = React.useMemo(()=>{\n        if (!isSelectable) {\n            return null;\n        }\n        return {\n            onClick: mergeCallbacks(onClick, onChangeHandler),\n            onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n        };\n    }, [\n        isSelectable,\n        onChangeHandler,\n        onClick,\n        onKeyDown,\n        onKeyDownHandler\n    ]);\n    React.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [\n        defaultSelected,\n        selected,\n        setIsCardSelected\n    ]);\n    return {\n        selected: isCardSelected,\n        selectable: isSelectable,\n        selectFocused: isSelectFocused,\n        selectableCardProps,\n        checkboxSlot,\n        floatingActionSlot\n    };\n};\n"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","resolveShorthand","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}

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

@@ -13,8 +13,10 @@ _export(exports, {
     cardCSSVars: ()=>cardCSSVars,
     useCardStyles_unstable: ()=>useCardStyles_unstable
 });
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = require("@griffel/react");
 const _reactTheme = require("@fluentui/react-theme");
+const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const cardClassNames = {
     root: 'fui-Card',
     floatingAction: 'fui-Card__floatingAction',
@@ -26,7 +28,8 @@ const cardCSSVars = {
 };
 const focusOutlineStyle = {
     outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
-    outlineWidth: _reactTheme.tokens.strokeWidthThick
+    outlineWidth: _reactTheme.tokens.strokeWidthThick,
+    outlineOffset: '-2px'
 };
 const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
     root: {
@@ -114,7 +117,9 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
             "f1anhtl"
         ],
         B2jhnfs: "f16v3d5c",
-        wiictr: "f1su8t2g",
+        wiictr: "f1su8t2g"
+    },
+    focused: {
         Brovlpu: "ftqa4ok",
         B486eqv: "f2hkw1w",
         B8q5s1w: "f8hki3x",
@@ -177,15 +182,15 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
             "f1cwg4i8",
             "fd0oaoj"
         ],
-        J0r882: "f3l4wcz",
-        Bjwuhne: "f6j2biq",
-        Ghsupd: [
-            "fdzzmfx",
-            "fduh8kh"
-        ],
+        J0r882: "f15fr7a0",
         Bule8hv: [
-            "fduh8kh",
-            "fdzzmfx"
+            "fwsq40z",
+            "fy0y4wt"
+        ],
+        Bjwuhne: "f34ld9f",
+        Ghsupd: [
+            "fy0y4wt",
+            "fwsq40z"
         ]
     },
     selectableFocused: {
@@ -251,15 +256,15 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
             "ftuszwa",
             "f1ya6x16"
         ],
-        B2pnrqr: "f4a0pcc",
-        Bhhzhcn: "f11go4w5",
-        Bec0n69: [
-            "f4dzull",
-            "fy687nj"
-        ],
+        B2pnrqr: "f1amxum7",
         B29w5g4: [
-            "fy687nj",
-            "f4dzull"
+            "f1cec8w7",
+            "f554mv0"
+        ],
+        Bhhzhcn: "f1sj6kbr",
+        Bec0n69: [
+            "f554mv0",
+            "f1cec8w7"
         ]
     },
     orientationHorizontal: {
@@ -619,10 +624,10 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}",
         ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}",
         ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
-        ".f3l4wcz[data-fui-focus-visible]::after{top:-var(--strokeWidthThick);}",
-        ".f6j2biq[data-fui-focus-visible]::after{bottom:-var(--strokeWidthThick);}",
-        ".fdzzmfx[data-fui-focus-visible]::after{left:-var(--strokeWidthThick);}",
-        ".fduh8kh[data-fui-focus-visible]::after{right:-var(--strokeWidthThick);}",
+        ".f15fr7a0[data-fui-focus-visible]::after{top:calc(0px - var(--strokeWidthThick) - -2px);}",
+        ".fwsq40z[data-fui-focus-visible]::after{right:calc(0px - var(--strokeWidthThick) - -2px);}",
+        ".fy0y4wt[data-fui-focus-visible]::after{left:calc(0px - var(--strokeWidthThick) - -2px);}",
+        ".f34ld9f[data-fui-focus-visible]::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}",
         ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}",
         ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}",
         ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}",
@@ -647,10 +652,10 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}",
         ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}",
         ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}",
-        ".f4a0pcc[data-fui-focus-within]:focus-within::after{top:-var(--strokeWidthThick);}",
-        ".f11go4w5[data-fui-focus-within]:focus-within::after{bottom:-var(--strokeWidthThick);}",
-        ".f4dzull[data-fui-focus-within]:focus-within::after{left:-var(--strokeWidthThick);}",
-        ".fy687nj[data-fui-focus-within]:focus-within::after{right:-var(--strokeWidthThick);}",
+        ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}",
+        ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}",
+        ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}",
+        ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}",
         ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}",
         ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
         ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}",
@@ -866,8 +871,23 @@ const useCardStyles_unstable = (state)=>{
         subtle: styles.subtleInteractive
     };
     const isSelectableOrInteractive = state.interactive || state.selectable;
-    state.root.className = (0, _react.mergeClasses)(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], state.selectFocused && styles.selectableFocused, // High contrast overrides
-    state.selected && styles.highContrastSelected, isSelectableOrInteractive && styles.highContrastInteractive, state.root.className);
+    const focusedClassName = _react1.useMemo(()=>{
+        if (state.selectable) {
+            if (state.selectFocused) {
+                return styles.selectableFocused;
+            }
+            return '';
+        }
+        return styles.focused;
+    }, [
+        state.selectFocused,
+        state.selectable,
+        styles.focused,
+        styles.selectableFocused
+    ]);
+    state.root.className = (0, _react.mergeClasses)(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], // Focus overrides
+    focusedClassName, // High contrast overrides
+    isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
     if (state.floatingAction) {
         state.floatingAction.className = (0, _react.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
     }
@@ -876,5 +896,3 @@ const useCardStyles_unstable = (state)=>{
     }
     return state;
 }; //# sourceMappingURL=useCardStyles.styles.js.map
-
-//# sourceMappingURL=useCardStyles.styles.js.map