/******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./node_modules/@emotion/hash/dist/emotion-hash.esm.js": /*!*************************************************************!*\ !*** ./node_modules/@emotion/hash/dist/emotion-hash.esm.js ***! \*************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (/* binding */ murmur2) /* harmony export */ }); /* eslint-disable */ // Inspired by https://github.com/garycourt/murmurhash-js // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86 function murmur2(str) { // 'm' and 'r' are mixing constants generated offline. // They're not really 'magic', they just happen to work well. // const m = 0x5bd1e995; // const r = 24; // Initialize the hash var h = 0; // Mix 4 bytes at a time into the hash var k, i = 0, len = str.length; for (; len >= 4; ++i, len -= 4) { k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24; k = /* Math.imul(k, m): */ (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16); k ^= /* k >>> r: */ k >>> 24; h = /* Math.imul(k, m): */ (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ /* Math.imul(h, m): */ (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); } // Handle the last few bytes of the input array switch (len) { case 3: h ^= (str.charCodeAt(i + 2) & 0xff) << 16; case 2: h ^= (str.charCodeAt(i + 1) & 0xff) << 8; case 1: h ^= str.charCodeAt(i) & 0xff; h = /* Math.imul(h, m): */ (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); } // Do a few final mixes of the hash to ensure the last few // bytes are well-incorporated. h ^= h >>> 13; h = /* Math.imul(h, m): */ (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); return ((h ^ h >>> 15) >>> 0).toString(36); } /***/ }), /***/ "./node_modules/@fabric-msft/fabric-react/dist/index.js": /*!**************************************************************!*\ !*** ./node_modules/@fabric-msft/fabric-react/dist/index.js ***! \**************************************************************/ /***/ (function(__unused_webpack_module, exports, __webpack_require__) { (function (global, factory) { true ? factory(exports, __webpack_require__(/*! @fabric-msft/fabric-web */ "./node_modules/@fabric-msft/fabric-web/dist/index.min.js"), __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/index.debug.js"), __webpack_require__(/*! react */ "./node_modules/react/index.js"), __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js")) : 0; })(this, (function (exports, fabricWeb, fastElement, React) { 'use strict'; function _interopNamespaceDefault(e) { var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n.default = e; return Object.freeze(n); } var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React); const reservedReactProperties = new Set(["children", "localName", "ref", "style", "className"]); const emptyProps = Object.freeze(Object.create(null)); const DEFAULT_CACHE_NAME = "_default"; // This will be a two levels cache Map> // to distinguish components of same type but different tag name. // Default name: '_default' const wrappersCache = new Map(); // There are 2 kinds of refs and there's no built in React API to set one. function setRef(ref, value) { if (typeof ref === "function") { ref(value); } else { ref.current = value; } } function getTagName(type, config) { if (!config.name) { /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ const definition = fastElement.FASTElementDefinition.getByType(type); if (definition) { return definition.name; } else { throw new Error("React wrappers must wrap a FASTElement or be configured with a name."); } } return config.name; } function getElementEvents(config) { return config.events || (config.events = {}); } function keyIsValid(type, config, name) { if (reservedReactProperties.has(name)) { console.warn(`${getTagName(type, config)} contains property ${name} which is a React ` + `reserved property. It will be used by React and not set on ` + `the element.`); return false; } return true; } function getElementKeys(type, config) { if (!config.keys) { if (config.properties) { config.keys = new Set(config.properties.concat(Object.keys(getElementEvents(config)))); } else { const keys = new Set(Object.keys(getElementEvents(config))); const accessors = fastElement.Observable.getAccessors(type.prototype); if (accessors.length > 0) { for (const a of accessors) { if (keyIsValid(type, config, a.name)) { keys.add(a.name); } } } else { for (const p in type.prototype) { if (!(p in HTMLElement.prototype) && keyIsValid(type, config, p)) { keys.add(p); } } } config.keys = keys; } } return config.keys; } /** * @param React - The React module, typically imported from the `react` npm * package * @param registry - The custom elements registry to register components in if wrapped by definition. * @public */ function reactWrapper(React) { let registry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : customElements; function wrap(type) { let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (type instanceof fastElement.FASTElementDefinition) { type.define(registry); type = type.type; } const name = getTagName(type, config); const cachedCandidates = wrappersCache.get(type); if (cachedCandidates) { const cachedWrapper = cachedCandidates.get(name !== null && name !== void 0 ? name : DEFAULT_CACHE_NAME); if (cachedWrapper) { return cachedWrapper; } } class ReactComponent extends React.Component { constructor() { super(...arguments); this._element = null; } _updateElement(oldProps) { const element = this._element; if (element === null) { return; } const currentProps = this.props; const previousProps = oldProps || emptyProps; const events = getElementEvents(config); for (const key in this._elementProps) { const newValue = currentProps[key]; const event = events[key]; if (event === undefined) { element[key] = newValue; } else { const oldValue = previousProps[key]; if (newValue === oldValue) { continue; } if (oldValue !== undefined) { element.removeEventListener(event, oldValue); } if (newValue !== undefined) { element.addEventListener(event, newValue); } } } } componentDidMount() { this._updateElement(); } componentDidUpdate(old) { this._updateElement(old); } render() { // Since refs only get fulfilled once, pass a new one if the user's // ref changed. This allows refs to be fulfilled as expected, going from // having a value to null. const userRef = this.props.__forwardedRef; if (this._ref === undefined || this._userRef !== userRef) { this._ref = value => { if (this._element === null) { this._element = value; } if (userRef !== null) { setRef(userRef, value); } this._userRef = userRef; }; } // Filter class properties and pass the remaining attributes to React. // This allows attributes to use framework rules // for setting attributes and render correctly under SSR. const newReactProps = { ref: this._ref }; const newElementProps = this._elementProps = {}; const elementKeys = getElementKeys(type, config); const currentProps = this.props; for (const k in currentProps) { const v = currentProps[k]; if (elementKeys.has(k)) { newElementProps[k] = v; } else { // React does *not* handle `className` for custom elements so // coerce it to `class` so it's handled correctly. newReactProps[k === "className" ? "class" : k] = v; } } return React.createElement(name, newReactProps); } } const reactComponent = React.forwardRef((props, ref) => React.createElement(ReactComponent, Object.assign(Object.assign({}, props), { __forwardedRef: ref }), props === null || props === void 0 ? void 0 : props.children)); reactComponent.displayName = name; if (!wrappersCache.has(type)) { wrappersCache.set(type, new Map()); } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion wrappersCache.get(type).set(name !== null && name !== void 0 ? name : DEFAULT_CACHE_NAME, reactComponent); return reactComponent; } return wrap; } const DesignSystem = Object.freeze({ prefix: "fabric", shadowRootMode: "open", registry: customElements }); const CardWrapper = reactWrapper(React__namespace); const Card = CardWrapper(fabricWeb.Card, { name: `${DesignSystem.prefix}-card`, events: { onClick: "click", onInteractiveChanged: "interactiveChanged" } }); fabricWeb.CardDefinition.define(customElements); const CardFooterWrapper = reactWrapper(React__namespace); const CardFooter = CardFooterWrapper(fabricWeb.CardFooter, { name: `${DesignSystem.prefix}-card-footer` }); fabricWeb.CardFooterDefinition.define(customElements); const CardHeaderWrapper = reactWrapper(React__namespace); const CardHeader = CardHeaderWrapper(fabricWeb.CardHeader, { name: `${DesignSystem.prefix}-card-header` }); fabricWeb.CardHeaderDefinition.define(customElements); const CardPreviewWrapper = reactWrapper(React__namespace); const CardPreview = CardPreviewWrapper(fabricWeb.CardPreview, { name: `${DesignSystem.prefix}-card-preview` }); fabricWeb.CardPreviewDefinition.define(customElements); const FilterPillWrapper = reactWrapper(React__namespace); const FilterPill = FilterPillWrapper(fabricWeb.FilterPill, { name: `${DesignSystem.prefix}-filter-pill`, events: { onPressedChange: "pressedchange" } }); fabricWeb.FilterPillDefinition.define(customElements); const LoadingButtonWrapper = reactWrapper(React__namespace); const LoadingButton = LoadingButtonWrapper(fabricWeb.LoadingButton, { name: `${DesignSystem.prefix}-loading-button` }); fabricWeb.LoadingButtonDefinition.define(customElements); const MultiViewControllerWrapper = reactWrapper(React__namespace); const MultiViewController = MultiViewControllerWrapper(fabricWeb.MultiViewController, { name: `${DesignSystem.prefix}-multi-view-controller`, events: { onChange: "change" } }); fabricWeb.MultiViewControllerDefinition.define(customElements); const MultiViewGroupWrapper = reactWrapper(React__namespace); const MultiViewGroup = MultiViewGroupWrapper(fabricWeb.MultiViewGroup, { name: `${DesignSystem.prefix}-multi-view-group`, events: { onChange: "change" } }); fabricWeb.MultiViewGroupDefinition.define(customElements); const MultiViewWrapper = reactWrapper(React__namespace); const MultiView = MultiViewWrapper(fabricWeb.MultiView, { name: `${DesignSystem.prefix}-multi-view`, events: { onHiddenChange: "hiddenchanged" } }); fabricWeb.MultiViewDefinition.define(customElements); const PopoverWrapper = reactWrapper(React__namespace); const Popover = PopoverWrapper(fabricWeb.Popover, { name: `${DesignSystem.prefix}-popover`, events: { onHide: fabricWeb.PopoverEventNames.hide, onShow: fabricWeb.PopoverEventNames.show, onChange: fabricWeb.PopoverEventNames.toggle, onMouseEnter: fabricWeb.PopoverEventNames.mouseEnter, onMouseLeave: fabricWeb.PopoverEventNames.mouseLeave } }); fabricWeb.PopoverDefinition.define(DesignSystem.registry); const SvgIconWrapper = reactWrapper(React__namespace); SvgIconWrapper(fabricWeb.SvgIcon, { name: "fabric-svg-icon" }); if (!customElements.get("fabric-svg-icon")) { fabricWeb.SvgIconDefinition.define(customElements); } const TeachingBubbleWrapper = reactWrapper(React__namespace); const TeachingBubble = TeachingBubbleWrapper(fabricWeb.TeachingBubble, { name: `${DesignSystem.prefix}-teaching-bubble`, events: { onOpenChange: "openchange", onDismiss: "dismiss" } }); fabricWeb.TeachingBubbleDefinition.define(customElements); const TooltipWrapper = reactWrapper(React__namespace); const Tooltip = TooltipWrapper(fabricWeb.Tooltip, { name: `${DesignSystem.prefix}-tooltip`, events: {} }); fabricWeb.TooltipDefinition.define(customElements); const WizardPanelWrapper = reactWrapper(React__namespace); const WizardPanel = WizardPanelWrapper(fabricWeb.WizardPanel, { name: `${DesignSystem.prefix}-wizard-panel`, events: { onPanelChange: "panelChange" }, properties: ["active"] }); fabricWeb.WizardPanelDefinition.define(customElements); const WizardStepWrapper = reactWrapper(React__namespace); const WizardStep = WizardStepWrapper(fabricWeb.WizardStep, { name: `${DesignSystem.prefix}-wizard-step`, events: { onStepChange: "stepChange" } }); fabricWeb.WizardStepDefinition.define(customElements); const WizardWrapper = reactWrapper(React__namespace); const Wizard = WizardWrapper(fabricWeb.Wizard, { name: `${DesignSystem.prefix}-wizard`, events: { onWizardChange: "wizardchange", onWizardComplete: "wizardcomplete" } }); fabricWeb.WizardDefinition.define(customElements); /* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */const grey = { '2': '#050505', '4': '#0a0a0a', '6': '#0f0f0f', '8': '#141414', '10': '#1a1a1a', '12': '#1f1f1f', '14': '#242424', '16': '#292929', '18': '#2e2e2e', '20': '#333333', '22': '#383838', '24': '#3d3d3d', '26': '#424242', '28': '#474747', '30': '#4d4d4d', '32': '#525252', '34': '#575757', '36': '#5c5c5c', '38': '#616161', '40': '#666666', '42': '#6b6b6b', '44': '#707070', '46': '#757575', '48': '#7a7a7a', '50': '#808080', '52': '#858585', '54': '#8a8a8a', '56': '#8f8f8f', '58': '#949494', '60': '#999999', '62': '#9e9e9e', '64': '#a3a3a3', '66': '#a8a8a8', '68': '#adadad', '70': '#b3b3b3', '72': '#b8b8b8', '74': '#bdbdbd', '76': '#c2c2c2', '78': '#c7c7c7', '80': '#cccccc', '82': '#d1d1d1', '84': '#d6d6d6', '86': '#dbdbdb', '88': '#e0e0e0', '90': '#e6e6e6', '92': '#ebebeb', '94': '#f0f0f0', '96': '#f5f5f5', '98': '#fafafa' }; const whiteAlpha = { '5': 'rgba(255, 255, 255, 0.05)', '10': 'rgba(255, 255, 255, 0.1)', '20': 'rgba(255, 255, 255, 0.2)', '30': 'rgba(255, 255, 255, 0.3)', '40': 'rgba(255, 255, 255, 0.4)', '50': 'rgba(255, 255, 255, 0.5)', '60': 'rgba(255, 255, 255, 0.6)', '70': 'rgba(255, 255, 255, 0.7)', '80': 'rgba(255, 255, 255, 0.8)', '90': 'rgba(255, 255, 255, 0.9)' }; const blackAlpha = { '5': 'rgba(0, 0, 0, 0.05)', '10': 'rgba(0, 0, 0, 0.1)', '20': 'rgba(0, 0, 0, 0.2)', '30': 'rgba(0, 0, 0, 0.3)', '40': 'rgba(0, 0, 0, 0.4)', '50': 'rgba(0, 0, 0, 0.5)', '60': 'rgba(0, 0, 0, 0.6)', '70': 'rgba(0, 0, 0, 0.7)', '80': 'rgba(0, 0, 0, 0.8)', '90': 'rgba(0, 0, 0, 0.9)' }; const grey10Alpha = { '5': 'rgba(26, 26, 26, 0.05)', '10': 'rgba(26, 26, 26, 0.1)', '20': 'rgba(26, 26, 26, 0.2)', '30': 'rgba(26, 26, 26, 0.3)', '40': 'rgba(26, 26, 26, 0.4)', '50': 'rgba(26, 26, 26, 0.5)', '60': 'rgba(26, 26, 26, 0.6)', '70': 'rgba(26, 26, 26, 0.7)', '80': 'rgba(26, 26, 26, 0.8)', '90': 'rgba(26, 26, 26, 0.9)' }; const grey12Alpha = { '5': 'rgba(31, 31, 31, 0.05)', '10': 'rgba(31, 31, 31, 0.1)', '20': 'rgba(31, 31, 31, 0.2)', '30': 'rgba(31, 31, 31, 0.3)', '40': 'rgba(31, 31, 31, 0.4)', '50': 'rgba(31, 31, 31, 0.5)', '60': 'rgba(31, 31, 31, 0.6)', '70': 'rgba(31, 31, 31, 0.7)', '80': 'rgba(31, 31, 31, 0.8)', '90': 'rgba(31, 31, 31, 0.9)' }; const grey14Alpha = { '5': 'rgba(36, 36, 36, 0.05)', '10': 'rgba(36, 36, 36, 0.1)', '20': 'rgba(36, 36, 36, 0.2)', '30': 'rgba(36, 36, 36, 0.3)', '40': 'rgba(36, 36, 36, 0.4)', '50': 'rgba(36, 36, 36, 0.5)', '60': 'rgba(36, 36, 36, 0.6)', '70': 'rgba(36, 36, 36, 0.7)', '80': 'rgba(36, 36, 36, 0.8)', '90': 'rgba(36, 36, 36, 0.9)' }; const white = '#ffffff'; const black = '#000000'; const darkRed = { shade50: '#130204', shade40: '#230308', shade30: '#420610', shade20: '#590815', shade10: '#690a19', primary: '#750b1c', tint10: '#861b2c', tint20: '#962f3f', tint30: '#ac4f5e', tint40: '#d69ca5', tint50: '#e9c7cd', tint60: '#f9f0f2' }; const cranberry = { shade50: '#200205', shade40: '#3b0509', shade30: '#6e0811', shade20: '#960b18', shade10: '#b10e1c', primary: '#c50f1f', tint10: '#cc2635', tint20: '#d33f4c', tint30: '#dc626d', tint40: '#eeacb2', tint50: '#f6d1d5', tint60: '#fdf3f4' }; const red = { shade50: '#210809', shade40: '#3f1011', shade30: '#751d1f', shade20: '#9f282b', shade10: '#bc2f32', primary: '#d13438', tint10: '#d7494c', tint20: '#dc5e62', tint30: '#e37d80', tint40: '#f1bbbc', tint50: '#f8dadb', tint60: '#fdf6f6' }; const darkOrange = { shade50: '#230900', shade40: '#411200', shade30: '#7a2101', shade20: '#a62d01', shade10: '#c43501', primary: '#da3b01', tint10: '#de501c', tint20: '#e36537', tint30: '#e9835e', tint40: '#f4bfab', tint50: '#f9dcd1', tint60: '#fdf6f3' }; const pumpkin = { shade50: '#200d03', shade40: '#3d1805', shade30: '#712d09', shade20: '#9a3d0c', shade10: '#b6480e', primary: '#ca5010', tint10: '#d06228', tint20: '#d77440', tint30: '#df8e64', tint40: '#efc4ad', tint50: '#f7dfd2', tint60: '#fdf7f4' }; const orange = { shade50: '#271002', shade40: '#4a1e04', shade30: '#8a3707', shade20: '#bc4b09', shade10: '#de590b', primary: '#f7630c', tint10: '#f87528', tint20: '#f98845', tint30: '#faa06b', tint40: '#fdcfb4', tint50: '#fee5d7', tint60: '#fff9f5' }; const peach = { shade50: '#291600', shade40: '#4d2a00', shade30: '#8f4e00', shade20: '#c26a00', shade10: '#e67e00', primary: '#ff8c00', tint10: '#ff9a1f', tint20: '#ffa83d', tint30: '#ffba66', tint40: '#ffddb3', tint50: '#ffedd6', tint60: '#fffaf5' }; const marigold = { shade50: '#251a00', shade40: '#463100', shade30: '#835b00', shade20: '#b27c00', shade10: '#d39300', primary: '#eaa300', tint10: '#edad1c', tint20: '#efb839', tint30: '#f2c661', tint40: '#f9e2ae', tint50: '#fcefd3', tint60: '#fefbf4' }; const yellow = { shade50: '#282400', shade40: '#4c4400', shade30: '#817400', shade20: '#c0ad00', shade10: '#e4cc00', primary: '#fde300', tint10: '#fde61e', tint20: '#fdea3d', tint30: '#feee66', tint40: '#fef7b2', tint50: '#fffad6', tint60: '#fffef5' }; const gold = { shade50: '#1f1900', shade40: '#3a2f00', shade30: '#6c5700', shade20: '#937700', shade10: '#ae8c00', primary: '#c19c00', tint10: '#c8a718', tint20: '#d0b232', tint30: '#dac157', tint40: '#ecdfa5', tint50: '#f5eece', tint60: '#fdfbf2' }; const brass = { shade50: '#181202', shade40: '#2e2103', shade30: '#553e06', shade20: '#745408', shade10: '#89640a', primary: '#986f0b', tint10: '#a47d1e', tint20: '#b18c34', tint30: '#c1a256', tint40: '#e0cea2', tint50: '#efe4cb', tint60: '#fbf8f2' }; const brown = { shade50: '#170e07', shade40: '#2b1a0e', shade30: '#50301a', shade20: '#6c4123', shade10: '#804d29', primary: '#8e562e', tint10: '#9c663f', tint20: '#a97652', tint30: '#bb8f6f', tint40: '#ddc3b0', tint50: '#edded3', tint60: '#faf7f4' }; const forest = { shade50: '#0c1501', shade40: '#162702', shade30: '#294903', shade20: '#376304', shade10: '#427505', primary: '#498205', tint10: '#599116', tint20: '#6ba02b', tint30: '#85b44c', tint40: '#bdd99b', tint50: '#dbebc7', tint60: '#f6faf0' }; const seafoam = { shade50: '#002111', shade40: '#003d20', shade30: '#00723b', shade20: '#009b51', shade10: '#00b85f', primary: '#00cc6a', tint10: '#19d279', tint20: '#34d889', tint30: '#5ae0a0', tint40: '#a8f0cd', tint50: '#cff7e4', tint60: '#f3fdf8' }; const lightGreen = { shade50: '#031a02', shade40: '#063004', shade30: '#0b5a08', shade20: '#0e7a0b', shade10: '#11910d', primary: '#13a10e', tint10: '#27ac22', tint20: '#3db838', tint30: '#5ec75a', tint40: '#a7e3a5', tint50: '#cef0cd', tint60: '#f2fbf2' }; const green = { shade50: '#031403', shade40: '#052505', shade30: '#094509', shade20: '#0c5e0c', shade10: '#0e700e', primary: '#107c10', tint10: '#218c21', tint20: '#359b35', tint30: '#54b054', tint40: '#9fd89f', tint50: '#c9eac9', tint60: '#f1faf1' }; const darkGreen = { shade50: '#021102', shade40: '#032003', shade30: '#063b06', shade20: '#085108', shade10: '#0a5f0a', primary: '#0b6a0b', tint10: '#1a7c1a', tint20: '#2d8e2d', tint30: '#4da64d', tint40: '#9ad29a', tint50: '#c6e7c6', tint60: '#f0f9f0' }; const lightTeal = { shade50: '#001d1f', shade40: '#00373a', shade30: '#00666d', shade20: '#008b94', shade10: '#00a5af', primary: '#00b7c3', tint10: '#18bfca', tint20: '#32c8d1', tint30: '#58d3db', tint40: '#a6e9ed', tint50: '#cef3f5', tint60: '#f2fcfd' }; const teal = { shade50: '#001516', shade40: '#012728', shade30: '#02494c', shade20: '#026467', shade10: '#037679', primary: '#038387', tint10: '#159195', tint20: '#2aa0a4', tint30: '#4cb4b7', tint40: '#9bd9db', tint50: '#c7ebec', tint60: '#f0fafa' }; const steel = { shade50: '#000f12', shade40: '#001b22', shade30: '#00333f', shade20: '#004555', shade10: '#005265', primary: '#005b70', tint10: '#0f6c81', tint20: '#237d92', tint30: '#4496a9', tint40: '#94c8d4', tint50: '#c3e1e8', tint60: '#eff7f9' }; const blue = { shade50: '#001322', shade40: '#002440', shade30: '#004377', shade20: '#005ba1', shade10: '#006cbf', primary: '#0078d4', tint10: '#1a86d9', tint20: '#3595de', tint30: '#5caae5', tint40: '#a9d3f2', tint50: '#d0e7f8', tint60: '#f3f9fd' }; const royalBlue = { shade50: '#000c16', shade40: '#00172a', shade30: '#002c4e', shade20: '#003b6a', shade10: '#00467e', primary: '#004e8c', tint10: '#125e9a', tint20: '#286fa8', tint30: '#4a89ba', tint40: '#9abfdc', tint50: '#c7dced', tint60: '#f0f6fa' }; const cornflower = { shade50: '#0d1126', shade40: '#182047', shade30: '#2c3c85', shade20: '#3c51b4', shade10: '#4760d5', primary: '#4f6bed', tint10: '#637cef', tint20: '#778df1', tint30: '#93a4f4', tint40: '#c8d1fa', tint50: '#e1e6fc', tint60: '#f7f9fe' }; const navy = { shade50: '#00061d', shade40: '#000c36', shade30: '#001665', shade20: '#001e89', shade10: '#0023a2', primary: '#0027b4', tint10: '#173bbd', tint20: '#3050c6', tint30: '#546fd2', tint40: '#a3b2e8', tint50: '#ccd5f3', tint60: '#f2f4fc' }; const lavender = { shade50: '#120f25', shade40: '#221d46', shade30: '#3f3682', shade20: '#5649b0', shade10: '#6656d1', primary: '#7160e8', tint10: '#8172eb', tint20: '#9184ee', tint30: '#a79cf1', tint40: '#d2ccf8', tint50: '#e7e4fb', tint60: '#f9f8fe' }; const purple = { shade50: '#0f0717', shade40: '#1c0e2b', shade30: '#341a51', shade20: '#46236e', shade10: '#532982', primary: '#5c2e91', tint10: '#6b3f9e', tint20: '#7c52ab', tint30: '#9470bd', tint40: '#c6b1de', tint50: '#e0d3ed', tint60: '#f7f4fb' }; const grape = { shade50: '#160418', shade40: '#29072e', shade30: '#4c0d55', shade20: '#671174', shade10: '#7a1589', primary: '#881798', tint10: '#952aa4', tint20: '#a33fb1', tint30: '#b55fc1', tint40: '#d9a7e0', tint50: '#eaceef', tint60: '#faf2fb' }; const berry = { shade50: '#1f091d', shade40: '#3a1136', shade30: '#6d2064', shade20: '#932b88', shade10: '#af33a1', primary: '#c239b3', tint10: '#c94cbc', tint20: '#d161c4', tint30: '#da7ed0', tint40: '#edbbe7', tint50: '#f5daf2', tint60: '#fdf5fc' }; const lilac = { shade50: '#1c0b1f', shade40: '#35153a', shade30: '#63276d', shade20: '#863593', shade10: '#9f3faf', primary: '#b146c2', tint10: '#ba58c9', tint20: '#c36bd1', tint30: '#cf87da', tint40: '#e6bfed', tint50: '#f2dcf5', tint60: '#fcf6fd' }; const pink = { shade50: '#24091b', shade40: '#441232', shade30: '#80215d', shade20: '#ad2d7e', shade10: '#cd3595', primary: '#e43ba6', tint10: '#e750b0', tint20: '#ea66ba', tint30: '#ef85c8', tint40: '#f7c0e3', tint50: '#fbddf0', tint60: '#fef6fb' }; const magenta = { shade50: '#1f0013', shade40: '#390024', shade30: '#6b0043', shade20: '#91005a', shade10: '#ac006b', primary: '#bf0077', tint10: '#c71885', tint20: '#ce3293', tint30: '#d957a8', tint40: '#eca5d1', tint50: '#f5cee6', tint60: '#fcf2f9' }; const plum = { shade50: '#13000c', shade40: '#240017', shade30: '#43002b', shade20: '#5a003b', shade10: '#6b0045', primary: '#77004d', tint10: '#87105d', tint20: '#98246f', tint30: '#ad4589', tint40: '#d696c0', tint50: '#e9c4dc', tint60: '#faf0f6' }; const beige = { shade50: '#141313', shade40: '#252323', shade30: '#444241', shade20: '#5d5958', shade10: '#6e6968', primary: '#7a7574', tint10: '#8a8584', tint20: '#9a9594', tint30: '#afabaa', tint40: '#d7d4d4', tint50: '#eae8e8', tint60: '#faf9f9' }; const mink = { shade50: '#0f0e0e', shade40: '#1c1b1a', shade30: '#343231', shade20: '#474443', shade10: '#54514f', primary: '#5d5a58', tint10: '#706d6b', tint20: '#84817e', tint30: '#9e9b99', tint40: '#cecccb', tint50: '#e5e4e3', tint60: '#f8f8f8' }; const platinum = { shade50: '#111314', shade40: '#1f2426', shade30: '#3b4447', shade20: '#505c60', shade10: '#5f6d71', primary: '#69797e', tint10: '#79898d', tint20: '#89989d', tint30: '#a0adb2', tint40: '#cdd6d8', tint50: '#e4e9ea', tint60: '#f8f9fa' }; const anchor = { shade50: '#090a0b', shade40: '#111315', shade30: '#202427', shade20: '#2b3135', shade10: '#333a3f', primary: '#394146', tint10: '#4d565c', tint20: '#626c72', tint30: '#808a90', tint40: '#bcc3c7', tint50: '#dbdfe1', tint60: '#f6f7f8' }; const statusSharedColors = { red, green, darkOrange, yellow, berry, lightGreen, marigold }; const personaSharedColors = { darkRed, cranberry, pumpkin, peach, gold, brass, brown, forest, seafoam, darkGreen, lightTeal, teal, steel, blue, royalBlue, cornflower, navy, lavender, purple, grape, lilac, pink, magenta, plum, beige, mink, platinum, anchor }; const mappedStatusColors = { cranberry, green, orange }; /* Names of colors used in shared color palette alias tokens for status. */const statusSharedColorNames = ['red', 'green', 'darkOrange', 'yellow', 'berry', 'lightGreen', 'marigold']; /* Names of colors used in shared color palette alias tokens for persona. */ const personaSharedColorNames = ['darkRed', 'cranberry', 'pumpkin', 'peach', 'gold', 'brass', 'brown', 'forest', 'seafoam', 'darkGreen', 'lightTeal', 'teal', 'steel', 'blue', 'royalBlue', 'cornflower', 'navy', 'lavender', 'purple', 'grape', 'lilac', 'pink', 'magenta', 'plum', 'beige', 'mink', 'platinum', 'anchor']; const statusColorMapping = { success: 'green', warning: 'orange', danger: 'cranberry' }; const statusColorPaletteTokens$1 = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].tint60, [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].tint40, [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary, [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].shade10, [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].shade30, [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].primary, [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].primary, [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].tint40, [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].primary }; return Object.assign(acc, sharedColorTokens); }, {}); // one-off patch for yellow statusColorPaletteTokens$1.colorPaletteYellowForeground1 = statusSharedColors.yellow.shade30; statusColorPaletteTokens$1.colorPaletteRedForegroundInverted = statusSharedColors.red.tint20; statusColorPaletteTokens$1.colorPaletteGreenForegroundInverted = statusSharedColors.green.tint20; statusColorPaletteTokens$1.colorPaletteYellowForegroundInverted = statusSharedColors.yellow.tint40; const personaColorPaletteTokens$1 = personaSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].tint40, [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].shade30, [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].primary }; return Object.assign(acc, sharedColorTokens); }, {}); const colorPaletteTokens$1 = { ...statusColorPaletteTokens$1, ...personaColorPaletteTokens$1 }; const colorStatusTokens$1 = Object.entries(statusColorMapping).reduce((acc, _ref) => { let [statusColor, sharedColor] = _ref; const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1); // TODO: double check the mapping with design const statusColorTokens = { [`colorStatus${color}Background1`]: mappedStatusColors[sharedColor].tint60, [`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].tint40, [`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].shade10, [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].shade30, [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].tint30, [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].tint40, [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].primary }; return Object.assign(acc, statusColorTokens); }, {}); // one-off overrides for colorStatus tokens colorStatusTokens$1.colorStatusDangerBackground3Hover = mappedStatusColors[statusColorMapping.danger].shade10; colorStatusTokens$1.colorStatusDangerBackground3Pressed = mappedStatusColors[statusColorMapping.danger].shade20; colorStatusTokens$1.colorStatusWarningForeground1 = mappedStatusColors[statusColorMapping.warning].shade20; colorStatusTokens$1.colorStatusWarningForeground3 = mappedStatusColors[statusColorMapping.warning].shade20; colorStatusTokens$1.colorStatusWarningBorder2 = mappedStatusColors[statusColorMapping.warning].shade20; const generateColorTokens$1 = brand => ({ colorNeutralForeground1: grey[14], colorNeutralForeground1Hover: grey[14], colorNeutralForeground1Pressed: grey[14], colorNeutralForeground1Selected: grey[14], colorNeutralForeground2: grey[26], colorNeutralForeground2Hover: grey[14], colorNeutralForeground2Pressed: grey[14], colorNeutralForeground2Selected: grey[14], colorNeutralForeground2BrandHover: brand[80], colorNeutralForeground2BrandPressed: brand[70], colorNeutralForeground2BrandSelected: brand[80], colorNeutralForeground3: grey[38], colorNeutralForeground3Hover: grey[26], colorNeutralForeground3Pressed: grey[26], colorNeutralForeground3Selected: grey[26], colorNeutralForeground3BrandHover: brand[80], colorNeutralForeground3BrandPressed: brand[70], colorNeutralForeground3BrandSelected: brand[80], colorNeutralForeground4: grey[44], colorNeutralForegroundDisabled: grey[74], colorNeutralForegroundInvertedDisabled: whiteAlpha[40], colorBrandForegroundLink: brand[70], colorBrandForegroundLinkHover: brand[60], colorBrandForegroundLinkPressed: brand[40], colorBrandForegroundLinkSelected: brand[70], colorNeutralForeground2Link: grey[26], colorNeutralForeground2LinkHover: grey[14], colorNeutralForeground2LinkPressed: grey[14], colorNeutralForeground2LinkSelected: grey[14], colorCompoundBrandForeground1: brand[80], colorCompoundBrandForeground1Hover: brand[70], colorCompoundBrandForeground1Pressed: brand[60], colorBrandForeground1: brand[80], colorBrandForeground2: brand[70], colorBrandForeground2Hover: brand[60], colorBrandForeground2Pressed: brand[30], colorNeutralForeground1Static: grey[14], colorNeutralForegroundStaticInverted: white, colorNeutralForegroundInverted: white, colorNeutralForegroundInvertedHover: white, colorNeutralForegroundInvertedPressed: white, colorNeutralForegroundInvertedSelected: white, colorNeutralForegroundInverted2: white, colorNeutralForegroundOnBrand: white, colorNeutralForegroundInvertedLink: white, colorNeutralForegroundInvertedLinkHover: white, colorNeutralForegroundInvertedLinkPressed: white, colorNeutralForegroundInvertedLinkSelected: white, colorBrandForegroundInverted: brand[100], colorBrandForegroundInvertedHover: brand[110], colorBrandForegroundInvertedPressed: brand[100], colorBrandForegroundOnLight: brand[80], colorBrandForegroundOnLightHover: brand[70], colorBrandForegroundOnLightPressed: brand[50], colorBrandForegroundOnLightSelected: brand[60], colorNeutralBackground1: white, colorNeutralBackground1Hover: grey[96], colorNeutralBackground1Pressed: grey[88], colorNeutralBackground1Selected: grey[92], colorNeutralBackground2: grey[98], colorNeutralBackground2Hover: grey[94], colorNeutralBackground2Pressed: grey[86], colorNeutralBackground2Selected: grey[90], colorNeutralBackground3: grey[96], colorNeutralBackground3Hover: grey[92], colorNeutralBackground3Pressed: grey[84], colorNeutralBackground3Selected: grey[88], colorNeutralBackground4: grey[94], colorNeutralBackground4Hover: grey[98], colorNeutralBackground4Pressed: grey[96], colorNeutralBackground4Selected: white, colorNeutralBackground5: grey[92], colorNeutralBackground5Hover: grey[96], colorNeutralBackground5Pressed: grey[94], colorNeutralBackground5Selected: grey[98], colorNeutralBackground6: grey[90], colorNeutralBackgroundInverted: grey[16], colorNeutralBackgroundStatic: grey[20], colorNeutralBackgroundAlpha: whiteAlpha[50], colorNeutralBackgroundAlpha2: whiteAlpha[80], colorSubtleBackground: 'transparent', colorSubtleBackgroundHover: grey[96], colorSubtleBackgroundPressed: grey[88], colorSubtleBackgroundSelected: grey[92], colorSubtleBackgroundLightAlphaHover: whiteAlpha[70], colorSubtleBackgroundLightAlphaPressed: whiteAlpha[50], colorSubtleBackgroundLightAlphaSelected: 'transparent', colorSubtleBackgroundInverted: 'transparent', colorSubtleBackgroundInvertedHover: blackAlpha[10], colorSubtleBackgroundInvertedPressed: blackAlpha[30], colorSubtleBackgroundInvertedSelected: blackAlpha[20], colorTransparentBackground: 'transparent', colorTransparentBackgroundHover: 'transparent', colorTransparentBackgroundPressed: 'transparent', colorTransparentBackgroundSelected: 'transparent', colorNeutralBackgroundDisabled: grey[94], colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], colorNeutralStencil1: grey[90], colorNeutralStencil2: grey[98], colorNeutralStencil1Alpha: blackAlpha[10], colorNeutralStencil2Alpha: blackAlpha[5], colorBackgroundOverlay: blackAlpha[40], colorScrollbarOverlay: blackAlpha[50], colorBrandBackground: brand[80], colorBrandBackgroundHover: brand[70], colorBrandBackgroundPressed: brand[40], colorBrandBackgroundSelected: brand[60], colorCompoundBrandBackground: brand[80], colorCompoundBrandBackgroundHover: brand[70], colorCompoundBrandBackgroundPressed: brand[60], colorBrandBackgroundStatic: brand[80], colorBrandBackground2: brand[160], colorBrandBackground2Hover: brand[150], colorBrandBackground2Pressed: brand[130], colorBrandBackground3Static: brand[60], colorBrandBackground4Static: brand[40], colorBrandBackgroundInverted: white, colorBrandBackgroundInvertedHover: brand[160], colorBrandBackgroundInvertedPressed: brand[140], colorBrandBackgroundInvertedSelected: brand[150], colorNeutralCardBackground: grey[98], colorNeutralCardBackgroundHover: white, colorNeutralCardBackgroundPressed: grey[96], colorNeutralCardBackgroundSelected: grey[92], colorNeutralCardBackgroundDisabled: grey[94], colorNeutralStrokeAccessible: grey[38], colorNeutralStrokeAccessibleHover: grey[34], colorNeutralStrokeAccessiblePressed: grey[30], colorNeutralStrokeAccessibleSelected: brand[80], colorNeutralStroke1: grey[82], colorNeutralStroke1Hover: grey[78], colorNeutralStroke1Pressed: grey[70], colorNeutralStroke1Selected: grey[74], colorNeutralStroke2: grey[88], colorNeutralStroke3: grey[94], colorNeutralStrokeSubtle: grey[88], colorNeutralStrokeOnBrand: white, colorNeutralStrokeOnBrand2: white, colorNeutralStrokeOnBrand2Hover: white, colorNeutralStrokeOnBrand2Pressed: white, colorNeutralStrokeOnBrand2Selected: white, colorBrandStroke1: brand[80], colorBrandStroke2: brand[140], colorBrandStroke2Hover: brand[120], colorBrandStroke2Pressed: brand[80], colorBrandStroke2Contrast: brand[140], colorCompoundBrandStroke: brand[80], colorCompoundBrandStrokeHover: brand[70], colorCompoundBrandStrokePressed: brand[60], colorNeutralStrokeDisabled: grey[88], colorNeutralStrokeInvertedDisabled: whiteAlpha[40], colorTransparentStroke: 'transparent', colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', colorNeutralStrokeAlpha: blackAlpha[5], colorNeutralStrokeAlpha2: whiteAlpha[20], colorStrokeFocus1: white, colorStrokeFocus2: black, colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', colorNeutralShadowKey: 'rgba(0,0,0,0.14)', colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)', colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)', colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)', colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)', colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', colorBrandShadowKey: 'rgba(0,0,0,0.25)' }); const borderRadius = { borderRadiusNone: '0', borderRadiusSmall: '2px', borderRadiusMedium: '4px', borderRadiusLarge: '6px', borderRadiusXLarge: '8px', borderRadiusCircular: '10000px' }; const curves = { curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)', curveAccelerateMid: 'cubic-bezier(1,0,1,1)', curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)', curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)', curveDecelerateMid: 'cubic-bezier(0,0,0,1)', curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)', curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)', curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)', curveLinear: 'cubic-bezier(0,0,1,1)' }; const durations = { durationUltraFast: '50ms', durationFaster: '100ms', durationFast: '150ms', durationNormal: '200ms', durationGentle: '250ms', durationSlow: '300ms', durationSlower: '400ms', durationUltraSlow: '500ms' }; const fontSizes = { fontSizeBase100: '10px', fontSizeBase200: '12px', fontSizeBase300: '14px', fontSizeBase400: '16px', fontSizeBase500: '20px', fontSizeBase600: '24px', fontSizeHero700: '28px', fontSizeHero800: '32px', fontSizeHero900: '40px', fontSizeHero1000: '68px' }; const lineHeights = { lineHeightBase100: '14px', lineHeightBase200: '16px', lineHeightBase300: '20px', lineHeightBase400: '22px', lineHeightBase500: '28px', lineHeightBase600: '32px', lineHeightHero700: '36px', lineHeightHero800: '40px', lineHeightHero900: '52px', lineHeightHero1000: '92px' }; const fontWeights = { fontWeightRegular: 400, fontWeightMedium: 500, fontWeightSemibold: 600, fontWeightBold: 700 }; const fontFamilies = { fontFamilyBase: // eslint-disable-next-line @fluentui/max-len "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", fontFamilyMonospace: "Consolas, 'Courier New', Courier, monospace", fontFamilyNumeric: // eslint-disable-next-line @fluentui/max-len "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif" }; // Intentionally not exported! Use horizontalSpacings and verticalSpacings instead. const spacings = { none: '0', xxs: '2px', xs: '4px', sNudge: '6px', s: '8px', mNudge: '10px', m: '12px', l: '16px', xl: '20px', xxl: '24px', xxxl: '32px' }; const horizontalSpacings = { spacingHorizontalNone: spacings.none, spacingHorizontalXXS: spacings.xxs, spacingHorizontalXS: spacings.xs, spacingHorizontalSNudge: spacings.sNudge, spacingHorizontalS: spacings.s, spacingHorizontalMNudge: spacings.mNudge, spacingHorizontalM: spacings.m, spacingHorizontalL: spacings.l, spacingHorizontalXL: spacings.xl, spacingHorizontalXXL: spacings.xxl, spacingHorizontalXXXL: spacings.xxxl }; const verticalSpacings = { spacingVerticalNone: spacings.none, spacingVerticalXXS: spacings.xxs, spacingVerticalXS: spacings.xs, spacingVerticalSNudge: spacings.sNudge, spacingVerticalS: spacings.s, spacingVerticalMNudge: spacings.mNudge, spacingVerticalM: spacings.m, spacingVerticalL: spacings.l, spacingVerticalXL: spacings.xl, spacingVerticalXXL: spacings.xxl, spacingVerticalXXXL: spacings.xxxl }; const strokeWidths = { strokeWidthThin: '1px', strokeWidthThick: '2px', strokeWidthThicker: '3px', strokeWidthThickest: '4px' }; function createShadowTokens(ambientColor, keyColor) { let tokenSuffix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; return { [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`, [`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`, [`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`, [`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`, [`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`, [`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}` }; } const createLightTheme = brand => { const colorTokens = generateColorTokens$1(brand); return { ...borderRadius, ...fontSizes, ...lineHeights, ...fontFamilies, ...fontWeights, ...strokeWidths, ...horizontalSpacings, ...verticalSpacings, ...durations, ...curves, ...colorTokens, ...colorPaletteTokens$1, ...colorStatusTokens$1, ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') }; }; const brandWeb = { 10: `#061724`, 20: `#082338`, 30: `#0a2e4a`, 40: `#0c3b5e`, 50: `#0e4775`, 60: `#0f548c`, 70: `#115ea3`, 80: `#0f6cbd`, 90: `#2886de`, 100: `#479ef5`, 110: `#62abf5`, 120: `#77b7f7`, 130: `#96c6fa`, 140: `#b4d6fa`, 150: `#cfe4fa`, 160: `#ebf3fc` }; const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40, [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].shade30, [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary, [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].tint30, [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].tint40, [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].tint20, [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].tint30, [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].primary, [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].tint20 }; return Object.assign(acc, sharedColorTokens); }, {}); // one-off patches statusColorPaletteTokens.colorPaletteRedForeground3 = statusSharedColors.red.tint30; statusColorPaletteTokens.colorPaletteRedBorder2 = statusSharedColors.red.tint30; statusColorPaletteTokens.colorPaletteGreenForeground3 = statusSharedColors.green.tint40; statusColorPaletteTokens.colorPaletteGreenBorder2 = statusSharedColors.green.tint40; statusColorPaletteTokens.colorPaletteDarkOrangeForeground3 = statusSharedColors.darkOrange.tint30; statusColorPaletteTokens.colorPaletteDarkOrangeBorder2 = statusSharedColors.darkOrange.tint30; statusColorPaletteTokens.colorPaletteRedForegroundInverted = statusSharedColors.red.primary; statusColorPaletteTokens.colorPaletteGreenForegroundInverted = statusSharedColors.green.primary; statusColorPaletteTokens.colorPaletteYellowForegroundInverted = statusSharedColors.yellow.shade30; const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor) => { const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); const sharedColorTokens = { [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30, [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].tint40, [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].tint30 }; return Object.assign(acc, sharedColorTokens); }, {}); // one-off patches personaColorPaletteTokens.colorPaletteDarkRedBackground2 = personaSharedColors.darkRed.shade20; personaColorPaletteTokens.colorPalettePlumBackground2 = personaSharedColors.plum.shade20; const colorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens }; const colorStatusTokens = Object.entries(statusColorMapping).reduce((acc, _ref) => { let [statusColor, sharedColor] = _ref; const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1); // TODO: double check the mapping with design - see the one-off patches above const statusColorTokens = { [`colorStatus${color}Background1`]: mappedStatusColors[sharedColor].shade40, [`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].shade30, [`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].tint30, [`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].tint40, [`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].tint20, [`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].tint30, [`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].shade10, [`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].primary, [`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].tint20 }; return Object.assign(acc, statusColorTokens); }, {}); // one-off overrides for colorStatus tokens colorStatusTokens.colorStatusDangerBackground3Hover = mappedStatusColors[statusColorMapping.danger].shade10; colorStatusTokens.colorStatusDangerBackground3Pressed = mappedStatusColors[statusColorMapping.danger].shade20; colorStatusTokens.colorStatusDangerForeground3 = mappedStatusColors[statusColorMapping.danger].tint40; colorStatusTokens.colorStatusDangerBorder2 = mappedStatusColors[statusColorMapping.danger].tint30; colorStatusTokens.colorStatusSuccessForeground3 = mappedStatusColors[statusColorMapping.success].tint40; colorStatusTokens.colorStatusSuccessBorder2 = mappedStatusColors[statusColorMapping.success].tint40; colorStatusTokens.colorStatusWarningForegroundInverted = mappedStatusColors[statusColorMapping.warning].shade20; const webLightTheme = createLightTheme(brandWeb); const generateColorTokens = brand => ({ colorNeutralForeground1: white, colorNeutralForeground1Hover: white, colorNeutralForeground1Pressed: white, colorNeutralForeground1Selected: white, colorNeutralForeground2: grey[84], colorNeutralForeground2Hover: white, colorNeutralForeground2Pressed: white, colorNeutralForeground2Selected: white, colorNeutralForeground2BrandHover: brand[100], colorNeutralForeground2BrandPressed: brand[90], colorNeutralForeground2BrandSelected: brand[100], colorNeutralForeground3: grey[68], colorNeutralForeground3Hover: grey[84], colorNeutralForeground3Pressed: grey[84], colorNeutralForeground3Selected: grey[84], colorNeutralForeground3BrandHover: brand[100], colorNeutralForeground3BrandPressed: brand[90], colorNeutralForeground3BrandSelected: brand[100], colorNeutralForeground4: grey[60], colorNeutralForegroundDisabled: grey[36], colorNeutralForegroundInvertedDisabled: whiteAlpha[40], colorBrandForegroundLink: brand[100], colorBrandForegroundLinkHover: brand[110], colorBrandForegroundLinkPressed: brand[90], colorBrandForegroundLinkSelected: brand[100], colorNeutralForeground2Link: grey[84], colorNeutralForeground2LinkHover: white, colorNeutralForeground2LinkPressed: white, colorNeutralForeground2LinkSelected: white, colorCompoundBrandForeground1: brand[100], colorCompoundBrandForeground1Hover: brand[110], colorCompoundBrandForeground1Pressed: brand[90], colorBrandForeground1: brand[100], colorBrandForeground2: brand[110], colorBrandForeground2Hover: brand[130], colorBrandForeground2Pressed: brand[160], colorNeutralForeground1Static: grey[14], colorNeutralForegroundStaticInverted: white, colorNeutralForegroundInverted: grey[14], colorNeutralForegroundInvertedHover: grey[14], colorNeutralForegroundInvertedPressed: grey[14], colorNeutralForegroundInvertedSelected: grey[14], colorNeutralForegroundInverted2: grey[14], colorNeutralForegroundOnBrand: white, colorNeutralForegroundInvertedLink: white, colorNeutralForegroundInvertedLinkHover: white, colorNeutralForegroundInvertedLinkPressed: white, colorNeutralForegroundInvertedLinkSelected: white, colorBrandForegroundInverted: brand[80], colorBrandForegroundInvertedHover: brand[70], colorBrandForegroundInvertedPressed: brand[60], colorBrandForegroundOnLight: brand[80], colorBrandForegroundOnLightHover: brand[70], colorBrandForegroundOnLightPressed: brand[50], colorBrandForegroundOnLightSelected: brand[60], colorNeutralBackground1: grey[16], colorNeutralBackground1Hover: grey[24], colorNeutralBackground1Pressed: grey[12], colorNeutralBackground1Selected: grey[22], colorNeutralBackground2: grey[12], colorNeutralBackground2Hover: grey[20], colorNeutralBackground2Pressed: grey[8], colorNeutralBackground2Selected: grey[18], colorNeutralBackground3: grey[8], colorNeutralBackground3Hover: grey[16], colorNeutralBackground3Pressed: grey[4], colorNeutralBackground3Selected: grey[14], colorNeutralBackground4: grey[4], colorNeutralBackground4Hover: grey[12], colorNeutralBackground4Pressed: black, colorNeutralBackground4Selected: grey[10], colorNeutralBackground5: black, colorNeutralBackground5Hover: grey[8], colorNeutralBackground5Pressed: grey[2], colorNeutralBackground5Selected: grey[6], colorNeutralBackground6: grey[20], colorNeutralBackgroundInverted: white, colorNeutralBackgroundStatic: grey[24], colorNeutralBackgroundAlpha: grey10Alpha[50], colorNeutralBackgroundAlpha2: grey12Alpha[70], colorSubtleBackground: 'transparent', colorSubtleBackgroundHover: grey[22], colorSubtleBackgroundPressed: grey[18], colorSubtleBackgroundSelected: grey[20], colorSubtleBackgroundLightAlphaHover: grey14Alpha[80], colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50], colorSubtleBackgroundLightAlphaSelected: 'transparent', colorSubtleBackgroundInverted: 'transparent', colorSubtleBackgroundInvertedHover: blackAlpha[10], colorSubtleBackgroundInvertedPressed: blackAlpha[30], colorSubtleBackgroundInvertedSelected: blackAlpha[20], colorTransparentBackground: 'transparent', colorTransparentBackgroundHover: 'transparent', colorTransparentBackgroundPressed: 'transparent', colorTransparentBackgroundSelected: 'transparent', colorNeutralBackgroundDisabled: grey[8], colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], colorNeutralStencil1: grey[34], colorNeutralStencil2: grey[20], colorNeutralStencil1Alpha: whiteAlpha[10], colorNeutralStencil2Alpha: whiteAlpha[5], colorBackgroundOverlay: blackAlpha[50], colorScrollbarOverlay: whiteAlpha[60], colorBrandBackground: brand[70], colorBrandBackgroundHover: brand[80], colorBrandBackgroundPressed: brand[40], colorBrandBackgroundSelected: brand[60], colorCompoundBrandBackground: brand[100], colorCompoundBrandBackgroundHover: brand[110], colorCompoundBrandBackgroundPressed: brand[90], colorBrandBackgroundStatic: brand[80], colorBrandBackground2: brand[20], colorBrandBackground2Hover: brand[40], colorBrandBackground2Pressed: brand[10], colorBrandBackground3Static: brand[60], colorBrandBackground4Static: brand[40], colorBrandBackgroundInverted: white, colorBrandBackgroundInvertedHover: brand[160], colorBrandBackgroundInvertedPressed: brand[140], colorBrandBackgroundInvertedSelected: brand[150], colorNeutralCardBackground: grey[20], colorNeutralCardBackgroundHover: grey[24], colorNeutralCardBackgroundPressed: grey[18], colorNeutralCardBackgroundSelected: grey[22], colorNeutralCardBackgroundDisabled: grey[8], colorNeutralStrokeAccessible: grey[68], colorNeutralStrokeAccessibleHover: grey[74], colorNeutralStrokeAccessiblePressed: grey[70], colorNeutralStrokeAccessibleSelected: brand[100], colorNeutralStroke1: grey[40], colorNeutralStroke1Hover: grey[46], colorNeutralStroke1Pressed: grey[42], colorNeutralStroke1Selected: grey[44], colorNeutralStroke2: grey[32], colorNeutralStroke3: grey[24], colorNeutralStrokeSubtle: grey[4], colorNeutralStrokeOnBrand: grey[16], colorNeutralStrokeOnBrand2: white, colorNeutralStrokeOnBrand2Hover: white, colorNeutralStrokeOnBrand2Pressed: white, colorNeutralStrokeOnBrand2Selected: white, colorBrandStroke1: brand[100], colorBrandStroke2: brand[50], colorBrandStroke2Hover: brand[50], colorBrandStroke2Pressed: brand[30], colorBrandStroke2Contrast: brand[50], colorCompoundBrandStroke: brand[100], colorCompoundBrandStrokeHover: brand[110], colorCompoundBrandStrokePressed: brand[90], colorNeutralStrokeDisabled: grey[26], colorNeutralStrokeInvertedDisabled: whiteAlpha[40], colorTransparentStroke: 'transparent', colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', colorNeutralStrokeAlpha: whiteAlpha[10], colorNeutralStrokeAlpha2: whiteAlpha[20], colorStrokeFocus1: black, colorStrokeFocus2: white, colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', colorNeutralShadowKey: 'rgba(0,0,0,0.28)', colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', colorBrandShadowKey: 'rgba(0,0,0,0.25)' }); const createDarkTheme = brand => { const colorTokens = generateColorTokens(brand); return { ...borderRadius, ...fontSizes, ...lineHeights, ...fontFamilies, ...fontWeights, ...strokeWidths, ...horizontalSpacings, ...verticalSpacings, ...durations, ...curves, ...colorTokens, ...colorPaletteTokens, ...colorStatusTokens, ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') }; }; const webDarkTheme = createDarkTheme(brandWeb); const brandFabric = { 10: `#001919`, 20: `#012826`, 30: `#01322E`, 40: `#033F38`, 50: `#054D43`, 60: `#0A5C50`, 70: `#0C695A`, 80: `#117865`, 90: `#1F937E`, 100: `#2AAC94`, 110: `#3ABB9F`, 120: `#52C7AA`, 130: `#78D3B9`, 140: `#9EE0CB`, 150: `#C0ECDD`, 160: `#E3F7Ef` }; const fabricLightTheme = createLightTheme(brandFabric); const fabricDarkTheme = createDarkTheme(brandFabric); /** * # setTheme * #### Set the theme to the root or a specific element. Defaults to setting the theme to the document element. * @param theme FluentUI theme object * @param target The target element to set the theme to. Defaults to the document element. * @param callback A callback function to run after the theme is set. Usefule for running an injector to inject components after theme is loaded. */ function setTheme(theme, target, callback) { let targetElement = null; if (target) { if (target === "root") { const cssVariables = Object.entries(theme).map(_ref => { let [key, value] = _ref; return `--${key}: ${value};`; }).join(" "); const styleElement = document.createElement("style"); styleElement.innerHTML = `:root { ${cssVariables} }`; document.head.appendChild(styleElement); } else { targetElement = document.querySelector(target); } } else { targetElement = document.documentElement; } if (targetElement) { Object.entries(theme).forEach(_ref2 => { let [key, value] = _ref2; targetElement.style.setProperty(`--${key}`, value); }); } callback && callback(); document.dispatchEvent(new CustomEvent("themeLoaded", { detail: { target: targetElement?.tagName || "root" }, bubbles: true })); } Object.defineProperty(exports, "CardDefinition", { enumerable: true, get: function () { return fabricWeb.CardDefinition; } }); Object.defineProperty(exports, "CardFooterDefinition", { enumerable: true, get: function () { return fabricWeb.CardFooterDefinition; } }); Object.defineProperty(exports, "CardHeaderDefinition", { enumerable: true, get: function () { return fabricWeb.CardHeaderDefinition; } }); Object.defineProperty(exports, "CardPreviewDefinition", { enumerable: true, get: function () { return fabricWeb.CardPreviewDefinition; } }); Object.defineProperty(exports, "FilterPillDefinition", { enumerable: true, get: function () { return fabricWeb.FilterPillDefinition; } }); Object.defineProperty(exports, "LoadingButtonDefinition", { enumerable: true, get: function () { return fabricWeb.LoadingButtonDefinition; } }); Object.defineProperty(exports, "MultiViewControllerDefinition", { enumerable: true, get: function () { return fabricWeb.MultiViewControllerDefinition; } }); Object.defineProperty(exports, "MultiViewDefinition", { enumerable: true, get: function () { return fabricWeb.MultiViewDefinition; } }); Object.defineProperty(exports, "MultiViewGroupDefinition", { enumerable: true, get: function () { return fabricWeb.MultiViewGroupDefinition; } }); Object.defineProperty(exports, "PopoverDefinition", { enumerable: true, get: function () { return fabricWeb.PopoverDefinition; } }); Object.defineProperty(exports, "TeachingBubbleDefinition", { enumerable: true, get: function () { return fabricWeb.TeachingBubbleDefinition; } }); Object.defineProperty(exports, "TooltipDefinition", { enumerable: true, get: function () { return fabricWeb.TooltipDefinition; } }); Object.defineProperty(exports, "WizardDefinition", { enumerable: true, get: function () { return fabricWeb.WizardDefinition; } }); Object.defineProperty(exports, "WizardPanelDefinition", { enumerable: true, get: function () { return fabricWeb.WizardPanelDefinition; } }); Object.defineProperty(exports, "WizardStepDefinition", { enumerable: true, get: function () { return fabricWeb.WizardStepDefinition; } }); Object.defineProperty(exports, "WizardStepState", { enumerable: true, get: function () { return fabricWeb.WizardStepState; } }); exports.Card = Card; exports.CardFooter = CardFooter; exports.CardHeader = CardHeader; exports.CardPreview = CardPreview; exports.FilterPill = FilterPill; exports.LoadingButton = LoadingButton; exports.MultiView = MultiView; exports.MultiViewController = MultiViewController; exports.MultiViewGroup = MultiViewGroup; exports.Popover = Popover; exports.TeachingBubble = TeachingBubble; exports.Tooltip = Tooltip; exports.Wizard = Wizard; exports.WizardPanel = WizardPanel; exports.WizardStep = WizardStep; exports.fabricDarkTheme = fabricDarkTheme; exports.fabricLightTheme = fabricLightTheme; exports.setTheme = setTheme; exports.webDarkTheme = webDarkTheme; exports.webLightTheme = webLightTheme; })); /***/ }), /***/ "./node_modules/@fabric-msft/fabric-web/dist/index.min.js": /*!****************************************************************!*\ !*** ./node_modules/@fabric-msft/fabric-web/dist/index.min.js ***! \****************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ AccordionMenu: () => (/* binding */ zt), /* harmony export */ AccordionMenuDefinition: () => (/* binding */ Ft), /* harmony export */ AccordionMenuExpandMode: () => (/* binding */ Ot), /* harmony export */ AccordionMenuItem: () => (/* binding */ Tt), /* harmony export */ AccordionMenuItemDefinition: () => (/* binding */ ao), /* harmony export */ AccordionMenuItemMarkerPosition: () => (/* binding */ Ht), /* harmony export */ AccordionMenuItemSize: () => (/* binding */ Bt), /* harmony export */ Button: () => (/* binding */ vo), /* harmony export */ ButtonAppearance: () => (/* binding */ lo), /* harmony export */ ButtonDefinition: () => (/* binding */ So), /* harmony export */ ButtonFormTarget: () => (/* binding */ uo), /* harmony export */ ButtonShape: () => (/* binding */ co), /* harmony export */ ButtonSize: () => (/* binding */ ho), /* harmony export */ ButtonStyles: () => (/* binding */ Co), /* harmony export */ ButtonTemplate: () => (/* binding */ Eo), /* harmony export */ ButtonType: () => (/* binding */ po), /* harmony export */ Card: () => (/* binding */ Yo), /* harmony export */ CardAppearance: () => (/* binding */ Do), /* harmony export */ CardDefinition: () => (/* binding */ ti), /* harmony export */ CardFocusMode: () => (/* binding */ Fo), /* harmony export */ CardFooter: () => (/* binding */ ai), /* harmony export */ CardFooterDefinition: () => (/* binding */ ci), /* harmony export */ CardHeader: () => (/* binding */ hi), /* harmony export */ CardHeaderDefinition: () => (/* binding */ mi), /* harmony export */ CardOrientation: () => (/* binding */ Vo), /* harmony export */ CardPreview: () => (/* binding */ fi), /* harmony export */ CardPreviewDefinition: () => (/* binding */ wi), /* harmony export */ CardSize: () => (/* binding */ Po), /* harmony export */ Carousel: () => (/* binding */ Lo), /* harmony export */ CarouselDefinition: () => (/* binding */ zo), /* harmony export */ CollisionEdge: () => (/* binding */ Ks), /* harmony export */ CustomStatesSetSupported: () => (/* binding */ St), /* harmony export */ FilterPill: () => (/* binding */ ii), /* harmony export */ FilterPillDefinition: () => (/* binding */ ri), /* harmony export */ FilterPillStyles: () => (/* binding */ si), /* harmony export */ FilterPillTemplate: () => (/* binding */ ni), /* harmony export */ LoadingButton: () => (/* binding */ xi), /* harmony export */ LoadingButtonDefinition: () => (/* binding */ Wi), /* harmony export */ MatchMediaBehavior: () => (/* binding */ wo), /* harmony export */ MatchMediaStyleSheetBehavior: () => (/* binding */ $o), /* harmony export */ Menu: () => (/* binding */ Gi), /* harmony export */ MenuButton: () => (/* binding */ Qi), /* harmony export */ MenuButtonAppearance: () => (/* binding */ Yi), /* harmony export */ MenuButtonDefinition: () => (/* binding */ ss), /* harmony export */ MenuButtonShape: () => (/* binding */ Ji), /* harmony export */ MenuButtonSize: () => (/* binding */ es), /* harmony export */ MenuButtonStyles: () => (/* binding */ Co), /* harmony export */ MenuButtonTemplate: () => (/* binding */ ts), /* harmony export */ MenuDefinition: () => (/* binding */ Xi), /* harmony export */ MenuItem: () => (/* binding */ ls), /* harmony export */ MenuItemDefinition: () => (/* binding */ us), /* harmony export */ MenuItemRole: () => (/* binding */ ns), /* harmony export */ MenuList: () => (/* binding */ vs), /* harmony export */ MenuListDefinition: () => (/* binding */ gs), /* harmony export */ MessageBar: () => (/* binding */ $s), /* harmony export */ MessageBarDefinition: () => (/* binding */ Rs), /* harmony export */ MessageBarIntent: () => (/* binding */ Ts), /* harmony export */ MessageBarLayout: () => (/* binding */ Ls), /* harmony export */ MessageBarShape: () => (/* binding */ Ms), /* harmony export */ MessageBarStyles: () => (/* binding */ Es), /* harmony export */ MessageBarTemplate: () => (/* binding */ Ss), /* harmony export */ MultiView: () => (/* binding */ As), /* harmony export */ MultiViewController: () => (/* binding */ Vs), /* harmony export */ MultiViewControllerDefinition: () => (/* binding */ Hs), /* harmony export */ MultiViewDefinition: () => (/* binding */ Ds), /* harmony export */ MultiViewGroup: () => (/* binding */ _s), /* harmony export */ MultiViewGroupDefinition: () => (/* binding */ Ws), /* harmony export */ Popover: () => (/* binding */ Js), /* harmony export */ PopoverDefinition: () => (/* binding */ on), /* harmony export */ PopoverEventNames: () => (/* binding */ Xs), /* harmony export */ PopoverPositions: () => (/* binding */ Zs), /* harmony export */ PopoverRepositionModes: () => (/* binding */ Us), /* harmony export */ PositioningShorthand: () => (/* binding */ Gs), /* harmony export */ SvgIcon: () => (/* binding */ dn), /* harmony export */ SvgIconDefinition: () => (/* binding */ pn), /* harmony export */ Table: () => (/* binding */ wn), /* harmony export */ TableCell: () => (/* binding */ un), /* harmony export */ TableCellDefinition: () => (/* binding */ bn), /* harmony export */ TableCellSize: () => (/* binding */ mn), /* harmony export */ TableDefinition: () => (/* binding */ yn), /* harmony export */ TeachingBubble: () => (/* binding */ Mr), /* harmony export */ TeachingBubbleDefinition: () => (/* binding */ Pr), /* harmony export */ TeachingBubblePlacement: () => (/* binding */ Or), /* harmony export */ TeachingBubbleSize: () => (/* binding */ Tr), /* harmony export */ Tooltip: () => (/* binding */ Vr), /* harmony export */ TooltipDefinition: () => (/* binding */ Hr), /* harmony export */ TooltipOptions: () => (/* binding */ jr), /* harmony export */ Wizard: () => (/* binding */ qr), /* harmony export */ WizardDefinition: () => (/* binding */ Gr), /* harmony export */ WizardPanel: () => (/* binding */ Ur), /* harmony export */ WizardPanelDefinition: () => (/* binding */ Yr), /* harmony export */ WizardStep: () => (/* binding */ ea), /* harmony export */ WizardStepDefinition: () => (/* binding */ na), /* harmony export */ WizardStepState: () => (/* binding */ _r), /* harmony export */ accordionMenuItemStyles: () => (/* binding */ ro), /* harmony export */ accordionMenuItemTemplate: () => (/* binding */ _t), /* harmony export */ accordionStyles: () => (/* binding */ Dt), /* harmony export */ accordionTemplate: () => (/* binding */ Pt), /* harmony export */ cardFooterStyles: () => (/* binding */ li), /* harmony export */ cardFooterTemplate: () => (/* binding */ di), /* harmony export */ cardHeaderStyles: () => (/* binding */ pi), /* harmony export */ cardHeaderTemplate: () => (/* binding */ ui), /* harmony export */ cardPreviewStyles: () => (/* binding */ bi), /* harmony export */ cardPreviewTemplate: () => (/* binding */ gi), /* harmony export */ cardStyles: () => (/* binding */ Jo), /* harmony export */ cardTemplate: () => (/* binding */ ei), /* harmony export */ carouselStyles: () => (/* binding */ Mo), /* harmony export */ carouselTemplate: () => (/* binding */ Ao), /* harmony export */ darkModeStylesheetBehavior: () => (/* binding */ yo), /* harmony export */ forcedColorsStylesheetBehavior: () => (/* binding */ xo), /* harmony export */ getDirection: () => (/* binding */ fo), /* harmony export */ handleAttributeChange: () => (/* binding */ Lt), /* harmony export */ lightModeStylesheetBehavior: () => (/* binding */ ko), /* harmony export */ loadingButtonStyles: () => (/* binding */ yi), /* harmony export */ loadingButtonTemplate: () => (/* binding */ qi), /* harmony export */ menuItemStyles: () => (/* binding */ cs), /* harmony export */ menuItemTemplate: () => (/* binding */ ps), /* harmony export */ menuListStyles: () => (/* binding */ fs), /* harmony export */ menuListTemplate: () => (/* binding */ bs), /* harmony export */ menuStyles: () => (/* binding */ Zi), /* harmony export */ menuTemplate: () => (/* binding */ Ui), /* harmony export */ multiViewControllerStyles: () => (/* binding */ Fs), /* harmony export */ multiViewControllerTemplate: () => (/* binding */ Bs), /* harmony export */ multiViewGroupStyles: () => (/* binding */ Ns), /* harmony export */ multiViewGroupTemplate: () => (/* binding */ qs), /* harmony export */ multiViewStyles: () => (/* binding */ zs), /* harmony export */ multiViewTemplate: () => (/* binding */ Ps), /* harmony export */ popoverStyles: () => (/* binding */ en), /* harmony export */ popoverTemplate: () => (/* binding */ tn), /* harmony export */ renderComponent: () => (/* binding */ bo), /* harmony export */ renderHtmlTemplate: () => (/* binding */ go), /* harmony export */ roleForMenuItem: () => (/* binding */ rs), /* harmony export */ staticallyCompose: () => (/* binding */ jt), /* harmony export */ svgIconStyles: () => (/* binding */ cn), /* harmony export */ svgIconTemplate: () => (/* binding */ hn), /* harmony export */ tableCellStyles: () => (/* binding */ vn), /* harmony export */ tableCellTemplate: () => (/* binding */ fn), /* harmony export */ tableStyles: () => (/* binding */ $n), /* harmony export */ tableTemplate: () => (/* binding */ xn), /* harmony export */ teachingBubbleStyles: () => (/* binding */ Ar), /* harmony export */ teachingBubbleTemplate: () => (/* binding */ zr), /* harmony export */ toggleState: () => (/* binding */ Rt), /* harmony export */ tooltipStyles: () => (/* binding */ Br), /* harmony export */ tooltipTemplate: () => (/* binding */ Fr), /* harmony export */ wizardPanelStyles: () => (/* binding */ Xr), /* harmony export */ wizardPanelTemplate: () => (/* binding */ Qr), /* harmony export */ wizardStepStyles: () => (/* binding */ ta), /* harmony export */ wizardStepTemplate: () => (/* binding */ sa), /* harmony export */ wizardStyles: () => (/* binding */ Wr), /* harmony export */ wizardTemplate: () => (/* binding */ Kr) /* harmony export */ }); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/components/attributes.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/components/fast-element.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/observation/observable.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/templating/template.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/templating/slotted.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/templating/node-observation.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/styles/css.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/templating/ref.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js"); /* harmony import */ var _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @microsoft/fast-element */ "./node_modules/@microsoft/fast-element/dist/esm/templating/when.js"); /* harmony import */ var _fluentui_web_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fluentui/web-components */ "./node_modules/@fluentui/web-components/dist/esm/patterns/start-end.js"); /* harmony import */ var _fluentui_web_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @fluentui/web-components */ "./node_modules/@fluentui/web-components/dist/esm/utils/display.js"); /* harmony import */ var _fluentui_web_components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @fluentui/web-components */ "./node_modules/@fluentui/web-components/dist/esm/theme/design-tokens.js"); /* harmony import */ var _fluentui_web_components__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @fluentui/web-components */ "./node_modules/@fluentui/web-components/dist/esm/button/button.js"); /* harmony import */ var _fluentui_web_components__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @fluentui/web-components */ "./node_modules/@fluentui/web-components/dist/esm/button/button.options.js"); /* harmony import */ var _fluentui_web_components__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @fluentui/web-components */ "./node_modules/@fluentui/web-components/dist/esm/utils/behaviors/match-media-stylesheet-behavior.js"); function mt(...e){return e.every((e=>e instanceof HTMLElement))}const vt="ArrowDown",ft="ArrowUp",bt="End",gt="Enter",wt="Escape",$t="Home",xt=" ",yt="Tab";var kt;!function(e){e.ltr="ltr",e.rtl="rtl"}(kt||(kt={}));let Ct=0;function It(e=""){return`${e}${Ct++}`}function Et(t,...o){const i=_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.AttributeConfiguration.locate(t);o.forEach((o=>{Object.getOwnPropertyNames(o.prototype).forEach((e=>{"constructor"!==e&&Object.defineProperty(t.prototype,e,Object.getOwnPropertyDescriptor(o.prototype,e))}));_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.AttributeConfiguration.locate(o).forEach((e=>i.push(e)))}))}const St=CSS.supports("selector(:state(g))");function Rt(e,t,o){St?(o=null!=o?o:!e.states.has(t))?e.states.add(t):e.states.delete(t):e.shadowRoot.host.toggleAttribute(`state--${t}`,o)}function Lt(e,t,o,i){t&&i(e,t,!1),o&&i(e,o,!0)}var Mt=window&&window.__decorate||function(e,t,o,i){var s,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(n<3?s(r):n>3?s(t,o,r):s(t,o))||r);return n>3&&r&&Object.defineProperty(t,o,r),r};class Tt extends _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_1__.FASTElement{constructor(){super(...arguments),this.elementInternals=this.attachInternals(),this.slottedMenuItems=[],this.headinglevel=2,this.expanded=!1,this.disabled=!1,this.id=It("accordion-"),this.block=!1}expandedChanged(e,t){Rt(this.elementInternals,"expanded",t),t!==e&&this.$emit("expanded-change",{expanded:t})}disabledChanged(e,t){Rt(this.elementInternals,"disabled",t)}sizeChanged(e,t){e&&Rt(this.elementInternals,e,!1),t&&Rt(this.elementInternals,t,!0)}blockChanged(e,t){Rt(this.elementInternals,"block",t)}markerPositionChanged(e,t){e&&Rt(this.elementInternals,`align-${e}`,!1),t&&Rt(this.elementInternals,`align-${t}`,!0)}}Mt([(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr)({attribute:"heading-level",mode:"fromView",converter:_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.nullableNumberConverter})],Tt.prototype,"headinglevel",void 0),Mt([(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr)({mode:"boolean"})],Tt.prototype,"expanded",void 0),Mt([(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr)({mode:"boolean"})],Tt.prototype,"disabled",void 0),Mt([_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr],Tt.prototype,"id",void 0),Mt([_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr],Tt.prototype,"size",void 0),Mt([(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr)({mode:"boolean"})],Tt.prototype,"block",void 0),Mt([(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr)({attribute:"marker-position"})],Tt.prototype,"markerPosition",void 0),Et(Tt,_fluentui_web_components__WEBPACK_IMPORTED_MODULE_2__.StartEnd);const Ot={single:"single",multi:"multi"};var At=window&&window.__decorate||function(e,t,o,i){var s,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(n<3?s(r):n>3?s(t,o,r):s(t,o))||r);return n>3&&r&&Object.defineProperty(t,o,r),r};class zt extends _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_1__.FASTElement{constructor(){super(...arguments),this.expandmode=Ot.multi,this.activeItemIndex=0,this.setItems=()=>{if(0===this.slottedAccordionMenuItems.length)return;const e=Array.from(this.children);if(this.removeItemListeners(e),e.forEach((e=>_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_3__.Observable.getNotifier(e).subscribe(this,"disabled"))),this.accordionItems=e.filter((e=>!e.hasAttribute("disabled"))),this.accordionItems.forEach((e=>{e instanceof Tt&&(e.addEventListener("click",this.expandedChangedHandler),_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_3__.Observable.getNotifier(e).subscribe(this,"expanded"))})),this.isSingleExpandMode()){const e=this.findExpandedItem();this.setSingleExpandMode(e)}},this.removeItemListeners=e=>{e.forEach((e=>{_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_3__.Observable.getNotifier(e).unsubscribe(this,"disabled"),_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_3__.Observable.getNotifier(e).unsubscribe(this,"expanded"),e.removeEventListener("click",this.expandedChangedHandler)}))},this.expandedChangedHandler=e=>{const t=e.target;t instanceof Tt&&(this.isSingleExpandMode()?this.setSingleExpandMode(t):(t.expanded=!t.expanded,this.activeItemIndex=this.accordionItems.indexOf(t)),this.$emit("change"))}}expandmodeChanged(e,t){if(!this.$fastController.isConnected)return;const o=this.findExpandedItem();o&&(t!==Ot.single?null==o||o.expandbutton.removeAttribute("aria-disabled"):this.setSingleExpandMode(o))}slottedAccordionMenuItemsChanged(){this.$fastController.isConnected&&this.setItems()}handleChange(e,t){"disabled"===t?this.setItems():"expanded"===t&&e.expanded&&this.isSingleExpandMode()&&this.setSingleExpandMode(e)}findExpandedItem(){var e;return 0===this.accordionItems.length?null:null!==(e=this.accordionItems.find((e=>e instanceof Tt&&e.expanded)))&&void 0!==e?e:this.accordionItems[0]}isSingleExpandMode(){return this.expandmode===Ot.single}setSingleExpandMode(e){if(0===this.accordionItems.length)return;const t=Array.from(this.accordionItems);this.activeItemIndex=t.indexOf(e),t.forEach(((e,t)=>{e instanceof Tt&&(this.activeItemIndex===t?(e.expanded=!0,e.expandbutton.setAttribute("aria-disabled","true")):(e.expanded=!1,e.hasAttribute("disabled")||e.expandbutton.removeAttribute("aria-disabled")))}))}}At([(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_0__.attr)({attribute:"expand-mode"})],zt.prototype,"expandmode",void 0),At([_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_3__.observable],zt.prototype,"slottedAccordionMenuItems",void 0);const Pt=(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__.html)``,Dt=(0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_7__.css)` ${(0,_fluentui_web_components__WEBPACK_IMPORTED_MODULE_8__.display)("flex")} :host{flex-direction:column;width:100%;contain:content}`,Vt=Object.freeze({prefix:"fabric",shadowRootMode:"open",registry:customElements}),Ft=zt.compose({name:`${Vt.prefix}-accordion-menu`,template:Pt,styles:Dt,shadowOptions:{mode:Vt.shadowRootMode}});Ft.define(Vt.registry);const Bt={small:"small",medium:"medium",large:"large",extraLarge:"extra-large"},Ht={start:"start",end:"end"};function jt(e){return e?"string"==typeof e?new _microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__.InlineTemplateDirective(e):"inline"in e?e.inline():e:_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__.InlineTemplateDirective.empty}const _t=function(e={}){return (0,_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__.html)`
${(0,_fluentui_web_components__WEBPACK_IMPORTED_MODULE_2__.startSlotTemplate)(e)}
${jt(e.expandedIcon)}${jt(e.collapsedIcon)}
`}({collapsedIcon:_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__.html.partial(''),expandedIcon:_microsoft_fast_element__WEBPACK_IMPORTED_MODULE_4__.html.partial('