Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+40
View File
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Card: function() {
return _index.Card;
},
CardProvider: function() {
return _index.CardProvider;
},
cardCSSVars: function() {
return _index.cardCSSVars;
},
cardClassNames: function() {
return _index.cardClassNames;
},
cardContextDefaultValue: function() {
return _index.cardContextDefaultValue;
},
renderCard_unstable: function() {
return _index.renderCard_unstable;
},
useCardContext_unstable: function() {
return _index.useCardContext_unstable;
},
useCardStyles_unstable: function() {
return _index.useCardStyles_unstable;
},
useCard_unstable: function() {
return _index.useCard_unstable;
}
});
const _index = require("./components/Card/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Card.ts"],"sourcesContent":["export type {\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './components/Card/index';\nexport {\n Card,\n CardProvider,\n cardCSSVars,\n cardClassNames,\n cardContextDefaultValue,\n renderCard_unstable,\n useCardContext_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASEA,IAAI;eAAJA,WAAI;;IACJC,YAAY;eAAZA,mBAAY;;IACZC,WAAW;eAAXA,kBAAW;;IACXC,cAAc;eAAdA,qBAAc;;IACdC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,gBAAgB;eAAhBA,uBAAgB;;;uBACX"}
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardFooter: function() {
return _index.CardFooter;
},
cardFooterClassNames: function() {
return _index.cardFooterClassNames;
},
renderCardFooter_unstable: function() {
return _index.renderCardFooter_unstable;
},
useCardFooterStyles_unstable: function() {
return _index.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _index.useCardFooter_unstable;
}
});
const _index = require("./components/CardFooter/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type { CardFooterProps, CardFooterSlots, CardFooterState } from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,UAAU;eAAVA,iBAAU;;IACVC,oBAAoB;eAApBA,2BAAoB;;IACpBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
+31
View File
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardHeader: function() {
return _index.CardHeader;
},
cardHeaderCSSVars: function() {
return _index.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _index.cardHeaderClassNames;
},
renderCardHeader_unstable: function() {
return _index.renderCardHeader_unstable;
},
useCardHeaderStyles_unstable: function() {
return _index.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _index.useCardHeader_unstable;
}
});
const _index = require("./components/CardHeader/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,UAAU;eAAVA,iBAAU;;IACVC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,oBAAoB;eAApBA,2BAAoB;;IACpBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardPreview: function() {
return _index.CardPreview;
},
cardPreviewClassNames: function() {
return _index.cardPreviewClassNames;
},
renderCardPreview_unstable: function() {
return _index.renderCardPreview_unstable;
},
useCardPreviewStyles_unstable: function() {
return _index.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _index.useCardPreview_unstable;
}
});
const _index = require("./components/CardPreview/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}
+23
View File
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Card", {
enumerable: true,
get: function() {
return Card;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCard = require("./useCard");
const _renderCard = require("./renderCard");
const _useCardStylesstyles = require("./useCardStyles.styles");
const _useCardContextValue = require("./useCardContextValue");
const Card = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCard.useCard_unstable)(props, ref);
const cardContextValue = (0, _useCardContextValue.useCardContextValue)(state);
(0, _useCardStylesstyles.useCardStyles_unstable)(state);
return (0, _renderCard.renderCard_unstable)(state, cardContextValue);
});
Card.displayName = 'Card';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;yBACU;4BACG;qCACG;qCAGH;AAK7B,MAAMA,OAAAA,WAAAA,GAAuCC,OAAMC,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yBAAAA,EAAiBH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAAA,EAAoBH;IAE7CI,IAAAA,2CAAAA,EAAuBJ;IACvB,OAAOK,IAAAA,+BAAAA,EAAoBL,OAAOE;AACpC;AAEAP,KAAKW,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n selectableA11yProps: {\n referenceId?: string;\n setReferenceId: (referenceId: string) => void;\n referenceLabel?: string;\n setReferenceLabel: (referenceLabel: string) => void;\n };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Floating action that can be rendered on the top-right of a card. Often used together with\n * `selected`, `defaultSelected`, and `onSelectionChange` props\n */\n floatingAction?: Slot<'div'>;\n\n /**\n * The internal checkbox element that renders when the card is selectable.\n */\n checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n /**\n * Sets the appearance of the card.\n *\n * `filled`\n * The card will have a shadow, border and background color.\n *\n * `filled-alternative`\n * This appearance is similar to `filled`, but the background color will be a little darker.\n *\n * `outline`\n * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n *\n * `subtle`\n * This appearance is similar to `filled-alternative`, but no border is applied.\n *\n * @default 'filled'\n */\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @default 'off'\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n /**\n * Defines the orientation of the card.\n *\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n\n /**\n * Controls the card's border radius and padding between inner elements.\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Defines the controlled selected state of the card.\n *\n * @default false\n */\n selected?: boolean;\n\n /**\n * Defines whether the card is initially in a selected state when rendered.\n *\n * @default false\n */\n defaultSelected?: boolean;\n\n /**\n * Callback to be called when the selected state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n CardContextValue &\n Required<\n Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n /**\n * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n *\n * @default false\n */\n interactive: boolean;\n\n /**\n * Represents a selectable card.\n *\n * @default false\n */\n selectable: boolean;\n\n /**\n * Defines whether the card is currently selected.\n *\n * @default false\n */\n selected: boolean;\n\n /**\n * Defines whether the card internal checkbox is currently focused.\n *\n * @default false\n */\n selectFocused: boolean;\n }\n >;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardProvider: function() {
return CardProvider;
},
cardContextDefaultValue: function() {
return cardContextDefaultValue;
},
useCardContext_unstable: function() {
return useCardContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const cardContext = /*#__PURE__*/ _react.createContext(undefined);
const cardContextDefaultValue = {
selectableA11yProps: {
referenceId: undefined,
setReferenceId () {
/* Noop */ },
referenceLabel: undefined,
setReferenceLabel () {
/* Noop */ }
}
};
const CardProvider = cardContext.Provider;
const useCardContext_unstable = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId() {\n /* Noop */\n },\n referenceLabel: undefined,\n setReferenceLabel() {\n /* Noop */\n },\n },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["CardProvider","cardContextDefaultValue","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAwBaA,YAAAA;eAAAA;;IAhBAC,uBAAAA;eAAAA;;IAqBAC,uBAAAA;eAAAA;;;;iEA7BU;AAGvB,MAAMC,4BAAcC,OAAMC,aAAa,CAA+BC;AAK/D,MAAML,0BAA4C;IACvDM,qBAAqB;QACnBC,aAAaF;QACbG;QACE,QAAQ,GACV;QACAC,gBAAgBJ;QAChBK;QACE,QAAQ,GACV;IACF;AACF;AAKO,MAAMX,eAAeG,YAAYS,QAAQ;AAKzC,MAAMV,0BAA0B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACV,YAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAiCH;AAAsB"}
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Card: function() {
return _Card.Card;
},
CardProvider: function() {
return _CardContext.CardProvider;
},
cardCSSVars: function() {
return _useCardStylesstyles.cardCSSVars;
},
cardClassNames: function() {
return _useCardStylesstyles.cardClassNames;
},
cardContextDefaultValue: function() {
return _CardContext.cardContextDefaultValue;
},
renderCard_unstable: function() {
return _renderCard.renderCard_unstable;
},
useCardContext_unstable: function() {
return _CardContext.useCardContext_unstable;
},
useCardStyles_unstable: function() {
return _useCardStylesstyles.useCardStyles_unstable;
},
useCard_unstable: function() {
return _useCard.useCard_unstable;
}
});
const _Card = require("./Card");
const _CardContext = require("./CardContext");
const _renderCard = require("./renderCard");
const _useCard = require("./useCard");
const _useCardStylesstyles = require("./useCardStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './Card.types';\nexport { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';\nexport { renderCard_unstable } from './renderCard';\nexport { useCard_unstable } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IASJC,YAAY;eAAZA,yBAAY;;IAGZC,WAAW;eAAXA,gCAAW;;IAAEC,cAAc;eAAdA,mCAAc;;IAHbC,uBAAuB;eAAvBA,oCAAuB;;IACrCC,mBAAmB;eAAnBA,+BAAmB;;IADoBC,uBAAuB;eAAvBA,oCAAuB;;IAGjCC,sBAAsB;eAAtBA,2CAAsB;;IADnDC,gBAAgB;eAAhBA,yBAAgB;;;sBAXJ;6BAS0D;4BAC3C;yBACH;qCACmC"}
@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCard_unstable", {
enumerable: true,
get: function() {
return renderCard_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CardContext = require("./CardContext");
const renderCard_unstable = (state, cardContextValue)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_CardContext.CardProvider, {
value: cardContextValue,
children: [
state.checkbox ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkbox, {}) : null,
state.floatingAction ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.floatingAction, {}) : null,
state.root.children
]
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["renderCard_unstable","state","cardContextValue","assertSlots","_jsx","root","_jsxs","CardProvider","value","checkbox","floatingAction","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;6BAEC;AAKtB,MAAMA,sBAAsB,CAACC,OAAkBC;IACpDC,IAAAA,2BAAAA,EAAuBF;IAEvB,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAC,IAAAA,gBAAA,EAACC,yBAAAA,EAAAA;YAAaC,OAAON;;gBAClBD,MAAMQ,QAAQ,GAAA,WAAA,GAAGL,IAAAA,eAAA,EAACH,MAAMQ,QAAQ,EAAA,CAAA,KAAM;gBACtCR,MAAMS,cAAc,GAAA,WAAA,GAAGN,IAAAA,eAAA,EAACH,MAAMS,cAAc,EAAA,CAAA,KAAM;gBAClDT,MAAMI,IAAI,CAACM,QAAQ;;;;AAI5B"}
@@ -0,0 +1,99 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCard_unstable", {
enumerable: true,
get: function() {
return useCard_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const _useCardSelectable = require("./useCardSelectable");
const _CardContext = require("./CardContext");
const focusMap = {
off: undefined,
'no-tab': 'limited-trap-focus',
'tab-exit': 'limited',
'tab-only': 'unlimited'
};
/**
* Create the state for interactive cards.
*
* This internal hook defines if the card is interactive
* and control focus properties based on that.
*
* @param props - props from this instance of Card
*/ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
const interactive = [
'onClick',
'onDoubleClick',
'onMouseUp',
'onMouseDown',
'onPointerUp',
'onPointerDown',
'onTouchStart',
'onTouchEnd',
'onDragStart',
'onDragEnd'
].some((prop)=>props[prop]);
// default focusMode to tab-only when interactive, and off when not
const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
const groupperAttrs = (0, _reacttabster.useFocusableGroup)({
tabBehavior: focusMap[focusMode]
});
const interactiveFocusAttributes = {
...groupperAttrs,
tabIndex: 0
};
return {
interactive,
focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
};
};
const useCard_unstable = (props, ref)=>{
const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;
const [referenceId, setReferenceId] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
const [referenceLabel, setReferenceLabel] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
const cardBaseRef = (0, _reacttabster.useFocusWithin)();
const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = (0, _useCardSelectable.useCardSelectable)(props, {
referenceId,
referenceLabel
}, cardBaseRef);
const cardRef = (0, _reactutilities.useMergedRefs)(cardBaseRef, ref);
const { interactive, focusAttributes } = useCardInteractive(props);
return {
appearance,
orientation,
size,
interactive,
selectable,
selectFocused,
selected,
selectableA11yProps: {
setReferenceId,
referenceId,
referenceLabel,
setReferenceLabel
},
components: {
root: 'div',
floatingAction: 'div',
checkbox: 'input'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: cardRef,
role: 'group',
...!selectable ? focusAttributes : null,
...props,
...selectableCardProps
}), {
elementType: 'div'
}),
floatingAction: floatingActionSlot,
checkbox: checkboxSlot
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,15 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardContextValue", {
enumerable: true,
get: function() {
return useCardContextValue;
}
});
function useCardContextValue({ selectableA11yProps }) {
return {
selectableA11yProps
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n return { selectableA11yProps };\n}\n"],"names":["useCardContextValue","selectableA11yProps"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,oBAAoB,EAAEC,mBAAmB,EAAa;IACpE,OAAO;QAAEA;IAAoB;AAC/B"}
@@ -0,0 +1,138 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardSelectable", {
enumerable: true,
get: function() {
return useCardSelectable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _reacttabster = require("@fluentui/react-tabster");
const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
const checkboxRef = _react.useRef(null);
const [selected, setSelected] = (0, _reactutilities.useControllableState)({
state: props.selected,
defaultState: props.defaultSelected,
initialState: false
});
const selectable = [
props.selected,
props.defaultSelected,
onSelectionChange
].some((prop)=>typeof prop !== 'undefined');
const [selectFocused, setSelectFocused] = _react.useState(false);
const shouldRestrictTriggerAction = _react.useCallback((event)=>{
if (!cardRef.current) {
return false;
}
const focusableElements = findAllFocusable(cardRef.current);
const target = event.target;
const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
return isElementInFocusableGroup && !isCheckboxSlot;
}, [
cardRef,
findAllFocusable
]);
const onChangeHandler = _react.useCallback((event)=>{
if (shouldRestrictTriggerAction(event)) {
return;
}
const newCheckedValue = !selected;
setSelected(newCheckedValue);
if (onSelectionChange) {
onSelectionChange(event, {
selected: newCheckedValue
});
}
}, [
onSelectionChange,
selected,
setSelected,
shouldRestrictTriggerAction
]);
const onKeyDownHandler = _react.useCallback((event)=>{
if ([
_keyboardkeys.Enter
].includes(event.key)) {
event.preventDefault();
onChangeHandler(event);
}
}, [
onChangeHandler
]);
const checkboxSlot = _react.useMemo(()=>{
if (!selectable || floatingAction) {
return;
}
const selectableCheckboxProps = {};
if (referenceId) {
selectableCheckboxProps['aria-labelledby'] = referenceId;
} else if (referenceLabel) {
selectableCheckboxProps['aria-label'] = referenceLabel;
}
return _reactutilities.slot.optional(checkbox, {
defaultProps: {
ref: checkboxRef,
type: 'checkbox',
checked: selected,
onChange: (event)=>onChangeHandler(event),
onFocus: ()=>setSelectFocused(true),
onBlur: ()=>setSelectFocused(false),
...selectableCheckboxProps
},
elementType: 'input'
});
}, [
checkbox,
floatingAction,
selected,
selectable,
onChangeHandler,
referenceId,
referenceLabel
]);
const floatingActionSlot = _react.useMemo(()=>{
if (!floatingAction) {
return;
}
return _reactutilities.slot.optional(floatingAction, {
defaultProps: {
ref: checkboxRef
},
elementType: 'div'
});
}, [
floatingAction
]);
const selectableCardProps = _react.useMemo(()=>{
if (!selectable) {
return null;
}
return {
onClick: (0, _reactutilities.mergeCallbacks)(onClick, onChangeHandler),
onKeyDown: (0, _reactutilities.mergeCallbacks)(onKeyDown, onKeyDownHandler)
};
}, [
selectable,
onChangeHandler,
onClick,
onKeyDown,
onKeyDownHandler
]);
return {
selected,
selectable,
selectFocused,
selectableCardProps,
checkboxSlot,
floatingActionSlot
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,781 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardCSSVars: function() {
return cardCSSVars;
},
cardClassNames: function() {
return cardClassNames;
},
useCardStyles_unstable: function() {
return useCardStyles_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _react1 = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const cardClassNames = {
root: 'fui-Card',
floatingAction: 'fui-Card__floatingAction',
checkbox: 'fui-Card__checkbox'
};
const cardCSSVars = {
cardSizeVar: '--fui-Card--size',
cardBorderRadiusVar: '--fui-Card--border-radius'
};
const focusOutlineStyle = {
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
outlineWidth: _reacttheme.tokens.strokeWidthThick,
outlineOffset: '-2px'
};
const useCardResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("rfxo2k2", "rgle7w9", [
".rfxo2k2{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}",
".rfxo2k2::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}",
".rfxo2k2>.fui-CardHeader,.rfxo2k2>.fui-CardFooter{flex-shrink:0;}",
".rgle7w9{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}",
".rgle7w9::after{position:absolute;top:0;right:0;left:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}",
".rgle7w9>.fui-CardHeader,.rgle7w9>.fui-CardFooter{flex-shrink:0;}"
]);
const useCardStyles = /*#__PURE__*/ (0, _react1.__styles)({
focused: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
B8q5s1w: "f8hki3x",
Bci5o5g: [
"f1d2448m",
"ffh67wi"
],
n8qw10: "f1bjia2o",
Bdrgwmp: [
"ffh67wi",
"f1d2448m"
],
Bb7d1vk: "f226i61",
zhwhgb: [
"f13kzufm",
"fsx75g8"
],
dhy2o1: "flujwa2",
Gfyso: [
"fsx75g8",
"f13kzufm"
],
Bm4h7ae: "f15bsgw9",
B7ys5i9: "f14e48fq",
Busjfv9: "f18yb2kv",
Bhk32uz: "fd6o370",
f6g5ot: 0,
Boxcth7: 0,
Bhdgwq3: 0,
hgwjuy: 0,
Bshpdp8: 0,
Bsom6fd: 0,
Blkhhs4: 0,
Bonggc9: 0,
Ddfuxk: 0,
i03rao: 0,
kclons: 0,
clg4pj: 0,
Bpqj9nj: 0,
B6dhp37: 0,
Bf4ptjt: 0,
Bqtpl0w: 0,
i4rwgc: "fpqizxz",
Dah5zi: 0,
B1tsrr9: 0,
qqdqy8: 0,
Bkh64rk: 0,
e3fwne: "fnd8nzh",
J0r882: "f15fr7a0",
Bule8hv: [
"fwsq40z",
"fy0y4wt"
],
Bjwuhne: "f34ld9f",
Ghsupd: [
"fy0y4wt",
"fwsq40z"
]
},
selectableFocused: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
Bssx7fj: "f1b1k54r",
uh7if5: [
"f4ne723",
"fqqcjud"
],
clntm0: "fh7aioi",
Dlk2r6: [
"fqqcjud",
"f4ne723"
],
Bm3wd5j: "f1k55ka9",
Bbrhkcr: [
"fgclinu",
"f16pcs8n"
],
f1oku: "fycbxed",
aywvf2: [
"f16pcs8n",
"fgclinu"
],
B2j2mmj: "ffht0p2",
wigs8: "f1p0ul1q",
pbfy6t: "f1c901ms",
B0v4ure: "f1alokd7",
Byrf0fs: 0,
Bsiemmq: 0,
Bwckmig: 0,
skfxo0: 0,
Iidy0u: 0,
B98u21t: 0,
Bvwlmkc: 0,
jo1ztg: 0,
Ba1iezr: 0,
Blmvk6g: 0,
B24cy0v: 0,
Bil7v7r: 0,
Br3gin4: 0,
nr063g: 0,
ghq09: 0,
Bbgo44z: 0,
Bseh09z: "f1i978nd",
az1dzo: 0,
Ba3ybja: 0,
B6352mv: 0,
vppk2z: 0,
Biaj6j7: "f1nh8hsq",
B2pnrqr: "f1amxum7",
B29w5g4: [
"f1cec8w7",
"f554mv0"
],
Bhhzhcn: "f1sj6kbr",
Bec0n69: [
"f554mv0",
"f1cec8w7"
]
},
orientationHorizontal: {
Beiy3e4: "f1063pyq",
Bt984gj: "f122n59",
Binpb3b: "ftrw7vg",
qrt8p2: "f18opajm",
k6ws3r: [
"f13002it",
"fqo182t"
],
Btcwela: [
"f18yna97",
"f1kd6wh7"
],
Fer9m8: "f4i4759"
},
orientationVertical: {
Beiy3e4: "f1vx9l62",
B5nvv7i: [
"f14k419y",
"f1fgo9fz"
],
Baxg94k: [
"f1fgo9fz",
"f14k419y"
],
tn21ii: "fvqmfsm",
B0ud6bj: "f3am6yf",
Bgdo4j: "f1r5wgso"
},
sizeSmall: {
B7balbw: "f1pi9uxy",
B1h88n7: "f1h1zgly"
},
sizeMedium: {
B7balbw: "frsmuga",
B1h88n7: "fuldkky"
},
sizeLarge: {
B7balbw: "f1qua4xo",
B1h88n7: "fimkt6v"
},
interactive: {
rhjd8f: "f1epqm3e"
},
filled: {
De3pzq: "fxugw4r",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: [
"fpgykix",
"fzybk4o"
],
B1q35kw: "f1osi826",
Gp14am: [
"fzybk4o",
"fpgykix"
]
},
filledInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "fxugw4r",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: [
"fpgykix",
"fzybk4o"
],
B1q35kw: "f1osi826",
Gp14am: [
"fzybk4o",
"fpgykix"
],
Bi91k9c: "feu1g3u",
Jwef8y: "f1knas48",
Bvxd0ez: "f1m145df",
ecr2s2: "fb40n2d"
},
filledInteractiveSelected: {
De3pzq: "f1nfm20t",
B0n5ga8: "f16eln5f",
s924m2: [
"fa2okxs",
"fg4zq3l"
],
B1q35kw: "ff6932p",
Gp14am: [
"fg4zq3l",
"fa2okxs"
],
Bi91k9c: "fx9teim",
Jwef8y: "f1kz6goq"
},
filledAlternative: {
De3pzq: "f1dmdbja",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: [
"fpgykix",
"fzybk4o"
],
B1q35kw: "f1osi826",
Gp14am: [
"fzybk4o",
"fpgykix"
]
},
filledAlternativeInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "f1dmdbja",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: [
"fpgykix",
"fzybk4o"
],
B1q35kw: "f1osi826",
Gp14am: [
"fzybk4o",
"fpgykix"
],
Bi91k9c: "fnwyq0v",
Jwef8y: "f1uvynv3",
Bvxd0ez: "f1m145df",
ecr2s2: "f1yhgkbh"
},
filledAlternativeInteractiveSelected: {
De3pzq: "fjxa0vh",
B0n5ga8: "f16eln5f",
s924m2: [
"fa2okxs",
"fg4zq3l"
],
B1q35kw: "ff6932p",
Gp14am: [
"fg4zq3l",
"fa2okxs"
],
Bi91k9c: "f1luvkty",
Jwef8y: "fehi0vp"
},
outline: {
De3pzq: "f1c21dwh",
E5pizo: "f1couhl3",
B0n5ga8: "ft83z1f",
s924m2: [
"f1g4150c",
"f192dr6e"
],
B1q35kw: "f1qnawh6",
Gp14am: [
"f192dr6e",
"f1g4150c"
]
},
outlineInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "f1c21dwh",
E5pizo: "f1couhl3",
B0n5ga8: "ft83z1f",
s924m2: [
"f1g4150c",
"f192dr6e"
],
B1q35kw: "f1qnawh6",
Gp14am: [
"f192dr6e",
"f1g4150c"
],
Bi91k9c: "feu1g3u",
Jwef8y: "fjxutwb",
Be0v6ae: "f1llr77y",
B5kxglz: [
"fzk0khw",
"fjj8tog"
],
B3pwyw6: "fb1u8ub",
Bymgtzf: [
"fjj8tog",
"fzk0khw"
],
ecr2s2: "fophhak",
dmfk: "f1uohb70",
B4ofi8: [
"f1jm7v1n",
"f1bus3rq"
],
jgq6uv: "f1fbu7rr",
Baxewws: [
"f1bus3rq",
"f1jm7v1n"
]
},
outlineInteractiveSelected: {
De3pzq: "f1q9pm1r",
B0n5ga8: "f16eln5f",
s924m2: [
"fa2okxs",
"fg4zq3l"
],
B1q35kw: "ff6932p",
Gp14am: [
"fg4zq3l",
"fa2okxs"
],
Bi91k9c: "fx9teim",
Jwef8y: "fg59vm4"
},
subtle: {
De3pzq: "fhovq9v",
E5pizo: "f1couhl3",
B0n5ga8: "f16gxe2i",
s924m2: [
"fpgykix",
"fzybk4o"
],
B1q35kw: "f1osi826",
Gp14am: [
"fzybk4o",
"fpgykix"
]
},
subtleInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "fhovq9v",
E5pizo: "f1couhl3",
B0n5ga8: "f16gxe2i",
s924m2: [
"fpgykix",
"fzybk4o"
],
B1q35kw: "f1osi826",
Gp14am: [
"fzybk4o",
"fpgykix"
],
Bi91k9c: "feu1g3u",
Jwef8y: "f1t94bn6",
ecr2s2: "f1wfn5kd"
},
subtleInteractiveSelected: {
De3pzq: "fq5gl1p",
B0n5ga8: "f16eln5f",
s924m2: [
"fa2okxs",
"fg4zq3l"
],
B1q35kw: "ff6932p",
Gp14am: [
"fg4zq3l",
"fa2okxs"
],
Bi91k9c: "fx9teim",
Jwef8y: "f1uqaxdt"
},
highContrastSelected: {
ycbfsm: "fkc42ay",
Bsw6fvg: "f1rirnrt",
Bbusuzp: "f1lkg8j3",
xgfqdd: "f1nkj0oa",
Bmmdzwq: "fey3rwa",
zkpvhj: [
"f5jhx11",
"fff9uym"
],
B20bydw: "fm7n0jy",
Bwwwggl: [
"fff9uym",
"f5jhx11"
]
},
highContrastInteractive: {
h1vhog: "fpfvv3l",
kslmdy: "f1oamsm6",
Baaf6ca: "f1il21bs",
x9zz3d: "fnn5dk0",
Bmmdzwq: "fey3rwa",
zkpvhj: [
"f5jhx11",
"fff9uym"
],
B20bydw: "fm7n0jy",
Bwwwggl: [
"fff9uym",
"f5jhx11"
]
},
select: {
qhf8xq: "f1euv43f",
Bhzewxz: "fqclxi7",
j35jbq: [
"fiv86kb",
"f36uhnt"
],
Bj3rh1h: "f19g0ac"
},
hiddenCheckbox: {
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
a9b677: "frkrog8",
Bqenvij: "f1mpe4l3",
qhf8xq: "f1euv43f",
Bh84pgu: "fmf1zke",
Bgl5zvf: "f1wch0ki",
Huce71: "fz5stix"
}
}, {
f: [
".ftqa4ok:focus{outline-style:none;}"
],
i: [
".f2hkw1w:focus-visible{outline-style:none;}"
],
d: [
".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
[
".fpqizxz[data-fui-focus-visible]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
[
".fnd8nzh[data-fui-focus-visible]::after{border-radius:var(--fui-Card--border-radius);}",
{
p: -1
}
],
".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;}",
".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}",
".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}",
".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}",
".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}",
".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}",
[
".f1i978nd[data-fui-focus-within]:focus-within::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
[
".f1nh8hsq[data-fui-focus-within]:focus-within::after{border-radius:var(--fui-Card--border-radius);}",
{
p: -1
}
],
".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{flex-direction:row;}",
".f122n59{align-items:center;}",
".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}",
".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}",
".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}",
".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}",
".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}",
".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}",
".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}",
".f1vx9l62{flex-direction:column;}",
".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}",
".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}",
".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}",
".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}",
".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}",
".f1pi9uxy{--fui-Card--size:8px;}",
".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}",
".frsmuga{--fui-Card--size:12px;}",
".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}",
".f1qua4xo{--fui-Card--size:16px;}",
".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}",
".f1epqm3e .fui-Text{color:currentColor;}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f1whvlc6{box-shadow:var(--shadow4);}",
".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}",
".fpgykix::after{border-right-color:var(--colorTransparentStroke);}",
".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}",
".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}",
".f1k6fduh{cursor:pointer;}",
".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}",
".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}",
".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}",
".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}",
".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}",
".f1dmdbja{background-color:var(--colorNeutralBackground2);}",
".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".f1couhl3{box-shadow:none;}",
".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}",
".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}",
".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}",
".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}",
".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}",
".fhovq9v{background-color:var(--colorSubtleBackground);}",
".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
".f1euv43f{position:absolute;}",
".fqclxi7{top:4px;}",
".fiv86kb{right:4px;}",
".f36uhnt{left:4px;}",
".f19g0ac{z-index:1;}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
".frkrog8{width:1px;}",
".f1mpe4l3{height:1px;}",
".fmf1zke{clip:rect(0 0 0 0);}",
".f1wch0ki{clip-path:inset(50%);}",
".fz5stix{white-space:nowrap;}"
],
m: [
[
"@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.flujwa2[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1k55ka9[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16pcs8n[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}.fgclinu[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fycbxed[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1nkj0oa .fui-CardPreview,.f1nkj0oa .fui-CardFooter{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fey3rwa::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fpfvv3l:hover,.fpfvv3l :active{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1oamsm6:hover,.f1oamsm6 :active{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1il21bs:hover,.f1il21bs :active{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :active .fui-CardFooter{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
]
],
h: [
".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
".f1m145df:hover{box-shadow:var(--shadow8);}",
".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}",
".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}",
".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}",
".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}",
".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}",
".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}",
".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}",
".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}",
".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}",
".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}",
".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}",
".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"
],
a: [
".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}",
".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}",
".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}",
".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"
]
});
const useCardStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useCardResetStyles();
const styles = useCardStyles();
const orientationMap = {
horizontal: styles.orientationHorizontal,
vertical: styles.orientationVertical
};
const sizeMap = {
small: styles.sizeSmall,
medium: styles.sizeMedium,
large: styles.sizeLarge
};
const appearanceMap = {
filled: styles.filled,
'filled-alternative': styles.filledAlternative,
outline: styles.outline,
subtle: styles.subtle
};
const selectedMap = {
filled: styles.filledInteractiveSelected,
'filled-alternative': styles.filledAlternativeInteractiveSelected,
outline: styles.outlineInteractiveSelected,
subtle: styles.subtleInteractiveSelected
};
const interactiveMap = {
filled: styles.filledInteractive,
'filled-alternative': styles.filledAlternativeInteractive,
outline: styles.outlineInteractive,
subtle: styles.subtleInteractive
};
const isSelectableOrInteractive = state.interactive || state.selectable;
const focusedClassName = _react.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, _react1.mergeClasses)(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
if (state.floatingAction) {
state.floatingAction.className = (0, _react1.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
}
if (state.checkbox) {
state.checkbox.className = (0, _react1.mergeClasses)(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CardFooter", {
enumerable: true,
get: function() {
return CardFooter;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCardFooter = require("./useCardFooter");
const _renderCardFooter = require("./renderCardFooter");
const _useCardFooterStylesstyles = require("./useCardFooterStyles.styles");
const CardFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardFooter.useCardFooter_unstable)(props, ref);
(0, _useCardFooterStylesstyles.useCardFooterStyles_unstable)(state);
return (0, _renderCardFooter.renderCardFooter_unstable)(state);
});
CardFooter.displayName = 'CardFooter';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n const state = useCardFooter_unstable(props, ref);\n\n useCardFooterStyles_unstable(state);\n return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["CardFooter","React","forwardRef","props","ref","state","useCardFooter_unstable","useCardFooterStyles_unstable","renderCardFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;+BACgB;kCACG;2CACG;AAOtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering CardFooter.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardFooter component.\n */\nexport type CardFooterSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Container that renders on the far end of the footer, used for action buttons.\n */\n action?: Slot<'div'>;\n};\n\n/**\n * CardFooter component props.\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardFooter: function() {
return _CardFooter.CardFooter;
},
cardFooterClassNames: function() {
return _useCardFooterStylesstyles.cardFooterClassNames;
},
renderCardFooter_unstable: function() {
return _renderCardFooter.renderCardFooter_unstable;
},
useCardFooterStyles_unstable: function() {
return _useCardFooterStylesstyles.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _useCardFooter.useCardFooter_unstable;
}
});
const _CardFooter = require("./CardFooter");
const _renderCardFooter = require("./renderCardFooter");
const _useCardFooter = require("./useCardFooter");
const _useCardFooterStylesstyles = require("./useCardFooterStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIVC,oBAAoB;eAApBA,+CAAoB;;IAFpBC,yBAAyB;eAAzBA,2CAAyB;;IAEHC,4BAA4B;eAA5BA,uDAA4B;;IADlDC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC4B"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCardFooter_unstable", {
enumerable: true,
get: function() {
return renderCardFooter_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCardFooter_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<CardFooterSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["renderCardFooter_unstable","state","assertSlots","_jsxs","root","children","action","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMK,MAAM,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,MAAM,EAAA,CAAA;;;AAGpC"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardFooter_unstable", {
enumerable: true,
get: function() {
return useCardFooter_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useCardFooter_unstable = (props, ref)=>{
const { action } = props;
return {
components: {
root: 'div',
action: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
...props
}), {
elementType: 'div'
}),
action: _reactutilities.slot.optional(action, {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } 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: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["useCardFooter_unstable","props","ref","action","components","root","slot","always","getIntrinsicElementProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCACwB;AAYxC,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FN,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN,QAAQG,oBAAAA,CAAKI,QAAQ,CAACP,QAAQ;YAAEM,aAAa;QAAM;IACrD;AACF"}
@@ -0,0 +1,104 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardFooterClassNames: function() {
return cardFooterClassNames;
},
useCardFooterStyles_unstable: function() {
return useCardFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const cardFooterClassNames = {
root: 'fui-CardFooter',
action: 'fui-CardFooter__action'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "fsbu5mz"
},
action: {
Frg6f3: [
"fcgxt0o",
"f1ujusj6"
],
B7frvx2: "f1ndzpm5",
B06c7xf: [
"f1fkeggc",
"f1u45u6i"
],
B8uq84v: "f16eyofs",
snkdo8: [
"f1u45u6i",
"f1fkeggc"
],
Bpf22ct: "f1wkmkig",
apjfyd: "f18alut9"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
[
".fsbu5mz{gap:12px;}",
{
p: -1
}
],
".fcgxt0o{margin-left:auto;}",
".f1ujusj6{margin-right:auto;}"
],
m: [
[
"@media (forced-colors: active){.f1ndzpm5 .fui-Button,.f1ndzpm5 .fui-Link{border-top-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1fkeggc .fui-Button,.f1fkeggc .fui-Link{border-right-color:currentColor;}.f1u45u6i .fui-Button,.f1u45u6i .fui-Link{border-left-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16eyofs .fui-Button,.f16eyofs .fui-Link{border-bottom-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wkmkig .fui-Button,.f1wkmkig .fui-Link{color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f18alut9 .fui-Button,.f18alut9 .fui-Link{outline-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useCardFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(cardFooterClassNames.root, styles.root, state.root.className);
if (state.action) {
state.action.className = (0, _react.mergeClasses)(cardFooterClassNames.action, styles.action, state.action.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"names":["cardFooterClassNames","useCardFooterStyles_unstable","root","action","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","B7frvx2","B06c7xf","B8uq84v","snkdo8","Bpf22ct","apjfyd","d","p","m","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGiBA,oBAAoB;eAApBA;;IAyBAC,4BAA4B;eAA5BA;;;uBA5BoC;AAG1C,MAAMD,uBAAuB;IACpCE,MAAM;IACNC,QAAQ;AACZ;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAP,QAAA;QAAAQ,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAqBP,MAAMnB,+BAAgCoB,CAAAA;IAC7C;IACA,MAAMC,SAASlB;IACfiB,MAAMnB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,qBAAqBE,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAChG,IAAIF,MAAMlB,MAAM,EAAE;QACdkB,MAAMlB,MAAM,CAACoB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,qBAAqBG,MAAM,EAAEmB,OAAOnB,MAAM,EAAEkB,MAAMlB,MAAM,CAACoB,SAAS;IAC5G;IACA,OAAOF;AACX"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CardHeader", {
enumerable: true,
get: function() {
return CardHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCardHeader = require("./useCardHeader");
const _renderCardHeader = require("./renderCardHeader");
const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
const CardHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardHeader.useCardHeader_unstable)(props, ref);
(0, _useCardHeaderStylesstyles.useCardHeaderStyles_unstable)(state);
return (0, _renderCardHeader.renderCardHeader_unstable)(state);
});
CardHeader.displayName = 'CardHeader';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["CardHeader","React","forwardRef","props","ref","state","useCardHeader_unstable","useCardHeaderStyles_unstable","renderCardHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;+BACgB;kCACG;2CACG;AAOtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering CardHeader.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/CardHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardHeader component.\n */\nexport type CardHeaderSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Element used to render an image or avatar related to the card.\n */\n image: Slot<'div', 'img'>;\n\n /**\n * Element used to render the main header title.\n */\n header: Slot<'div'>;\n\n /**\n * Element used to render short descriptions related to the title.\n */\n description: Slot<'div'>;\n\n /**\n * Container that renders on the far end of the footer, used for action buttons.\n */\n action?: Slot<'div'>;\n};\n\n/**\n * CardHeader component props.\n */\nexport type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;\n\n/**\n * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardHeader: function() {
return _CardHeader.CardHeader;
},
cardHeaderCSSVars: function() {
return _useCardHeaderStylesstyles.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _useCardHeaderStylesstyles.cardHeaderClassNames;
},
renderCardHeader_unstable: function() {
return _renderCardHeader.renderCardHeader_unstable;
},
useCardHeaderStyles_unstable: function() {
return _useCardHeaderStylesstyles.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _useCardHeader.useCardHeader_unstable;
}
});
const _CardHeader = require("./CardHeader");
const _renderCardHeader = require("./renderCardHeader");
const _useCardHeader = require("./useCardHeader");
const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIVC,iBAAiB;eAAjBA,4CAAiB;;IAAEC,oBAAoB;eAApBA,+CAAoB;;IAFvCC,yBAAyB;eAAzBA,2CAAyB;;IAEgBC,4BAA4B;eAA5BA,uDAA4B;;IADrEC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC+C"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCardHeader_unstable", {
enumerable: true,
get: function() {
return renderCardHeader_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCardHeader_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.image && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.image, {}),
state.header && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.header, {}),
state.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.description, {}),
state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<CardHeaderSlots>(state);\n\n return (\n <state.root>\n {state.image && <state.image />}\n {state.header && <state.header />}\n {state.description && <state.description />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["renderCardHeader_unstable","state","assertSlots","_jsxs","root","image","_jsx","header","description","action"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,KAAK,EAAA,CAAA;YAC3BJ,MAAMM,MAAM,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,MAAM,EAAA,CAAA;YAC7BN,MAAMO,WAAW,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,MAAM,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,MAAM,EAAA,CAAA;;;AAGpC"}
@@ -0,0 +1,97 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardHeader_unstable", {
enumerable: true,
get: function() {
return useCardHeader_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _CardContext = require("../Card/CardContext");
const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
/**
* Finds the first child of CardHeader with an id prop.
*
* @param header - the header prop of CardHeader
*/ function getChildWithId(header) {
function isReactElementWithIdProp(element) {
return /*#__PURE__*/ _react.isValidElement(element) && Boolean(element.props.id);
}
return _react.Children.toArray(header).find(isReactElementWithIdProp);
}
/**
* Returns the id to use for the CardHeader root element.
*
* @param headerId - the id prop of the CardHeader component
* @param childWithId - the first child of the CardHeader component with an id prop
* @param generatedId - a generated id
*
* @returns the id to use for the CardHeader root element
*/ function getReferenceId(headerId, childWithId, generatedId) {
if (headerId) {
return headerId;
}
if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
return childWithId.props.id;
}
return generatedId;
}
const useCardHeader_unstable = (props, ref)=>{
const { image, header, description, action } = props;
const { selectableA11yProps: { referenceId, setReferenceId } } = (0, _CardContext.useCardContext_unstable)();
const headerRef = _react.useRef(null);
const hasChildId = _react.useRef(false);
const generatedId = (0, _reactutilities.useId)(_useCardHeaderStylesstyles.cardHeaderClassNames.header, referenceId);
const headerSlot = _reactutilities.slot.optional(header, {
renderByDefault: true,
defaultProps: {
ref: headerRef,
id: !hasChildId.current ? referenceId : undefined
},
elementType: 'div'
});
_react.useEffect(()=>{
var _headerRef_current;
const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
const childWithId = getChildWithId(headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.children);
hasChildId.current = Boolean(childWithId);
setReferenceId(getReferenceId(headerId, childWithId, generatedId));
}, [
generatedId,
header,
headerSlot,
setReferenceId
]);
return {
components: {
root: 'div',
image: 'div',
header: 'div',
description: 'div',
action: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
...props
}), {
elementType: 'div'
}),
image: _reactutilities.slot.optional(image, {
elementType: 'div'
}),
header: headerSlot,
description: _reactutilities.slot.optional(description, {
elementType: 'div'
}),
action: _reactutilities.slot.optional(action, {
elementType: 'div'
})
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,184 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardHeaderCSSVars: function() {
return cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return cardHeaderClassNames;
},
useCardHeaderStyles_unstable: function() {
return useCardHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const cardHeaderClassNames = {
root: 'fui-CardHeader',
image: 'fui-CardHeader__image',
header: 'fui-CardHeader__header',
description: 'fui-CardHeader__description',
action: 'fui-CardHeader__action'
};
const cardHeaderCSSVars = {
cardHeaderGapVar: '--fui-CardHeader--gap'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bkc6ea2: "fkufhic",
Bt984gj: "f122n59"
},
image: {
mc9l5x: "ftuwxu6",
t21cq0: [
"fql5097",
"f6yss9k"
]
},
header: {
mc9l5x: "f22iagw"
},
description: {
mc9l5x: "f22iagw"
},
action: {
Frg6f3: [
"f6yss9k",
"fql5097"
],
B7frvx2: "f1ndzpm5",
B06c7xf: [
"f1fkeggc",
"f1u45u6i"
],
B8uq84v: "f16eyofs",
snkdo8: [
"f1u45u6i",
"f1fkeggc"
],
Bpf22ct: "f1wkmkig",
apjfyd: "f18alut9"
}
}, {
d: [
".fkufhic{--fui-CardHeader--gap:12px;}",
".f122n59{align-items:center;}",
".ftuwxu6{display:inline-flex;}",
".fql5097{margin-right:var(--fui-CardHeader--gap);}",
".f6yss9k{margin-left:var(--fui-CardHeader--gap);}",
".f22iagw{display:flex;}"
],
m: [
[
"@media (forced-colors: active){.f1ndzpm5 .fui-Button,.f1ndzpm5 .fui-Link{border-top-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1fkeggc .fui-Button,.f1fkeggc .fui-Link{border-right-color:currentColor;}.f1u45u6i .fui-Button,.f1u45u6i .fui-Link{border-left-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16eyofs .fui-Button,.f16eyofs .fui-Link{border-bottom-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wkmkig .fui-Button,.f1wkmkig .fui-Link{color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f18alut9 .fui-Button,.f18alut9 .fui-Link{outline-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useStylesGrid = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f13qh94s",
t4k1zu: "f8a668j"
},
image: {
Br312pm: "fwpfdsa",
Ijaq50: "fldnz9j"
},
header: {
Br312pm: "fd46tj4",
Ijaq50: "f16hsg94"
},
description: {
Br312pm: "fd46tj4",
Ijaq50: "faunodf"
},
action: {
Br312pm: "fis13di",
Ijaq50: "fldnz9j"
}
}, {
d: [
".f13qh94s{display:grid;}",
".f8a668j{grid-auto-columns:min-content 1fr min-content;}",
".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;}"
]
});
const useStylesFlex = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw"
},
header: {
Bh6795r: "fqerorx"
},
image: {},
description: {},
action: {}
}, {
d: [
".f22iagw{display:flex;}",
".fqerorx{flex-grow:1;}"
]
});
const useCardHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const stylesGrid = useStylesGrid();
const stylesFlex = useStylesFlex();
const boxModelStyles = state.description ? stylesGrid : stylesFlex;
const getSlotStyles = (slotName)=>{
var _state_slotName;
return (0, _react.mergeClasses)(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
};
state.root.className = getSlotStyles('root');
if (state.image) {
state.image.className = getSlotStyles('image');
}
if (state.header) {
state.header.className = getSlotStyles('header');
}
if (state.description) {
state.description.className = getSlotStyles('description');
}
if (state.action) {
state.action.className = getSlotStyles('action');
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CardPreview", {
enumerable: true,
get: function() {
return CardPreview;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCardPreview = require("./useCardPreview");
const _renderCardPreview = require("./renderCardPreview");
const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
const CardPreview = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardPreview.useCardPreview_unstable)(props, ref);
(0, _useCardPreviewStylesstyles.useCardPreviewStyles_unstable)(state);
return (0, _renderCardPreview.renderCardPreview_unstable)(state);
});
CardPreview.displayName = 'CardPreview';
@@ -0,0 +1 @@
{"version":3,"sources":["../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.styles';\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"],"names":["CardPreview","React","forwardRef","props","ref","state","useCardPreview_unstable","useCardPreviewStyles_unstable","renderCardPreview_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;gCACiB;mCACG;4CACG;AAOvC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9B,OAAOG,IAAAA,6CAAAA,EAA2BH;AACpC;AAEAL,YAAYS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering CardPreview.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/CardPreview.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the Card component.\n */\nexport type CardPreviewSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Container that holds a logo related to the image preview provided.\n */\n logo?: Slot<'div', 'img'>;\n};\n\n/**\n * CardPreview component props.\n */\nexport type CardPreviewProps = ComponentProps<CardPreviewSlots>;\n\n/**\n * State used in rendering CardPreview.\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardPreview: function() {
return _CardPreview.CardPreview;
},
cardPreviewClassNames: function() {
return _useCardPreviewStylesstyles.cardPreviewClassNames;
},
renderCardPreview_unstable: function() {
return _renderCardPreview.renderCardPreview_unstable;
},
useCardPreviewStyles_unstable: function() {
return _useCardPreviewStylesstyles.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _useCardPreview.useCardPreview_unstable;
}
});
const _CardPreview = require("./CardPreview");
const _renderCardPreview = require("./renderCardPreview");
const _useCardPreview = require("./useCardPreview");
const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/index.ts"],"sourcesContent":["export { CardPreview } from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview.types';\nexport { renderCardPreview_unstable } from './renderCardPreview';\nexport { useCardPreview_unstable } from './useCardPreview';\nexport { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAIXC,qBAAqB;eAArBA,iDAAqB;;IAFrBC,0BAA0B;eAA1BA,6CAA0B;;IAEHC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BAHJ;mCAEe;gCACH;4CAC6B"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCardPreview_unstable", {
enumerable: true,
get: function() {
return renderCardPreview_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCardPreview_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.logo && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.logo, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<CardPreviewSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.logo && <state.logo />}\n </state.root>\n );\n};\n"],"names":["renderCardPreview_unstable","state","assertSlots","_jsxs","root","children","logo","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;;;AAGhC"}
@@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardPreview_unstable", {
enumerable: true,
get: function() {
return useCardPreview_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _CardContext = require("../Card/CardContext");
const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
const useCardPreview_unstable = (props, ref)=>{
const { logo } = props;
const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = (0, _CardContext.useCardContext_unstable)();
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
const previewRef = (0, _reactutilities.useMergedRefs)(ref, _react.useRef(null));
_react.useEffect(()=>{
if (referenceLabel && referenceId) {
return;
}
if (previewRef.current && previewRef.current.parentNode) {
const img = previewRef.current.parentNode.querySelector(`.${_useCardPreviewStylesstyles.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) {
setReferenceLabel(img.alt);
} else if (ariaLabel) {
setReferenceLabel(ariaLabel);
}
}
}
}, [
setReferenceLabel,
referenceLabel,
previewRef,
referenceId,
setReferenceId
]);
return {
components: {
root: 'div',
logo: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: previewRef,
...props
}), {
elementType: 'div'
}),
logo: _reactutilities.slot.optional(logo, {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\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 // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, 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: slot.always(\n getIntrinsicElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","useCardContext_unstable","previewRef","useMergedRefs","React","useRef","useEffect","current","parentNode","img","querySelector","cardPreviewClassNames","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","slot","always","getIntrinsicElementProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACuC;6BAEtB;4CACF;AAW/B,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAM,EACJG,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,GAAGC,IAAAA,oCAAAA;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMC,aAAaC,IAAAA,6BAAAA,EAAcT,KAAkCU,OAAMC,MAAM,CAAiB;IAEhGD,OAAME,SAAS,CAAC;QACd,IAAIT,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAII,WAAWK,OAAO,IAAIL,WAAWK,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAMP,WAAWK,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEC,iDAAAA,CAAsBC,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIH,KAAK;gBACP,MAAMI,YAAYJ,IAAIK,YAAY,CAAC;gBACnC,MAAMC,kBAAkBN,IAAIK,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBf,eAAee;gBACjB,OAAO,IAAIN,IAAIO,GAAG,EAAE;oBAClBjB,kBAAkBU,IAAIO,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBd,kBAAkBc;gBACpB;YACF;QACF;IACF,GAAG;QAACd;QAAmBF;QAAgBK;QAAYJ;QAAaE;KAAe;IAE/E,OAAO;QACLiB,YAAY;YACVL,MAAM;YACNjB,MAAM;QACR;QAEAiB,MAAMM,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B1B,KAAKQ;YACL,GAAGT,KAAK;QACV,IACA;YAAE4B,aAAa;QAAM;QAEvB1B,MAAMuB,oBAAAA,CAAKI,QAAQ,CAAC3B,MAAM;YAAE0B,aAAa;QAAM;IACjD;AACF"}
@@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardPreviewClassNames: function() {
return cardPreviewClassNames;
},
useCardPreviewStyles_unstable: function() {
return useCardPreviewStyles_unstable;
}
});
const _react = require("@griffel/react");
const cardPreviewClassNames = {
root: 'fui-CardPreview',
logo: 'fui-CardPreview__logo'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
qhf8xq: "f10pi13n",
Byfpedg: "fgourly",
Btj6oj6: "f1vui7lx",
B1m4t4s: "fda5zwx"
},
logo: {
qhf8xq: "f1euv43f",
B5kzvoi: "f1gcvs1y",
oyh7mz: [
"f1t6tvco",
"ffrfxm3"
],
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f10pi13n{position:relative;}",
".fgourly>:not(.fui-CardPreview__logo){display:block;}",
".f1vui7lx>:not(.fui-CardPreview__logo){height:100%;}",
".fda5zwx>:not(.fui-CardPreview__logo){width:100%;}",
".f1euv43f{position:absolute;}",
".f1gcvs1y{bottom:12px;}",
".f1t6tvco{left:12px;}",
".ffrfxm3{right:12px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
]
});
const useCardPreviewStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(cardPreviewClassNames.root, styles.root, state.root.className);
if (state.logo) {
state.logo.className = (0, _react.mergeClasses)(cardPreviewClassNames.logo, styles.logo, state.logo.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n return state;\n};\n"],"names":["cardPreviewClassNames","useCardPreviewStyles_unstable","root","logo","useStyles","__styles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGiBA,qBAAqB;eAArBA;;IAuBAC,6BAA6B;eAA7BA;;;uBA1BwB;AAG9B,MAAMD,wBAAwB;IACrCE,MAAM;IACNC,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAN,MAAA;QAAAG,QAAA;QAAAI,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAmBP,MAAMb,gCAAiCc,CAAAA;IAC9C;IACA,MAAMC,SAASZ;IACfW,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,sBAAsBE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACjG,IAAIF,MAAMZ,IAAI,EAAE;QACZY,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,sBAAsBG,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG;IACA,OAAOF;AACX"}
+88
View File
@@ -0,0 +1,88 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Card: function() {
return _Card.Card;
},
CardFooter: function() {
return _CardFooter.CardFooter;
},
CardHeader: function() {
return _CardHeader.CardHeader;
},
CardPreview: function() {
return _CardPreview.CardPreview;
},
CardProvider: function() {
return _Card.CardProvider;
},
cardCSSVars: function() {
return _Card.cardCSSVars;
},
cardClassNames: function() {
return _Card.cardClassNames;
},
cardFooterClassNames: function() {
return _CardFooter.cardFooterClassNames;
},
cardHeaderCSSVars: function() {
return _CardHeader.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _CardHeader.cardHeaderClassNames;
},
cardPreviewClassNames: function() {
return _CardPreview.cardPreviewClassNames;
},
renderCardFooter_unstable: function() {
return _CardFooter.renderCardFooter_unstable;
},
renderCardHeader_unstable: function() {
return _CardHeader.renderCardHeader_unstable;
},
renderCardPreview_unstable: function() {
return _CardPreview.renderCardPreview_unstable;
},
renderCard_unstable: function() {
return _Card.renderCard_unstable;
},
useCardContext_unstable: function() {
return _Card.useCardContext_unstable;
},
useCardFooterStyles_unstable: function() {
return _CardFooter.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _CardFooter.useCardFooter_unstable;
},
useCardHeaderStyles_unstable: function() {
return _CardHeader.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _CardHeader.useCardHeader_unstable;
},
useCardPreviewStyles_unstable: function() {
return _CardPreview.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _CardPreview.useCardPreview_unstable;
},
useCardStyles_unstable: function() {
return _Card.useCardStyles_unstable;
},
useCard_unstable: function() {
return _Card.useCard_unstable;
}
});
const _Card = require("./Card");
const _CardFooter = require("./CardFooter");
const _CardHeader = require("./CardHeader");
const _CardPreview = require("./CardPreview");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardOnSelectionChangeEvent } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n cardHeaderCSSVars,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"names":["Card","CardFooter","CardHeader","CardPreview","CardProvider","cardCSSVars","cardClassNames","cardFooterClassNames","cardHeaderCSSVars","cardHeaderClassNames","cardPreviewClassNames","renderCardFooter_unstable","renderCardHeader_unstable","renderCardPreview_unstable","renderCard_unstable","useCardContext_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,IAAI;eAAJA,UAAI;;IASJC,UAAU;eAAVA,sBAAU;;IAQVC,UAAU;eAAVA,sBAAU;;IASVC,WAAW;eAAXA,wBAAW;;IAOJC,YAAY;eAAZA,kBAAY;;IA/BnBC,WAAW;eAAXA,iBAAW;;IADXC,cAAc;eAAdA,oBAAc;;IASdC,oBAAoB;eAApBA,gCAAoB;;IASpBC,iBAAiB;eAAjBA,6BAAiB;;IADjBC,oBAAoB;eAApBA,gCAAoB;;IASpBC,qBAAqB;eAArBA,kCAAqB;;IAhBrBC,yBAAyB;eAAzBA,qCAAyB;;IASzBC,yBAAyB;eAAzBA,qCAAyB;;IAQzBC,0BAA0B;eAA1BA,uCAA0B;;IAzB1BC,mBAAmB;eAAnBA,yBAAmB;;IA8BEC,uBAAuB;eAAvBA,6BAAuB;;IArB5CC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;IAQtBC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;IAOtBC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IA1BvBC,sBAAsB;eAAtBA,4BAAsB;;IACtBC,gBAAgB;eAAhBA,sBAAgB;;;sBACX;4BAQA;4BASA;6BAQA"}