]].\n var optionsProp = options['[[' + _property + ']]'];\n\n // ii. Let formatPropDesc be the result of calling the [[GetOwnProperty]] internal method of format\n // with argument property.\n // iii. If formatPropDesc is not undefined, then\n // 1. Let formatProp be the result of calling the [[Get]] internal method of format with argument property.\n var formatProp = hop.call(format, _property) ? format[_property] : undefined;\n\n // Diverging: using the default properties produced by the pattern/skeleton\n // to match it with user options, and apply a penalty\n var patternProp = hop.call(format._, _property) ? format._[_property] : undefined;\n if (optionsProp !== patternProp) {\n score -= patternPenalty;\n }\n\n // iv. If optionsProp is undefined and formatProp is not undefined, then decrease score by\n // additionPenalty.\n if (optionsProp === undefined && formatProp !== undefined) score -= additionPenalty;\n\n // v. Else if optionsProp is not undefined and formatProp is undefined, then decrease score by\n // removalPenalty.\n else if (optionsProp !== undefined && formatProp === undefined) score -= removalPenalty;\n\n // vi. Else\n else {\n // 1. Let values be the array [\"2-digit\", \"numeric\", \"narrow\", \"short\",\n // \"long\"].\n var values = ['2-digit', 'numeric', 'narrow', 'short', 'long'];\n\n // 2. Let optionsPropIndex be the index of optionsProp within values.\n var optionsPropIndex = arrIndexOf.call(values, optionsProp);\n\n // 3. Let formatPropIndex be the index of formatProp within values.\n var formatPropIndex = arrIndexOf.call(values, formatProp);\n\n // 4. Let delta be max(min(formatPropIndex - optionsPropIndex, 2), -2).\n var delta = Math.max(Math.min(formatPropIndex - optionsPropIndex, 2), -2);\n\n {\n // diverging from spec\n // When the bestFit argument is true, subtract additional penalty where data types are not the same\n if (formatPropIndex <= 1 && optionsPropIndex >= 2 || formatPropIndex >= 2 && optionsPropIndex <= 1) {\n // 5. If delta = 2, decrease score by longMorePenalty.\n if (delta > 0) score -= longMorePenalty;else if (delta < 0) score -= longLessPenalty;\n } else {\n // 5. If delta = 2, decrease score by longMorePenalty.\n if (delta > 1) score -= shortMorePenalty;else if (delta < -1) score -= shortLessPenalty;\n }\n }\n }\n }\n\n {\n // diverging to also take into consideration differences between 12 or 24 hours\n // which is special for the best fit only.\n if (format._.hour12 !== options.hour12) {\n score -= hour12Penalty;\n }\n }\n\n // d. If score > bestScore, then\n if (score > bestScore) {\n // i. Let bestScore be score.\n bestScore = score;\n // ii. Let bestFormat be format.\n bestFormat = format;\n }\n\n // e. Increase i by 1.\n i++;\n }\n\n // 13. Return bestFormat.\n return bestFormat;\n}\n\n/* 12.2.3 */internals.DateTimeFormat = {\n '[[availableLocales]]': [],\n '[[relevantExtensionKeys]]': ['ca', 'nu'],\n '[[localeData]]': {}\n};\n\n/**\n * When the supportedLocalesOf method of Intl.DateTimeFormat is called, the\n * following steps are taken:\n */\n/* 12.2.2 */\ndefineProperty(Intl.DateTimeFormat, 'supportedLocalesOf', {\n configurable: true,\n writable: true,\n value: fnBind.call(function (locales) {\n // Bound functions only have the `this` value altered if being used as a constructor,\n // this lets us imitate a native function that has no constructor\n if (!hop.call(this, '[[availableLocales]]')) throw new TypeError('supportedLocalesOf() is not a constructor');\n\n // Create an object whose props can be used to restore the values of RegExp props\n var regexpRestore = createRegExpRestore(),\n\n\n // 1. If options is not provided, then let options be undefined.\n options = arguments[1],\n\n\n // 2. Let availableLocales be the value of the [[availableLocales]] internal\n // property of the standard built-in object that is the initial value of\n // Intl.NumberFormat.\n\n availableLocales = this['[[availableLocales]]'],\n\n\n // 3. Let requestedLocales be the result of calling the CanonicalizeLocaleList\n // abstract operation (defined in 9.2.1) with argument locales.\n requestedLocales = CanonicalizeLocaleList(locales);\n\n // Restore the RegExp properties\n regexpRestore();\n\n // 4. Return the result of calling the SupportedLocales abstract operation\n // (defined in 9.2.8) with arguments availableLocales, requestedLocales,\n // and options.\n return SupportedLocales(availableLocales, requestedLocales, options);\n }, internals.NumberFormat)\n});\n\n/**\n * This named accessor property returns a function that formats a number\n * according to the effective locale and the formatting options of this\n * DateTimeFormat object.\n */\n/* 12.3.2 */defineProperty(Intl.DateTimeFormat.prototype, 'format', {\n configurable: true,\n get: GetFormatDateTime\n});\n\nfunction GetFormatDateTime() {\n var internal = this !== null && babelHelpers$1[\"typeof\"](this) === 'object' && getInternalProperties(this);\n\n // Satisfy test 12.3_b\n if (!internal || !internal['[[initializedDateTimeFormat]]']) throw new TypeError('`this` value for format() is not an initialized Intl.DateTimeFormat object.');\n\n // The value of the [[Get]] attribute is a function that takes the following\n // steps:\n\n // 1. If the [[boundFormat]] internal property of this DateTimeFormat object\n // is undefined, then:\n if (internal['[[boundFormat]]'] === undefined) {\n // a. Let F be a Function object, with internal properties set as\n // specified for built-in functions in ES5, 15, or successor, and the\n // length property set to 0, that takes the argument date and\n // performs the following steps:\n var F = function F() {\n var date = arguments.length <= 0 || arguments[0] === undefined ? undefined : arguments[0];\n\n // i. If date is not provided or is undefined, then let x be the\n // result as if by the expression Date.now() where Date.now is\n // the standard built-in function defined in ES5, 15.9.4.4.\n // ii. Else let x be ToNumber(date).\n // iii. Return the result of calling the FormatDateTime abstract\n // operation (defined below) with arguments this and x.\n var x = date === undefined ? Date.now() : toNumber(date);\n return FormatDateTime(this, x);\n };\n // b. Let bind be the standard built-in function object defined in ES5,\n // 15.3.4.5.\n // c. Let bf be the result of calling the [[Call]] internal method of\n // bind with F as the this value and an argument list containing\n // the single item this.\n var bf = fnBind.call(F, this);\n // d. Set the [[boundFormat]] internal property of this NumberFormat\n // object to bf.\n internal['[[boundFormat]]'] = bf;\n }\n // Return the value of the [[boundFormat]] internal property of this\n // NumberFormat object.\n return internal['[[boundFormat]]'];\n}\n\nfunction formatToParts$1() {\n var date = arguments.length <= 0 || arguments[0] === undefined ? undefined : arguments[0];\n\n var internal = this !== null && babelHelpers$1[\"typeof\"](this) === 'object' && getInternalProperties(this);\n\n if (!internal || !internal['[[initializedDateTimeFormat]]']) throw new TypeError('`this` value for formatToParts() is not an initialized Intl.DateTimeFormat object.');\n\n var x = date === undefined ? Date.now() : toNumber(date);\n return FormatToPartsDateTime(this, x);\n}\n\nObject.defineProperty(Intl.DateTimeFormat.prototype, 'formatToParts', {\n enumerable: false,\n writable: true,\n configurable: true,\n value: formatToParts$1\n});\n\nfunction CreateDateTimeParts(dateTimeFormat, x) {\n // 1. If x is not a finite Number, then throw a RangeError exception.\n if (!isFinite(x)) throw new RangeError('Invalid valid date passed to format');\n\n var internal = dateTimeFormat.__getInternalProperties(secret);\n\n // Creating restore point for properties on the RegExp object... please wait\n /* let regexpRestore = */createRegExpRestore(); // ###TODO: review this\n\n // 2. Let locale be the value of the [[locale]] internal property of dateTimeFormat.\n var locale = internal['[[locale]]'];\n\n // 3. Let nf be the result of creating a new NumberFormat object as if by the\n // expression new Intl.NumberFormat([locale], {useGrouping: false}) where\n // Intl.NumberFormat is the standard built-in constructor defined in 11.1.3.\n var nf = new Intl.NumberFormat([locale], { useGrouping: false });\n\n // 4. Let nf2 be the result of creating a new NumberFormat object as if by the\n // expression new Intl.NumberFormat([locale], {minimumIntegerDigits: 2, useGrouping:\n // false}) where Intl.NumberFormat is the standard built-in constructor defined in\n // 11.1.3.\n var nf2 = new Intl.NumberFormat([locale], { minimumIntegerDigits: 2, useGrouping: false });\n\n // 5. Let tm be the result of calling the ToLocalTime abstract operation (defined\n // below) with x, the value of the [[calendar]] internal property of dateTimeFormat,\n // and the value of the [[timeZone]] internal property of dateTimeFormat.\n var tm = ToLocalTime(x, internal['[[calendar]]'], internal['[[timeZone]]']);\n\n // 6. Let result be the value of the [[pattern]] internal property of dateTimeFormat.\n var pattern = internal['[[pattern]]'];\n\n // 7.\n var result = new List();\n\n // 8.\n var index = 0;\n\n // 9.\n var beginIndex = pattern.indexOf('{');\n\n // 10.\n var endIndex = 0;\n\n // Need the locale minus any extensions\n var dataLocale = internal['[[dataLocale]]'];\n\n // Need the calendar data from CLDR\n var localeData = internals.DateTimeFormat['[[localeData]]'][dataLocale].calendars;\n var ca = internal['[[calendar]]'];\n\n // 11.\n while (beginIndex !== -1) {\n var fv = void 0;\n // a.\n endIndex = pattern.indexOf('}', beginIndex);\n // b.\n if (endIndex === -1) {\n throw new Error('Unclosed pattern');\n }\n // c.\n if (beginIndex > index) {\n arrPush.call(result, {\n type: 'literal',\n value: pattern.substring(index, beginIndex)\n });\n }\n // d.\n var p = pattern.substring(beginIndex + 1, endIndex);\n // e.\n if (dateTimeComponents.hasOwnProperty(p)) {\n // i. Let f be the value of the [[]] internal property of dateTimeFormat.\n var f = internal['[[' + p + ']]'];\n // ii. Let v be the value of tm.[[
]].\n var v = tm['[[' + p + ']]'];\n // iii. If p is \"year\" and v ≤ 0, then let v be 1 - v.\n if (p === 'year' && v <= 0) {\n v = 1 - v;\n }\n // iv. If p is \"month\", then increase v by 1.\n else if (p === 'month') {\n v++;\n }\n // v. If p is \"hour\" and the value of the [[hour12]] internal property of\n // dateTimeFormat is true, then\n else if (p === 'hour' && internal['[[hour12]]'] === true) {\n // 1. Let v be v modulo 12.\n v = v % 12;\n // 2. If v is 0 and the value of the [[hourNo0]] internal property of\n // dateTimeFormat is true, then let v be 12.\n if (v === 0 && internal['[[hourNo0]]'] === true) {\n v = 12;\n }\n }\n\n // vi. If f is \"numeric\", then\n if (f === 'numeric') {\n // 1. Let fv be the result of calling the FormatNumber abstract operation\n // (defined in 11.3.2) with arguments nf and v.\n fv = FormatNumber(nf, v);\n }\n // vii. Else if f is \"2-digit\", then\n else if (f === '2-digit') {\n // 1. Let fv be the result of calling the FormatNumber abstract operation\n // with arguments nf2 and v.\n fv = FormatNumber(nf2, v);\n // 2. If the length of fv is greater than 2, let fv be the substring of fv\n // containing the last two characters.\n if (fv.length > 2) {\n fv = fv.slice(-2);\n }\n }\n // viii. Else if f is \"narrow\", \"short\", or \"long\", then let fv be a String\n // value representing f in the desired form; the String value depends upon\n // the implementation and the effective locale and calendar of\n // dateTimeFormat. If p is \"month\", then the String value may also depend\n // on whether dateTimeFormat has a [[day]] internal property. If p is\n // \"timeZoneName\", then the String value may also depend on the value of\n // the [[inDST]] field of tm.\n else if (f in dateWidths) {\n switch (p) {\n case 'month':\n fv = resolveDateString(localeData, ca, 'months', f, tm['[[' + p + ']]']);\n break;\n\n case 'weekday':\n try {\n fv = resolveDateString(localeData, ca, 'days', f, tm['[[' + p + ']]']);\n // fv = resolveDateString(ca.days, f)[tm['[['+ p +']]']];\n } catch (e) {\n throw new Error('Could not find weekday data for locale ' + locale);\n }\n break;\n\n case 'timeZoneName':\n fv = ''; // ###TODO\n break;\n\n case 'era':\n try {\n fv = resolveDateString(localeData, ca, 'eras', f, tm['[[' + p + ']]']);\n } catch (e) {\n throw new Error('Could not find era data for locale ' + locale);\n }\n break;\n\n default:\n fv = tm['[[' + p + ']]'];\n }\n }\n // ix\n arrPush.call(result, {\n type: p,\n value: fv\n });\n // f.\n } else if (p === 'ampm') {\n // i.\n var _v = tm['[[hour]]'];\n // ii./iii.\n fv = resolveDateString(localeData, ca, 'dayPeriods', _v > 11 ? 'pm' : 'am', null);\n // iv.\n arrPush.call(result, {\n type: 'dayPeriod',\n value: fv\n });\n // g.\n } else {\n arrPush.call(result, {\n type: 'literal',\n value: pattern.substring(beginIndex, endIndex + 1)\n });\n }\n // h.\n index = endIndex + 1;\n // i.\n beginIndex = pattern.indexOf('{', index);\n }\n // 12.\n if (endIndex < pattern.length - 1) {\n arrPush.call(result, {\n type: 'literal',\n value: pattern.substr(endIndex + 1)\n });\n }\n // 13.\n return result;\n}\n\n/**\n * When the FormatDateTime abstract operation is called with arguments dateTimeFormat\n * (which must be an object initialized as a DateTimeFormat) and x (which must be a Number\n * value), it returns a String value representing x (interpreted as a time value as\n * specified in ES5, 15.9.1.1) according to the effective locale and the formatting\n * options of dateTimeFormat.\n */\nfunction FormatDateTime(dateTimeFormat, x) {\n var parts = CreateDateTimeParts(dateTimeFormat, x);\n var result = '';\n\n for (var i = 0; parts.length > i; i++) {\n var part = parts[i];\n result += part.value;\n }\n return result;\n}\n\nfunction FormatToPartsDateTime(dateTimeFormat, x) {\n var parts = CreateDateTimeParts(dateTimeFormat, x);\n var result = [];\n for (var i = 0; parts.length > i; i++) {\n var part = parts[i];\n result.push({\n type: part.type,\n value: part.value\n });\n }\n return result;\n}\n\n/**\n * When the ToLocalTime abstract operation is called with arguments date, calendar, and\n * timeZone, the following steps are taken:\n */\nfunction ToLocalTime(date, calendar, timeZone) {\n // 1. Apply calendrical calculations on date for the given calendar and time zone to\n // produce weekday, era, year, month, day, hour, minute, second, and inDST values.\n // The calculations should use best available information about the specified\n // calendar and time zone. If the calendar is \"gregory\", then the calculations must\n // match the algorithms specified in ES5, 15.9.1, except that calculations are not\n // bound by the restrictions on the use of best available information on time zones\n // for local time zone adjustment and daylight saving time adjustment imposed by\n // ES5, 15.9.1.7 and 15.9.1.8.\n // ###TODO###\n var d = new Date(date),\n m = 'get' + (timeZone || '');\n\n // 2. Return a Record with fields [[weekday]], [[era]], [[year]], [[month]], [[day]],\n // [[hour]], [[minute]], [[second]], and [[inDST]], each with the corresponding\n // calculated value.\n return new Record({\n '[[weekday]]': d[m + 'Day'](),\n '[[era]]': +(d[m + 'FullYear']() >= 0),\n '[[year]]': d[m + 'FullYear'](),\n '[[month]]': d[m + 'Month'](),\n '[[day]]': d[m + 'Date'](),\n '[[hour]]': d[m + 'Hours'](),\n '[[minute]]': d[m + 'Minutes'](),\n '[[second]]': d[m + 'Seconds'](),\n '[[inDST]]': false // ###TODO###\n });\n}\n\n/**\n * The function returns a new object whose properties and attributes are set as if\n * constructed by an object literal assigning to each of the following properties the\n * value of the corresponding internal property of this DateTimeFormat object (see 12.4):\n * locale, calendar, numberingSystem, timeZone, hour12, weekday, era, year, month, day,\n * hour, minute, second, and timeZoneName. Properties whose corresponding internal\n * properties are not present are not assigned.\n */\n/* 12.3.3 */defineProperty(Intl.DateTimeFormat.prototype, 'resolvedOptions', {\n writable: true,\n configurable: true,\n value: function value() {\n var prop = void 0,\n descs = new Record(),\n props = ['locale', 'calendar', 'numberingSystem', 'timeZone', 'hour12', 'weekday', 'era', 'year', 'month', 'day', 'hour', 'minute', 'second', 'timeZoneName'],\n internal = this !== null && babelHelpers$1[\"typeof\"](this) === 'object' && getInternalProperties(this);\n\n // Satisfy test 12.3_b\n if (!internal || !internal['[[initializedDateTimeFormat]]']) throw new TypeError('`this` value for resolvedOptions() is not an initialized Intl.DateTimeFormat object.');\n\n for (var i = 0, max = props.length; i < max; i++) {\n if (hop.call(internal, prop = '[[' + props[i] + ']]')) descs[props[i]] = { value: internal[prop], writable: true, configurable: true, enumerable: true };\n }\n\n return objCreate({}, descs);\n }\n});\n\nvar ls = Intl.__localeSensitiveProtos = {\n Number: {},\n Date: {}\n};\n\n/**\n * When the toLocaleString method is called with optional arguments locales and options,\n * the following steps are taken:\n */\n/* 13.2.1 */ls.Number.toLocaleString = function () {\n // Satisfy test 13.2.1_1\n if (Object.prototype.toString.call(this) !== '[object Number]') throw new TypeError('`this` value must be a number for Number.prototype.toLocaleString()');\n\n // 1. Let x be this Number value (as defined in ES5, 15.7.4).\n // 2. If locales is not provided, then let locales be undefined.\n // 3. If options is not provided, then let options be undefined.\n // 4. Let numberFormat be the result of creating a new object as if by the\n // expression new Intl.NumberFormat(locales, options) where\n // Intl.NumberFormat is the standard built-in constructor defined in 11.1.3.\n // 5. Return the result of calling the FormatNumber abstract operation\n // (defined in 11.3.2) with arguments numberFormat and x.\n return FormatNumber(new NumberFormatConstructor(arguments[0], arguments[1]), this);\n};\n\n/**\n * When the toLocaleString method is called with optional arguments locales and options,\n * the following steps are taken:\n */\n/* 13.3.1 */ls.Date.toLocaleString = function () {\n // Satisfy test 13.3.0_1\n if (Object.prototype.toString.call(this) !== '[object Date]') throw new TypeError('`this` value must be a Date instance for Date.prototype.toLocaleString()');\n\n // 1. Let x be this time value (as defined in ES5, 15.9.5).\n var x = +this;\n\n // 2. If x is NaN, then return \"Invalid Date\".\n if (isNaN(x)) return 'Invalid Date';\n\n // 3. If locales is not provided, then let locales be undefined.\n var locales = arguments[0];\n\n // 4. If options is not provided, then let options be undefined.\n var options = arguments[1];\n\n // 5. Let options be the result of calling the ToDateTimeOptions abstract\n // operation (defined in 12.1.1) with arguments options, \"any\", and \"all\".\n options = ToDateTimeOptions(options, 'any', 'all');\n\n // 6. Let dateTimeFormat be the result of creating a new object as if by the\n // expression new Intl.DateTimeFormat(locales, options) where\n // Intl.DateTimeFormat is the standard built-in constructor defined in 12.1.3.\n var dateTimeFormat = new DateTimeFormatConstructor(locales, options);\n\n // 7. Return the result of calling the FormatDateTime abstract operation (defined\n // in 12.3.2) with arguments dateTimeFormat and x.\n return FormatDateTime(dateTimeFormat, x);\n};\n\n/**\n * When the toLocaleDateString method is called with optional arguments locales and\n * options, the following steps are taken:\n */\n/* 13.3.2 */ls.Date.toLocaleDateString = function () {\n // Satisfy test 13.3.0_1\n if (Object.prototype.toString.call(this) !== '[object Date]') throw new TypeError('`this` value must be a Date instance for Date.prototype.toLocaleDateString()');\n\n // 1. Let x be this time value (as defined in ES5, 15.9.5).\n var x = +this;\n\n // 2. If x is NaN, then return \"Invalid Date\".\n if (isNaN(x)) return 'Invalid Date';\n\n // 3. If locales is not provided, then let locales be undefined.\n var locales = arguments[0],\n\n\n // 4. If options is not provided, then let options be undefined.\n options = arguments[1];\n\n // 5. Let options be the result of calling the ToDateTimeOptions abstract\n // operation (defined in 12.1.1) with arguments options, \"date\", and \"date\".\n options = ToDateTimeOptions(options, 'date', 'date');\n\n // 6. Let dateTimeFormat be the result of creating a new object as if by the\n // expression new Intl.DateTimeFormat(locales, options) where\n // Intl.DateTimeFormat is the standard built-in constructor defined in 12.1.3.\n var dateTimeFormat = new DateTimeFormatConstructor(locales, options);\n\n // 7. Return the result of calling the FormatDateTime abstract operation (defined\n // in 12.3.2) with arguments dateTimeFormat and x.\n return FormatDateTime(dateTimeFormat, x);\n};\n\n/**\n * When the toLocaleTimeString method is called with optional arguments locales and\n * options, the following steps are taken:\n */\n/* 13.3.3 */ls.Date.toLocaleTimeString = function () {\n // Satisfy test 13.3.0_1\n if (Object.prototype.toString.call(this) !== '[object Date]') throw new TypeError('`this` value must be a Date instance for Date.prototype.toLocaleTimeString()');\n\n // 1. Let x be this time value (as defined in ES5, 15.9.5).\n var x = +this;\n\n // 2. If x is NaN, then return \"Invalid Date\".\n if (isNaN(x)) return 'Invalid Date';\n\n // 3. If locales is not provided, then let locales be undefined.\n var locales = arguments[0];\n\n // 4. If options is not provided, then let options be undefined.\n var options = arguments[1];\n\n // 5. Let options be the result of calling the ToDateTimeOptions abstract\n // operation (defined in 12.1.1) with arguments options, \"time\", and \"time\".\n options = ToDateTimeOptions(options, 'time', 'time');\n\n // 6. Let dateTimeFormat be the result of creating a new object as if by the\n // expression new Intl.DateTimeFormat(locales, options) where\n // Intl.DateTimeFormat is the standard built-in constructor defined in 12.1.3.\n var dateTimeFormat = new DateTimeFormatConstructor(locales, options);\n\n // 7. Return the result of calling the FormatDateTime abstract operation (defined\n // in 12.3.2) with arguments dateTimeFormat and x.\n return FormatDateTime(dateTimeFormat, x);\n};\n\ndefineProperty(Intl, '__applyLocaleSensitivePrototypes', {\n writable: true,\n configurable: true,\n value: function value() {\n defineProperty(Number.prototype, 'toLocaleString', { writable: true, configurable: true, value: ls.Number.toLocaleString });\n // Need this here for IE 8, to avoid the _DontEnum_ bug\n defineProperty(Date.prototype, 'toLocaleString', { writable: true, configurable: true, value: ls.Date.toLocaleString });\n\n for (var k in ls.Date) {\n if (hop.call(ls.Date, k)) defineProperty(Date.prototype, k, { writable: true, configurable: true, value: ls.Date[k] });\n }\n }\n});\n\n/**\n * Can't really ship a single script with data for hundreds of locales, so we provide\n * this __addLocaleData method as a means for the developer to add the data on an\n * as-needed basis\n */\ndefineProperty(Intl, '__addLocaleData', {\n value: function value(data) {\n if (!IsStructurallyValidLanguageTag(data.locale)) throw new Error(\"Object passed doesn't identify itself with a valid language tag\");\n\n addLocaleData(data, data.locale);\n }\n});\n\nfunction addLocaleData(data, tag) {\n // Both NumberFormat and DateTimeFormat require number data, so throw if it isn't present\n if (!data.number) throw new Error(\"Object passed doesn't contain locale data for Intl.NumberFormat\");\n\n var locale = void 0,\n locales = [tag],\n parts = tag.split('-');\n\n // Create fallbacks for locale data with scripts, e.g. Latn, Hans, Vaii, etc\n if (parts.length > 2 && parts[1].length === 4) arrPush.call(locales, parts[0] + '-' + parts[2]);\n\n while (locale = arrShift.call(locales)) {\n // Add to NumberFormat internal properties as per 11.2.3\n arrPush.call(internals.NumberFormat['[[availableLocales]]'], locale);\n internals.NumberFormat['[[localeData]]'][locale] = data.number;\n\n // ...and DateTimeFormat internal properties as per 12.2.3\n if (data.date) {\n data.date.nu = data.number.nu;\n arrPush.call(internals.DateTimeFormat['[[availableLocales]]'], locale);\n internals.DateTimeFormat['[[localeData]]'][locale] = data.date;\n }\n }\n\n // If this is the first set of locale data added, make it the default\n if (defaultLocale === undefined) setDefaultLocale(tag);\n}\n\ndefineProperty(Intl, '__disableRegExpRestore', {\n value: function value() {\n internals.disableRegExpRestore = true;\n }\n});\n\nmodule.exports = Intl;","var arrayPush = require('./_arrayPush'),\n isArray = require('./isArray');\n\n/**\n * The base implementation of `getAllKeys` and `getAllKeysIn` which uses\n * `keysFunc` and `symbolsFunc` to get the enumerable property names and\n * symbols of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Function} keysFunc The function to get the keys of `object`.\n * @param {Function} symbolsFunc The function to get the symbols of `object`.\n * @returns {Array} Returns the array of property names and symbols.\n */\nfunction baseGetAllKeys(object, keysFunc, symbolsFunc) {\n var result = keysFunc(object);\n return isArray(object) ? result : arrayPush(result, symbolsFunc(object));\n}\n\nmodule.exports = baseGetAllKeys;\n","var global = require('../internals/global');\nvar fails = require('../internals/fails');\nvar uncurryThis = require('../internals/function-uncurry-this');\nvar toString = require('../internals/to-string');\nvar trim = require('../internals/string-trim').trim;\nvar whitespaces = require('../internals/whitespaces');\n\nvar charAt = uncurryThis(''.charAt);\nvar $parseFloat = global.parseFloat;\nvar Symbol = global.Symbol;\nvar ITERATOR = Symbol && Symbol.iterator;\nvar FORCED = 1 / $parseFloat(whitespaces + '-0') !== -Infinity\n // MS Edge 18- broken with boxed symbols\n || (ITERATOR && !fails(function () { $parseFloat(Object(ITERATOR)); }));\n\n// `parseFloat` method\n// https://tc39.es/ecma262/#sec-parsefloat-string\nmodule.exports = FORCED ? function parseFloat(string) {\n var trimmedString = trim(toString(string));\n var result = $parseFloat(trimmedString);\n return result === 0 && charAt(trimmedString, 0) == '-' ? -0 : result;\n} : $parseFloat;\n","var ListCache = require('./_ListCache'),\n stackClear = require('./_stackClear'),\n stackDelete = require('./_stackDelete'),\n stackGet = require('./_stackGet'),\n stackHas = require('./_stackHas'),\n stackSet = require('./_stackSet');\n\n/**\n * Creates a stack cache object to store key-value pairs.\n *\n * @private\n * @constructor\n * @param {Array} [entries] The key-value pairs to cache.\n */\nfunction Stack(entries) {\n var data = this.__data__ = new ListCache(entries);\n this.size = data.size;\n}\n\n// Add methods to `Stack`.\nStack.prototype.clear = stackClear;\nStack.prototype['delete'] = stackDelete;\nStack.prototype.get = stackGet;\nStack.prototype.has = stackHas;\nStack.prototype.set = stackSet;\n\nmodule.exports = Stack;\n","/** Used to stand-in for `undefined` hash values. */\nvar HASH_UNDEFINED = '__lodash_hash_undefined__';\n\n/**\n * Adds `value` to the array cache.\n *\n * @private\n * @name add\n * @memberOf SetCache\n * @alias push\n * @param {*} value The value to cache.\n * @returns {Object} Returns the cache instance.\n */\nfunction setCacheAdd(value) {\n this.__data__.set(value, HASH_UNDEFINED);\n return this;\n}\n\nmodule.exports = setCacheAdd;\n","var fails = require('../internals/fails');\n\n// Detect IE8's incomplete defineProperty implementation\nmodule.exports = !fails(function () {\n // eslint-disable-next-line es/no-object-defineproperty -- required for testing\n return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;\n});\n","'use strict';\n\nvar isAbsoluteURL = require('../helpers/isAbsoluteURL');\nvar combineURLs = require('../helpers/combineURLs');\n\n/**\n * Creates a new URL by combining the baseURL with the requestedURL,\n * only when the requestedURL is not already an absolute URL.\n * If the requestURL is absolute, this function returns the requestedURL untouched.\n *\n * @param {string} baseURL The base URL\n * @param {string} requestedURL Absolute or relative URL to combine\n * @returns {string} The combined full path\n */\nmodule.exports = function buildFullPath(baseURL, requestedURL) {\n if (baseURL && !isAbsoluteURL(requestedURL)) {\n return combineURLs(baseURL, requestedURL);\n }\n return requestedURL;\n};\n","/**\n * Gets the stack value for `key`.\n *\n * @private\n * @name get\n * @memberOf Stack\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction stackGet(key) {\n return this.__data__.get(key);\n}\n\nmodule.exports = stackGet;\n","/**\n * A specialized version of `_.forEach` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns `array`.\n */\nfunction arrayEach(array, iteratee) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n while (++index < length) {\n if (iteratee(array[index], index, array) === false) {\n break;\n }\n }\n return array;\n}\n\nmodule.exports = arrayEach;\n","'use strict';\nvar toObject = require('../internals/to-object');\nvar toAbsoluteIndex = require('../internals/to-absolute-index');\nvar lengthOfArrayLike = require('../internals/length-of-array-like');\n\n// `Array.prototype.fill` method implementation\n// https://tc39.es/ecma262/#sec-array.prototype.fill\nmodule.exports = function fill(value /* , start = 0, end = @length */) {\n var O = toObject(this);\n var length = lengthOfArrayLike(O);\n var argumentsLength = arguments.length;\n var index = toAbsoluteIndex(argumentsLength > 1 ? arguments[1] : undefined, length);\n var end = argumentsLength > 2 ? arguments[2] : undefined;\n var endPos = end === undefined ? length : toAbsoluteIndex(end, length);\n while (endPos > index) O[index++] = value;\n return O;\n};\n","var isObject = require('../internals/is-object');\n\nvar $String = String;\nvar $TypeError = TypeError;\n\n// `Assert: Type(argument) is Object`\nmodule.exports = function (argument) {\n if (isObject(argument)) return argument;\n throw $TypeError($String(argument) + ' is not an object');\n};\n","var baseGet = require('./_baseGet'),\n baseSlice = require('./_baseSlice');\n\n/**\n * Gets the parent value at `path` of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {Array} path The path to get the parent value of.\n * @returns {*} Returns the parent value.\n */\nfunction parent(object, path) {\n return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));\n}\n\nmodule.exports = parent;\n","import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet';\nimport { IStyleBase, IStyle } from './IStyle';\nimport { IStyleFunctionOrObject } from './IStyleFunction';\nimport { ObjectOnly } from './ObjectOnly';\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet - The first style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet: TStyleSet | false | null | undefined,\n): IConcatenatedStyleSet>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n): IConcatenatedStyleSet & ObjectOnly>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n styleSet3: TStyleSet3 | false | null | undefined,\n): IConcatenatedStyleSet & ObjectOnly & ObjectOnly>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n styleSet3: TStyleSet3 | false | null | undefined,\n styleSet4: TStyleSet4 | false | null | undefined,\n): IConcatenatedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n * @param styleSet5 - The fifth set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n styleSet3: TStyleSet3 | false | null | undefined,\n styleSet4: TStyleSet4 | false | null | undefined,\n styleSet5: TStyleSet5 | false | null | undefined,\n): IConcatenatedStyleSet<\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSet1 - The first style set to be concatenated.\n * @param styleSet2 - The second style set to be concatenated.\n * @param styleSet3 - The third style set to be concatenated.\n * @param styleSet4 - The fourth style set to be concatenated.\n * @param styleSet5 - The fifth set to be concatenated.\n * @param styleSet6 - The sixth set to be concatenated.\n */\nexport function concatStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n styleSet3: TStyleSet3 | false | null | undefined,\n styleSet4: TStyleSet4 | false | null | undefined,\n styleSet5: TStyleSet5 | false | null | undefined,\n styleSet6: TStyleSet6 | false | null | undefined,\n): IConcatenatedStyleSet<\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly &\n ObjectOnly\n>;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets(...styleSets: (IStyleSet | false | null | undefined)[]): IConcatenatedStyleSet;\n\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets(...styleSets: (IStyleSet | false | null | undefined)[]): IConcatenatedStyleSet {\n if (styleSets && styleSets.length === 1 && styleSets[0] && !(styleSets[0] as IStyleSet).subComponentStyles) {\n return styleSets[0] as IConcatenatedStyleSet;\n }\n\n const mergedSet: IConcatenatedStyleSet = {};\n\n // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.\n const workingSubcomponentStyles: { [key: string]: Array> } = {};\n\n for (const currentSet of styleSets) {\n if (currentSet) {\n for (const prop in currentSet) {\n if (currentSet.hasOwnProperty(prop)) {\n if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {\n // subcomponent styles - style functions or objects\n\n const currentComponentStyles = currentSet.subComponentStyles;\n for (const subCompProp in currentComponentStyles) {\n if (currentComponentStyles.hasOwnProperty(subCompProp)) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);\n } else {\n workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];\n }\n }\n }\n\n continue;\n }\n\n // the as any casts below is a workaround for ts 2.8.\n // todo: remove cast to any in ts 2.9.\n const mergedValue: IStyle = (mergedSet as any)[prop];\n const currentValue = (currentSet as any)[prop];\n\n if (mergedValue === undefined) {\n (mergedSet as any)[prop] = currentValue;\n } else {\n (mergedSet as any)[prop] = [\n // https://github.com/Microsoft/TypeScript/issues/25474\n ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue as IStyleBase]),\n ...(Array.isArray(currentValue) ? currentValue : [currentValue as IStyleBase]),\n ];\n }\n }\n }\n }\n }\n\n if (Object.keys(workingSubcomponentStyles).length > 0) {\n mergedSet.subComponentStyles = {};\n const mergedSubStyles = mergedSet.subComponentStyles;\n\n // now we process the subcomponent styles if there are any\n for (const subCompProp in workingSubcomponentStyles) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n const workingSet = workingSubcomponentStyles[subCompProp];\n mergedSubStyles[subCompProp] = (styleProps: any) => {\n return concatStyleSets(\n ...workingSet.map((styleFunctionOrObject: IStyleFunctionOrObject) =>\n typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject,\n ),\n );\n };\n }\n }\n }\n\n return mergedSet;\n}\n","export let _isSSR = false;\n\n/**\n * Helper to set ssr mode to simulate no window object returned from getWindow helper.\n *\n * @public\n */\nexport function setSSR(isEnabled: boolean): void {\n _isSSR = isEnabled;\n}\n","import { _isSSR } from './setSSR';\n\nlet _window: Window | undefined = undefined;\n\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n} catch (e) {\n /* no-op */\n}\n\n/**\n * Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n *\n * @public\n */\nexport function getWindow(rootElement?: Element | null): Window | undefined {\n if (_isSSR || typeof _window === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Storing global state in local module variables has issues when more than one copy\n * if the module gets loaded on the page (due to a bundling error or simply by consuming\n * a prebundled script.)\n *\n * This file contains helpers to deal with the getting and setting local state, and allows\n * callers to get called back when it mutates.\n */\n\nconst GLOBAL_SETTINGS_PROP_NAME = '__globalSettings__';\nconst CALLBACK_STATE_PROP_NAME = '__callbacks__';\n\nlet _counter = 0;\n\n/**\n * Change description used for change callbacks in GlobalSettings.\n *\n * @public\n * {@docCategory IChangeDescription}\n */\nexport interface IChangeDescription {\n key: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n oldValue: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any;\n}\n\n/**\n * Change event callback.\n *\n * @public\n * {@docCategory IChangeEventCallback}\n */\nexport interface IChangeEventCallback {\n __id__?: string;\n (changeDescription?: IChangeDescription): void;\n}\n\n/**\n * Global settings helper, which stores settings in the global (window) namespace.\n * If window is not provided, it will store settings in module scope. Provides a\n * way to observe changes as well when their values change.\n *\n * @public\n * {@docCategory GlobalSettings}\n */\nexport class GlobalSettings {\n public static getValue(key: string, defaultValue?: T | (() => T)): T {\n const globalSettings = _getGlobalSettings();\n\n if (globalSettings[key] === undefined) {\n globalSettings[key] = typeof defaultValue === 'function' ? (defaultValue as Function)() : defaultValue;\n }\n\n return globalSettings[key];\n }\n\n public static setValue(key: string, value: T): T {\n const globalSettings = _getGlobalSettings();\n const callbacks = globalSettings[CALLBACK_STATE_PROP_NAME];\n let oldValue = globalSettings[key];\n\n if (value !== oldValue) {\n globalSettings[key] = value;\n\n let changeDescription = {\n oldValue,\n value,\n key,\n };\n\n for (let id in callbacks) {\n if (callbacks.hasOwnProperty(id)) {\n callbacks[id](changeDescription);\n }\n }\n }\n\n return value;\n }\n\n public static addChangeListener(cb: IChangeEventCallback): void {\n // Note: we use generated ids on the callbacks to create a map of the callbacks, which optimizes removal.\n // (It's faster to delete a key than it is to look up the index of an object and splice an array.)\n let id = cb.__id__;\n const callbacks = _getCallbacks();\n\n if (!id) {\n id = cb.__id__ = String(_counter++);\n }\n\n callbacks[id] = cb;\n }\n\n public static removeChangeListener(cb: IChangeEventCallback): void {\n const callbacks = _getCallbacks();\n delete callbacks[cb.__id__ as string];\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _getGlobalSettings(): { [key: string]: any } {\n const win = getWindow();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const globalObj: { [key: string]: any } = win || {};\n\n if (!globalObj[GLOBAL_SETTINGS_PROP_NAME]) {\n globalObj[GLOBAL_SETTINGS_PROP_NAME] = {\n [CALLBACK_STATE_PROP_NAME]: {},\n };\n }\n\n return globalObj[GLOBAL_SETTINGS_PROP_NAME];\n}\n\nfunction _getCallbacks(): { [key: string]: () => void } {\n const globalSettings = _getGlobalSettings();\n return globalSettings[CALLBACK_STATE_PROP_NAME];\n}\n","import { GlobalSettings } from '../GlobalSettings';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ISettings = { [key: string]: any };\nexport type ISettingsFunction = (settings: ISettings) => ISettings;\n\n/**\n * @deprecated Use ISettings.\n */\nexport type Settings = ISettings;\n\n/**\n * @deprecated Use ISettingsFunction.\n */\nexport type SettingsFunction = ISettingsFunction;\n\nexport interface ICustomizations {\n settings: ISettings;\n scopedSettings: { [key: string]: ISettings };\n inCustomizerContext?: boolean;\n}\n\nconst CustomizationsGlobalKey = 'customizations';\nconst NO_CUSTOMIZATIONS = { settings: {}, scopedSettings: {}, inCustomizerContext: false };\n\nlet _allSettings = GlobalSettings.getValue(CustomizationsGlobalKey, {\n settings: {},\n scopedSettings: {},\n inCustomizerContext: false,\n});\n\nlet _events: (() => void)[] = [];\n\nexport class Customizations {\n private static _suppressUpdates: boolean;\n\n public static reset(): void {\n _allSettings.settings = {};\n _allSettings.scopedSettings = {};\n }\n\n /** Apply global Customization settings.\n * @example Customizations.applySettings(\\{ theme: \\{...\\} \\});\n */\n public static applySettings(settings: ISettings): void {\n _allSettings.settings = { ..._allSettings.settings, ...settings };\n Customizations._raiseChange();\n }\n\n /** Apply Customizations to a particular named scope, like a component.\n * @example Customizations.applyScopedSettings('Nav', \\{ styles: () =\\> \\{\\} \\});\n */\n public static applyScopedSettings(scopeName: string, settings: ISettings): void {\n _allSettings.scopedSettings[scopeName] = { ..._allSettings.scopedSettings[scopeName], ...settings };\n Customizations._raiseChange();\n }\n\n public static getSettings(\n properties: string[],\n scopeName?: string,\n localSettings: ICustomizations = NO_CUSTOMIZATIONS,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ): any {\n const settings: ISettings = {};\n const localScopedSettings = (scopeName && localSettings.scopedSettings[scopeName]) || {};\n const globalScopedSettings = (scopeName && _allSettings.scopedSettings[scopeName]) || {};\n\n for (let property of properties) {\n settings[property] =\n localScopedSettings[property] ||\n localSettings.settings[property] ||\n globalScopedSettings[property] ||\n _allSettings.settings[property];\n }\n\n return settings;\n }\n\n /** Used to run some code that sets Customizations without triggering an update until the end.\n * Useful for applying Customizations that don't affect anything currently rendered, or for\n * applying many customizations at once.\n * @param suppressUpdate - Do not raise the change event at the end, preventing all updates\n */\n public static applyBatchedUpdates(code: () => void, suppressUpdate?: boolean): void {\n Customizations._suppressUpdates = true;\n try {\n code();\n } catch {\n /* do nothing */\n }\n Customizations._suppressUpdates = false;\n if (!suppressUpdate) {\n Customizations._raiseChange();\n }\n }\n\n public static observe(onChange: () => void): void {\n _events.push(onChange);\n }\n\n public static unobserve(onChange: () => void): void {\n _events = _events.filter((cb: () => void) => cb !== onChange);\n }\n\n private static _raiseChange(): void {\n if (!Customizations._suppressUpdates) {\n _events.forEach((cb: () => void) => cb());\n }\n }\n}\n","import * as React from 'react';\nimport { ICustomizations } from './Customizations';\n\nexport interface ICustomizerContext {\n customizations: ICustomizations;\n}\n\nexport const CustomizerContext = React.createContext({\n customizations: {\n inCustomizerContext: false,\n settings: {},\n scopedSettings: {},\n },\n});\n","import * as React from 'react';\nimport { ISettings, Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\n\n/**\n * Hook to get Customizations settings from Customizations singleton or CustomizerContext.\n * It will trigger component state update on settings change observed.\n */\nexport function useCustomizationSettings(properties: string[], scopeName?: string): ISettings {\n const forceUpdate = useForceUpdate();\n const { customizations } = React.useContext(CustomizerContext);\n const { inCustomizerContext } = customizations;\n React.useEffect(() => {\n if (!inCustomizerContext) {\n Customizations.observe(forceUpdate);\n }\n return () => {\n if (!inCustomizerContext) {\n Customizations.unobserve(forceUpdate);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- exclude forceUpdate\n }, [inCustomizerContext]);\n\n return Customizations.getSettings(properties, scopeName, customizations);\n}\n\nfunction useForceUpdate() {\n const [, setValue] = React.useState(0);\n return () => setValue(value => ++value);\n}\n","import * as React from 'react';\nimport { IStyleSet, IStyleFunctionOrObject, concatStyleSetsWithProps } from '@uifabric/merge-styles';\nimport { useCustomizationSettings } from './customizations/useCustomizationSettings';\n\nexport interface IPropsWithStyles> {\n styles?: IStyleFunctionOrObject;\n}\n\nexport interface ICustomizableProps {\n /**\n * Name of scope, which can be targeted using the Customizer.\n */\n scope: string;\n\n /**\n * List of fields which can be customized.\n * @defaultvalue [ 'theme', 'styles' ]\n */\n fields?: string[];\n}\n\nconst DefaultFields = ['theme', 'styles'];\n\nexport type StyleFunction = IStyleFunctionOrObject & {\n /** Cache for all style functions. */\n __cachedInputs__: (IStyleFunctionOrObject | undefined)[];\n\n /** True if no styles prop or styles from Customizer is passed to wrapped component. */\n __noStyleOverride__: boolean;\n};\n\n/**\n * The styled HOC wrapper allows you to create a functional wrapper around a given component which will resolve\n * getStyles functional props, and mix customized props passed in using concatStyleSets.\n *\n * @example\n * ```tsx\n * export const Toggle = styled(\n * ToggleBase,\n * props => ({ root: { background: 'red' }})\n * );\n * ```\n * @param Component - The unstyled base component to render, which receives styles.\n * @param baseStyles - The styles which should be curried with the component.\n * @param getProps - A helper which provides default props.\n * @param customizable - An object which defines which props can be customized using the Customizer.\n * @param pure - A boolean indicating if the component should avoid re-rendering when props haven't changed.\n * Note that pure should not be used on components which allow children, or take in complex objects or\n * arrays as props which could mutate on every render.\n */\nexport function styled<\n TComponentProps extends IPropsWithStyles,\n TStyleProps,\n TStyleSet extends IStyleSet\n>(\n Component: React.ComponentClass | React.FunctionComponent,\n baseStyles: IStyleFunctionOrObject,\n getProps?: (props: TComponentProps) => Partial,\n customizable?: ICustomizableProps,\n pure?: boolean,\n): React.FunctionComponent;\nexport function styled<\n TComponentProps extends IPropsWithStyles & React.RefAttributes,\n TStyleProps,\n TStyleSet extends IStyleSet,\n TRef = unknown\n>(\n Component: React.ComponentClass | React.FunctionComponent,\n baseStyles: IStyleFunctionOrObject,\n getProps?: (props: TComponentProps) => Partial,\n customizable?: ICustomizableProps,\n pure?: boolean,\n): React.ForwardRefExoticComponent & React.RefAttributes>;\nexport function styled<\n TComponentProps extends IPropsWithStyles & React.RefAttributes,\n TStyleProps,\n TStyleSet extends IStyleSet,\n TRef = unknown\n>(\n Component: React.ComponentClass | React.FunctionComponent,\n baseStyles: IStyleFunctionOrObject,\n getProps?: (props: TComponentProps) => Partial,\n customizable?: ICustomizableProps,\n pure?: boolean,\n) {\n customizable = customizable || { scope: '', fields: undefined };\n\n const { scope, fields = DefaultFields } = customizable;\n\n const Wrapped = React.forwardRef((props: TComponentProps, forwardedRef: React.Ref) => {\n const styles = React.useRef>();\n\n const settings = useCustomizationSettings(fields, scope);\n const { styles: customizedStyles, dir, ...rest } = settings;\n const additionalProps = getProps ? getProps(props) : undefined;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const cache = (styles.current && (styles.current as any).__cachedInputs__) || [];\n if (!styles.current || customizedStyles !== cache[1] || props.styles !== cache[2]) {\n // Using styled components as the Component arg will result in nested styling arrays.\n const concatenatedStyles: IStyleFunctionOrObject = (styleProps: TStyleProps) =>\n concatStyleSetsWithProps(styleProps, baseStyles, customizedStyles, props.styles);\n\n // The __cachedInputs__ array is attached to the function and consumed by the\n // classNamesFunction as a list of keys to include for memoizing classnames.\n (concatenatedStyles as StyleFunction).__cachedInputs__ = [\n baseStyles,\n customizedStyles,\n props.styles,\n ];\n\n (concatenatedStyles as StyleFunction).__noStyleOverride__ =\n !customizedStyles && !props.styles;\n\n styles.current = concatenatedStyles as StyleFunction;\n }\n\n return ;\n });\n // Function.prototype.name is an ES6 feature, so the cast to any is required until we're\n // able to drop IE 11 support and compile with ES6 libs\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Wrapped.displayName = `Styled${Component.displayName || (Component as any).name}`;\n\n // This preserves backwards compatibility.\n const pureComponent = pure ? React.memo(Wrapped) : Wrapped;\n // Check if the wrapper has a displayName after it has been memoized. Then assign it to the pure component.\n if (Wrapped.displayName) {\n pureComponent.displayName = Wrapped.displayName;\n }\n\n return pureComponent;\n}\n","import { IStyle } from './IStyle';\n\nexport const InjectionMode = {\n /**\n * Avoids style injection, use getRules() to read the styles.\n */\n none: 0 as 0,\n\n /**\n * Inserts rules using the insertRule api.\n */\n insertNode: 1 as 1,\n\n /**\n * Appends rules using appendChild.\n */\n appendChild: 2 as 2,\n};\n\nexport type InjectionMode = typeof InjectionMode[keyof typeof InjectionMode];\n\n/**\n * CSP settings for the stylesheet\n */\nexport interface ICSPSettings {\n /**\n * Nonce to inject into script tag\n */\n nonce?: string;\n}\n\n/**\n * Stylesheet config.\n *\n * @public\n */\nexport interface IStyleSheetConfig {\n /**\n * Injection mode for how rules are inserted.\n */\n injectionMode?: InjectionMode;\n\n /**\n * Default 'displayName' to use for a className.\n * @defaultvalue 'css'\n */\n defaultPrefix?: string;\n\n /**\n * Defines the default direction of rules for auto-rtlifying things.\n * While typically this is represented as a DIR attribute in the markup,\n * the DIR is not enough to control whether padding goes on the left or\n * right. Use this to set the default direction when rules are registered.\n */\n rtl?: boolean;\n\n /**\n * Default 'namespace' to attach before the className.\n */\n namespace?: string;\n\n /**\n * CSP settings\n */\n cspSettings?: ICSPSettings;\n\n /**\n * Callback executed when a rule is inserted.\n */\n onInsertRule?: (rule: string) => void;\n\n /**\n * Initial value for classnames cache. Key is serialized css rules associated with a classname.\n */\n classNameCache?: { [key: string]: string };\n}\n\nconst STYLESHEET_SETTING = '__stylesheet__';\n/**\n * MSIE 11 doesn't cascade styles based on DOM ordering, but rather on the order that each style node\n * is created. As such, to maintain consistent priority, IE11 should reuse a single style node.\n */\nconst REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent);\n\nlet _global: { [key: string]: any } = {};\n\n// Grab window.\ntry {\n _global = window;\n} catch {\n /* leave as blank object */\n}\n\nlet _stylesheet: Stylesheet;\n\n/**\n * Represents the state of styles registered in the page. Abstracts\n * the surface for adding styles to the stylesheet, exposes helpers\n * for reading the styles registered in server rendered scenarios.\n *\n * @public\n */\nexport class Stylesheet {\n private _lastStyleElement?: HTMLStyleElement;\n private _styleElement?: HTMLStyleElement;\n private _rules: string[] = [];\n private _preservedRules: string[] = [];\n private _config: IStyleSheetConfig;\n private _rulesToInsert: string[] = [];\n private _counter = 0;\n private _keyToClassName: { [key: string]: string } = {};\n private _onResetCallbacks: (() => void)[] = [];\n\n private _classNameToArgs: { [key: string]: { args: any; rules: string[] } } = {};\n\n /**\n * Gets the singleton instance.\n */\n public static getInstance(): Stylesheet {\n _stylesheet = _global[STYLESHEET_SETTING] as Stylesheet;\n\n if (!_stylesheet || (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== document)) {\n const fabricConfig = _global?.FabricConfig || {};\n\n _stylesheet = _global[STYLESHEET_SETTING] = new Stylesheet(fabricConfig.mergeStyles);\n }\n\n return _stylesheet;\n }\n\n constructor(config?: IStyleSheetConfig) {\n this._config = {\n injectionMode: InjectionMode.insertNode,\n defaultPrefix: 'css',\n namespace: undefined,\n cspSettings: undefined,\n ...config,\n };\n\n this._keyToClassName = this._config.classNameCache || {};\n }\n\n /**\n * Configures the stylesheet.\n */\n public setConfig(config?: IStyleSheetConfig): void {\n this._config = {\n ...this._config,\n ...config,\n };\n }\n\n /**\n * Configures a reset callback.\n *\n * @param callback - A callback which will be called when the Stylesheet is reset.\n */\n public onReset(callback: () => void): void {\n this._onResetCallbacks.push(callback);\n }\n\n /**\n * Generates a unique classname.\n *\n * @param displayName - Optional value to use as a prefix.\n */\n public getClassName(displayName?: string): string {\n const { namespace } = this._config;\n const prefix = displayName || this._config.defaultPrefix;\n\n return `${namespace ? namespace + '-' : ''}${prefix}-${this._counter++}`;\n }\n\n /**\n * Used internally to cache information about a class which was\n * registered with the stylesheet.\n */\n public cacheClassName(className: string, key: string, args: IStyle[], rules: string[]): void {\n this._keyToClassName[key] = className;\n this._classNameToArgs[className] = {\n args,\n rules,\n };\n }\n\n /**\n * Gets the appropriate classname given a key which was previously\n * registered using cacheClassName.\n */\n public classNameFromKey(key: string): string | undefined {\n return this._keyToClassName[key];\n }\n\n /**\n * Gets all classnames cache with the stylesheet.\n */\n public getClassNameCache(): { [key: string]: string } {\n return this._keyToClassName;\n }\n\n /**\n * Gets the arguments associated with a given classname which was\n * previously registered using cacheClassName.\n */\n public argsFromClassName(className: string): IStyle[] | undefined {\n const entry = this._classNameToArgs[className];\n\n return entry && entry.args;\n }\n\n /**\n * Gets the arguments associated with a given classname which was\n * previously registered using cacheClassName.\n */\n public insertedRulesFromClassName(className: string): string[] | undefined {\n const entry = this._classNameToArgs[className];\n\n return entry && entry.rules;\n }\n\n /**\n * Inserts a css rule into the stylesheet.\n * @param preserve - Preserves the rule beyond a reset boundary.\n */\n public insertRule(rule: string, preserve?: boolean): void {\n const { injectionMode } = this._config;\n const element = injectionMode !== InjectionMode.none ? this._getStyleElement() : undefined;\n\n if (preserve) {\n this._preservedRules.push(rule);\n }\n\n if (element) {\n switch (this._config.injectionMode) {\n case InjectionMode.insertNode:\n const { sheet } = element!;\n\n try {\n (sheet as CSSStyleSheet).insertRule(rule, (sheet as CSSStyleSheet).cssRules.length);\n } catch (e) {\n // The browser will throw exceptions on unsupported rules (such as a moz prefix in webkit.)\n // We need to swallow the exceptions for this scenario, otherwise we'd need to filter\n // which could be slower and bulkier.\n }\n break;\n\n case InjectionMode.appendChild:\n element.appendChild(document.createTextNode(rule));\n break;\n }\n } else {\n this._rules.push(rule);\n }\n\n if (this._config.onInsertRule) {\n this._config.onInsertRule(rule);\n }\n }\n\n /**\n * Gets all rules registered with the stylesheet; only valid when\n * using InsertionMode.none.\n */\n public getRules(includePreservedRules?: boolean): string {\n return (\n (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('') + this._rulesToInsert.join('')\n );\n }\n\n /**\n * Resets the internal state of the stylesheet. Only used in server\n * rendered scenarios where we're using InsertionMode.none.\n */\n public reset(): void {\n this._rules = [];\n this._rulesToInsert = [];\n this._counter = 0;\n this._classNameToArgs = {};\n this._keyToClassName = {};\n\n this._onResetCallbacks.forEach((callback: () => void) => callback());\n }\n\n // Forces the regeneration of incoming styles without totally resetting the stylesheet.\n public resetKeys(): void {\n this._keyToClassName = {};\n }\n\n private _getStyleElement(): HTMLStyleElement | undefined {\n if (!this._styleElement && typeof document !== 'undefined') {\n this._styleElement = this._createStyleElement();\n\n if (!REUSE_STYLE_NODE) {\n // Reset the style element on the next frame.\n window.requestAnimationFrame(() => {\n this._styleElement = undefined;\n });\n }\n }\n return this._styleElement;\n }\n\n private _createStyleElement(): HTMLStyleElement {\n const head: HTMLHeadElement = document.head;\n const styleElement = document.createElement('style');\n let nodeToInsertBefore: Node | null = null;\n\n styleElement.setAttribute('data-merge-styles', 'true');\n\n const { cspSettings } = this._config;\n if (cspSettings) {\n if (cspSettings.nonce) {\n styleElement.setAttribute('nonce', cspSettings.nonce);\n }\n }\n if (this._lastStyleElement) {\n // If the `nextElementSibling` is null, then the insertBefore will act as a regular append.\n // https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#Syntax\n nodeToInsertBefore = this._lastStyleElement.nextElementSibling;\n } else {\n const placeholderStyleTag: Element | null = this._findPlaceholderStyleTag();\n\n if (placeholderStyleTag) {\n nodeToInsertBefore = placeholderStyleTag.nextElementSibling;\n } else {\n nodeToInsertBefore = head.childNodes[0];\n }\n }\n\n head!.insertBefore(styleElement, head!.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);\n this._lastStyleElement = styleElement;\n\n return styleElement;\n }\n\n private _findPlaceholderStyleTag(): Element | null {\n const head: HTMLHeadElement = document.head;\n if (head) {\n return head.querySelector('style[data-merge-styles]');\n }\n return null;\n }\n}\n","import { IStyleOptions } from './IStyleOptions';\n\n/**\n * Sets the current RTL value.\n */\nexport function setRTL(isRTL: boolean): void {\n if (_rtl !== isRTL) {\n _rtl = isRTL;\n }\n}\n\n/**\n * Gets the current RTL value.\n */\nexport function getRTL(): boolean {\n if (_rtl === undefined) {\n _rtl =\n typeof document !== 'undefined' &&\n !!document.documentElement &&\n document.documentElement.getAttribute('dir') === 'rtl';\n }\n return _rtl;\n}\n\n// This has been split into 2 lines because it was working in Fabric due to the code being transpiled to es5, so this\n// was converted to var while not working in Fluent that uses babel to transpile the code to be es6-like. Splitting the\n// logic into two lines, however, allows it to work in both scenarios.\nlet _rtl: boolean;\n_rtl = getRTL();\n\nexport function getStyleOptions(): IStyleOptions {\n return {\n rtl: getRTL(),\n };\n}\n","import { IStyle, IStyleBaseArray } from './IStyle';\nimport { Stylesheet } from './Stylesheet';\n\n/**\n * Separates the classes and style objects. Any classes that are pre-registered\n * args are auto expanded into objects.\n */\nexport function extractStyleParts(\n ...args: (IStyle | IStyle[] | false | null | undefined)[]\n): { classes: string[]; objects: IStyleBaseArray } {\n const classes: string[] = [];\n const objects: {}[] = [];\n const stylesheet = Stylesheet.getInstance();\n\n function _processArgs(argsList: (IStyle | IStyle[])[]): void {\n for (const arg of argsList) {\n if (arg) {\n if (typeof arg === 'string') {\n if (arg.indexOf(' ') >= 0) {\n _processArgs(arg.split(' '));\n } else {\n const translatedArgs = stylesheet.argsFromClassName(arg);\n\n if (translatedArgs) {\n _processArgs(translatedArgs);\n } else {\n // Avoid adding the same class twice.\n if (classes.indexOf(arg) === -1) {\n classes.push(arg);\n }\n }\n }\n } else if (Array.isArray(arg)) {\n _processArgs(arg);\n } else if (typeof arg === 'object') {\n objects.push(arg);\n }\n }\n }\n }\n\n _processArgs(args);\n\n return {\n classes,\n objects,\n };\n}\n","const rules: { [key: string]: string } = {};\n\nexport function kebabRules(rulePairs: (string | number)[], index: number): void {\n const rule: string = rulePairs[index] as string;\n\n if (rule.charAt(0) !== '-') {\n rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();\n }\n}\n","export interface IVendorSettings {\n isWebkit?: boolean;\n isMoz?: boolean;\n isMs?: boolean;\n isOpera?: boolean;\n}\n\nlet _vendorSettings: IVendorSettings | undefined;\n\nexport function getVendorSettings(): IVendorSettings {\n if (!_vendorSettings) {\n const doc = typeof document !== 'undefined' ? document : undefined;\n const nav = typeof navigator !== 'undefined' ? navigator : undefined;\n const userAgent = nav?.userAgent?.toLowerCase();\n\n if (!doc) {\n _vendorSettings = {\n isWebkit: true,\n isMoz: true,\n isOpera: true,\n isMs: true,\n };\n } else {\n _vendorSettings = {\n isWebkit: !!(doc && 'WebkitAppearance' in doc.documentElement.style),\n isMoz: !!(userAgent && userAgent.indexOf('firefox') > -1),\n isOpera: !!(userAgent && userAgent.indexOf('opera') > -1),\n isMs: !!(nav && (/rv:11.0/i.test(nav.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent))),\n };\n }\n }\n\n return _vendorSettings;\n}\n\n/**\n * Sets the vendor settings for prefixing and vendor specific operations.\n */\nexport function setVendorSettings(vendorSettings?: IVendorSettings): void {\n _vendorSettings = vendorSettings;\n}\n","import { getVendorSettings } from '../getVendorSettings';\n\nconst autoPrefixNames: { [key: string]: number } = {\n 'user-select': 1,\n};\n\nexport function prefixRules(rulePairs: (string | number)[], index: number): void {\n const vendorSettings = getVendorSettings();\n\n const name = rulePairs[index];\n\n if (autoPrefixNames[name]) {\n const value = rulePairs[index + 1];\n\n if (autoPrefixNames[name]) {\n if (vendorSettings.isWebkit) {\n rulePairs.push('-webkit-' + name, value);\n }\n if (vendorSettings.isMoz) {\n rulePairs.push('-moz-' + name, value);\n }\n if (vendorSettings.isMs) {\n rulePairs.push('-ms-' + name, value);\n }\n if (vendorSettings.isOpera) {\n rulePairs.push('-o-' + name, value);\n }\n }\n }\n}\n","const NON_PIXEL_NUMBER_PROPS = [\n 'column-count',\n 'font-weight',\n 'flex',\n 'flex-grow',\n 'flex-shrink',\n 'fill-opacity',\n 'opacity',\n 'order',\n 'z-index',\n 'zoom',\n];\n\nexport function provideUnits(rulePairs: (string | number)[], index: number): void {\n const name = rulePairs[index] as string;\n const value = rulePairs[index + 1];\n\n if (typeof value === 'number') {\n const isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name as string) > -1;\n const isVariableOrPrefixed = name.indexOf('--') > -1;\n const unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';\n\n rulePairs[index + 1] = `${value}${unit}`;\n }\n}\n","import { IStyleOptions } from '../IStyleOptions';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst NO_FLIP = '@noflip';\nconst NAME_REPLACEMENTS: { [key: string]: string } = {\n [LEFT]: RIGHT,\n [RIGHT]: LEFT,\n};\nconst VALUE_REPLACEMENTS: { [key: string]: string } = {\n 'w-resize': 'e-resize',\n 'sw-resize': 'se-resize',\n 'nw-resize': 'ne-resize',\n};\n\n/**\n * RTLifies the rulePair in the array at the current index. This mutates the array for performance\n * reasons.\n */\nexport function rtlifyRules(options: IStyleOptions, rulePairs: (string | number)[], index: number): void {\n if (options.rtl) {\n const name = rulePairs[index] as string;\n\n if (!name) {\n return;\n }\n\n const value = rulePairs[index + 1] as string;\n\n if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {\n rulePairs[index + 1] = value.replace(/\\s*(?:\\/\\*\\s*)?\\@noflip\\b(?:\\s*\\*\\/)?\\s*?/g, '');\n } else if (name.indexOf(LEFT) >= 0) {\n rulePairs[index] = name.replace(LEFT, RIGHT);\n } else if (name.indexOf(RIGHT) >= 0) {\n rulePairs[index] = name.replace(RIGHT, LEFT);\n } else if (String(value).indexOf(LEFT) >= 0) {\n rulePairs[index + 1] = value.replace(LEFT, RIGHT);\n } else if (String(value).indexOf(RIGHT) >= 0) {\n rulePairs[index + 1] = value.replace(RIGHT, LEFT);\n } else if (NAME_REPLACEMENTS[name]) {\n rulePairs[index] = NAME_REPLACEMENTS[name];\n } else if (VALUE_REPLACEMENTS[value]) {\n rulePairs[index + 1] = VALUE_REPLACEMENTS[value];\n } else {\n switch (name) {\n case 'margin':\n case 'padding':\n rulePairs[index + 1] = flipQuad(value);\n break;\n case 'box-shadow':\n rulePairs[index + 1] = negateNum(value, 0);\n break;\n }\n }\n }\n}\n\n/**\n * Given a string value in a space delimited format (e.g. \"1 2 3 4\"), negates a particular value.\n */\nfunction negateNum(value: string, partIndex: number): string {\n const parts = value.split(' ');\n const numberVal = parseInt(parts[partIndex], 10);\n\n parts[0] = parts[0].replace(String(numberVal), String(numberVal * -1));\n\n return parts.join(' ');\n}\n\n/**\n * Given a string quad, flips the left and right values.\n */\nfunction flipQuad(value: string): string {\n if (typeof value === 'string') {\n const parts = value.split(' ');\n\n if (parts.length === 4) {\n return `${parts[0]} ${parts[3]} ${parts[2]} ${parts[1]}`;\n }\n }\n\n return value;\n}\n","import { IStyle } from './IStyle';\nimport { IRawStyle } from './IRawStyle';\n\nimport { Stylesheet } from './Stylesheet';\nimport { kebabRules } from './transforms/kebabRules';\nimport { prefixRules } from './transforms/prefixRules';\nimport { provideUnits } from './transforms/provideUnits';\nimport { rtlifyRules } from './transforms/rtlifyRules';\nimport { IStyleOptions } from './IStyleOptions';\n\nconst DISPLAY_NAME = 'displayName';\n\ntype IDictionary = { [key: string]: any };\n\ninterface IRuleSet {\n __order: string[];\n [key: string]: IDictionary;\n}\n\nfunction getDisplayName(rules?: { [key: string]: IRawStyle }): string | undefined {\n const rootStyle: IStyle = rules && rules['&'];\n\n return rootStyle ? (rootStyle as IRawStyle).displayName : undefined;\n}\n\nconst globalSelectorRegExp = /\\:global\\((.+?)\\)/g;\n\ntype ReplacementInfo = [number, number, string];\n\n/**\n * Finds comma separated selectors in a :global() e.g. \":global(.class1, .class2, .class3)\"\n * and wraps them each in their own global \":global(.class1), :global(.class2), :global(.class3)\"\n *\n * @param selectorWithGlobals The selector to process\n * @returns The updated selector\n */\nfunction expandCommaSeparatedGlobals(selectorWithGlobals: string): string {\n // We the selector does not have a :global() we can shortcut\n if (!globalSelectorRegExp.test(selectorWithGlobals)) {\n return selectorWithGlobals;\n }\n\n const replacementInfo: ReplacementInfo[] = [];\n\n const findGlobal = /\\:global\\((.+?)\\)/g;\n let match = null;\n // Create a result list for global selectors so we can replace them.\n while ((match = findGlobal.exec(selectorWithGlobals))) {\n // Only if the found selector is a comma separated list we'll process it.\n if (match[1].indexOf(',') > -1) {\n replacementInfo.push([\n match.index,\n match.index + match[0].length,\n // Wrap each of the found selectors in :global()\n match[1]\n .split(',')\n .map((v: string) => `:global(${v.trim()})`)\n .join(', '),\n ]);\n }\n }\n\n // Replace the found selectors with their wrapped variants in reverse order\n return replacementInfo\n .reverse()\n .reduce((selector: string, [matchIndex, matchEndIndex, replacement]: ReplacementInfo) => {\n const prefix = selector.slice(0, matchIndex);\n const suffix = selector.slice(matchEndIndex);\n\n return prefix + replacement + suffix;\n }, selectorWithGlobals);\n}\n\nfunction expandSelector(newSelector: string, currentSelector: string): string {\n if (newSelector.indexOf(':global(') >= 0) {\n return newSelector.replace(globalSelectorRegExp, '$1');\n } else if (newSelector.indexOf(':') === 0) {\n return currentSelector + newSelector;\n } else if (newSelector.indexOf('&') < 0) {\n return currentSelector + ' ' + newSelector;\n }\n\n return newSelector;\n}\n\nfunction extractSelector(currentSelector: string, rules: IRuleSet = { __order: [] }, selector: string, value: IStyle) {\n if (selector.indexOf('@') === 0) {\n selector = selector + '{' + currentSelector;\n extractRules([value], rules, selector);\n } else if (selector.indexOf(',') > -1) {\n expandCommaSeparatedGlobals(selector)\n .split(',')\n .map((s: string) => s.trim())\n .forEach((separatedSelector: string) =>\n extractRules([value], rules, expandSelector(separatedSelector, currentSelector)),\n );\n } else {\n extractRules([value], rules, expandSelector(selector, currentSelector));\n }\n}\n\nfunction extractRules(args: IStyle[], rules: IRuleSet = { __order: [] }, currentSelector: string = '&'): IRuleSet {\n const stylesheet = Stylesheet.getInstance();\n let currentRules: IDictionary | undefined = rules[currentSelector] as IDictionary;\n\n if (!currentRules) {\n currentRules = {};\n rules[currentSelector] = currentRules;\n rules.__order.push(currentSelector);\n }\n\n for (const arg of args) {\n // If the arg is a string, we need to look up the class map and merge.\n if (typeof arg === 'string') {\n const expandedRules = stylesheet.argsFromClassName(arg);\n\n if (expandedRules) {\n extractRules(expandedRules, rules, currentSelector);\n }\n // Else if the arg is an array, we need to recurse in.\n } else if (Array.isArray(arg)) {\n extractRules(arg, rules, currentSelector);\n } else {\n for (const prop in arg as any) {\n if ((arg as any).hasOwnProperty(prop)) {\n const propValue = (arg as any)[prop];\n\n if (prop === 'selectors') {\n // every child is a selector.\n const selectors: { [key: string]: IStyle } = (arg as any).selectors;\n\n for (const newSelector in selectors) {\n if (selectors.hasOwnProperty(newSelector)) {\n extractSelector(currentSelector, rules, newSelector, selectors[newSelector]);\n }\n }\n } else if (typeof propValue === 'object') {\n // prop is a selector.\n if (propValue !== null) {\n extractSelector(currentSelector, rules, prop, propValue);\n }\n } else {\n if (propValue !== undefined) {\n // Else, add the rule to the currentSelector.\n if (prop === 'margin' || prop === 'padding') {\n expandQuads(currentRules, prop, propValue);\n } else {\n (currentRules as any)[prop] = propValue;\n }\n }\n }\n }\n }\n }\n }\n\n return rules;\n}\n\nfunction expandQuads(currentRules: IDictionary, name: string, value: string): void {\n const parts = typeof value === 'string' ? value.split(' ') : [value];\n\n currentRules[name + 'Top'] = parts[0];\n currentRules[name + 'Right'] = parts[1] || parts[0];\n currentRules[name + 'Bottom'] = parts[2] || parts[0];\n currentRules[name + 'Left'] = parts[3] || parts[1] || parts[0];\n}\n\nfunction getKeyForRules(options: IStyleOptions, rules: IRuleSet): string | undefined {\n const serialized: string[] = [options.rtl ? 'rtl' : 'ltr'];\n let hasProps = false;\n\n for (const selector of rules.__order) {\n serialized.push(selector);\n const rulesForSelector = rules[selector];\n\n for (const propName in rulesForSelector) {\n if (rulesForSelector.hasOwnProperty(propName) && rulesForSelector[propName] !== undefined) {\n hasProps = true;\n serialized.push(propName, rulesForSelector[propName]);\n }\n }\n }\n\n return hasProps ? serialized.join('') : undefined;\n}\n\nfunction repeatString(target: string, count: number): string {\n if (count <= 0) {\n return '';\n }\n\n if (count === 1) {\n return target;\n }\n\n return target + repeatString(target, count - 1);\n}\n\nexport function serializeRuleEntries(options: IStyleOptions, ruleEntries: { [key: string]: string | number }): string {\n if (!ruleEntries) {\n return '';\n }\n\n const allEntries: (string | number)[] = [];\n\n for (const entry in ruleEntries) {\n if (ruleEntries.hasOwnProperty(entry) && entry !== DISPLAY_NAME && ruleEntries[entry] !== undefined) {\n allEntries.push(entry, ruleEntries[entry]);\n }\n }\n\n // Apply transforms.\n for (let i = 0; i < allEntries.length; i += 2) {\n kebabRules(allEntries, i);\n provideUnits(allEntries, i);\n rtlifyRules(options, allEntries, i);\n prefixRules(allEntries, i);\n }\n\n // Apply punctuation.\n for (let i = 1; i < allEntries.length; i += 4) {\n allEntries.splice(i, 1, ':', allEntries[i], ';');\n }\n\n return allEntries.join('');\n}\n\nexport interface IRegistration {\n className: string;\n key: string;\n args: IStyle[];\n rulesToInsert: string[];\n}\n\nexport function styleToRegistration(options: IStyleOptions, ...args: IStyle[]): IRegistration | undefined {\n const rules: IRuleSet = extractRules(args);\n const key = getKeyForRules(options, rules);\n\n if (key) {\n const stylesheet = Stylesheet.getInstance();\n const registration: Partial = {\n className: stylesheet.classNameFromKey(key),\n key,\n args,\n };\n\n if (!registration.className) {\n registration.className = stylesheet.getClassName(getDisplayName(rules));\n const rulesToInsert: string[] = [];\n\n for (const selector of rules.__order) {\n rulesToInsert.push(selector, serializeRuleEntries(options, rules[selector]));\n }\n registration.rulesToInsert = rulesToInsert;\n }\n\n return registration as IRegistration;\n }\n\n return undefined;\n}\n\n/**\n * Insert style to stylesheet.\n * @param registration Style registration.\n * @param specificityMultiplier Number of times classname selector is repeated in the css rule.\n * This is to increase css specificity in case it's needed. Default to 1.\n */\nexport function applyRegistration(registration: IRegistration, specificityMultiplier: number = 1): void {\n const stylesheet = Stylesheet.getInstance();\n const { className, key, args, rulesToInsert } = registration;\n\n if (rulesToInsert) {\n // rulesToInsert is an ordered array of selector/rule pairs.\n for (let i = 0; i < rulesToInsert.length; i += 2) {\n const rules = rulesToInsert[i + 1];\n if (rules) {\n let selector = rulesToInsert[i];\n selector = selector.replace(/&/g, repeatString(`.${registration.className}`, specificityMultiplier));\n\n // Insert. Note if a media query, we must close the query with a final bracket.\n const processedRule = `${selector}{${rules}}${selector.indexOf('@') === 0 ? '}' : ''}`;\n stylesheet.insertRule(processedRule);\n }\n }\n stylesheet.cacheClassName(className!, key!, args!, rulesToInsert);\n }\n}\n\nexport function styleToClassName(options: IStyleOptions, ...args: IStyle[]): string {\n const registration = styleToRegistration(options, ...args);\n if (registration) {\n applyRegistration(registration, options.specificityMultiplier);\n\n return registration.className;\n }\n\n return '';\n}\n","import { concatStyleSets } from './concatStyleSets';\nimport { extractStyleParts } from './extractStyleParts';\nimport { IStyle } from './IStyle';\nimport { IStyleOptions } from './IStyleOptions';\nimport { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet } from './IStyleSet';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { applyRegistration, styleToRegistration } from './styleToClassName';\nimport { ObjectOnly } from './ObjectOnly';\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet - The first style set to be merged and reigstered.\n */\nexport function mergeStyleSets(\n styleSet: TStyleSet | false | null | undefined,\n): IProcessedStyleSet>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n): IProcessedStyleSet & ObjectOnly>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n * @param styleSet3 - The third style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n styleSet3: TStyleSet3 | false | null | undefined,\n): IProcessedStyleSet & ObjectOnly & ObjectOnly>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSet1 - The first style set to be merged.\n * @param styleSet2 - The second style set to be merged.\n * @param styleSet3 - The third style set to be merged.\n * @param styleSet4 - The fourth style set to be merged.\n */\nexport function mergeStyleSets(\n styleSet1: TStyleSet1 | false | null | undefined,\n styleSet2: TStyleSet2 | false | null | undefined,\n styleSet3: TStyleSet3 | false | null | undefined,\n styleSet4: TStyleSet4 | false | null | undefined,\n): IProcessedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets(...styleSets: Array): IProcessedStyleSet;\n\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets(...styleSets: Array): IProcessedStyleSet {\n return mergeCssSets(styleSets as any, getStyleOptions());\n}\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet | false | null | undefined],\n options?: IStyleOptions,\n): IProcessedStyleSet;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [TStyleSet1 | false | null | undefined, TStyleSet2 | false | null | undefined],\n options?: IStyleOptions,\n): IProcessedStyleSet;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [\n TStyleSet1 | false | null | undefined,\n TStyleSet2 | false | null | undefined,\n TStyleSet3 | false | null | undefined,\n ],\n options?: IStyleOptions,\n): IProcessedStyleSet;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: [\n TStyleSet1 | false | null | undefined,\n TStyleSet2 | false | null | undefined,\n TStyleSet3 | false | null | undefined,\n TStyleSet4 | false | null | undefined,\n ],\n options?: IStyleOptions,\n): IProcessedStyleSet<\n ObjectOnly & ObjectOnly & ObjectOnly & ObjectOnly\n>;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSet: [TStyleSet | false | null | undefined],\n options?: IStyleOptions,\n): IProcessedStyleSet;\n\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(\n styleSets: Array,\n options?: IStyleOptions,\n): IProcessedStyleSet {\n const classNameSet: IProcessedStyleSet = { subComponentStyles: {} };\n\n const styleSet = styleSets[0];\n\n if (!styleSet && styleSets.length <= 1) {\n return { subComponentStyles: {} } as any;\n }\n\n const concatenatedStyleSet = concatStyleSets(...styleSets);\n\n const registrations = [];\n\n for (const styleSetArea in concatenatedStyleSet) {\n if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {\n if (styleSetArea === 'subComponentStyles') {\n classNameSet.subComponentStyles = (concatenatedStyleSet as IConcatenatedStyleSet).subComponentStyles || {};\n continue;\n }\n\n const styles: IStyle = (concatenatedStyleSet as any)[styleSetArea];\n\n const { classes, objects } = extractStyleParts(styles);\n\n if (objects?.length) {\n const registration = styleToRegistration(options || {}, { displayName: styleSetArea }, objects);\n\n if (registration) {\n registrations.push(registration);\n classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');\n }\n } else {\n classNameSet[styleSetArea] = classes.join(' ');\n }\n }\n }\n\n for (const registration of registrations) {\n if (registration) {\n applyRegistration(registration, options?.specificityMultiplier);\n }\n }\n\n return classNameSet as any;\n}\n","import { _isSSR } from './setSSR';\n\n/**\n * Helper to get the document object. Note that in popup window cases, document\n * might be the wrong document, which is why we look at ownerDocument for the\n * truth. Also note that the SSR flag is used to test ssr scenarios even if\n * document is defined (from JSDOM for example.)\n *\n * @public\n */\nexport function getDocument(rootElement?: HTMLElement | null): Document | undefined {\n if (_isSSR || typeof document === 'undefined') {\n return undefined;\n } else {\n const el = rootElement as Element;\n\n return el && el.ownerDocument ? el.ownerDocument : document;\n }\n}\n","import { getWindow } from './dom/getWindow';\n\n/**\n * Fetches an item from session storage without throwing an exception\n * @param key The key of the item to fetch from session storage\n */\nexport function getItem(key: string): string | null {\n let result = null;\n try {\n const win = getWindow();\n result = win ? win.sessionStorage.getItem(key) : null;\n } catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n\n/**\n * Inserts an item into session storage without throwing an exception\n * @param key The key of the item to add to session storage\n * @param data The data to put into session storage\n */\nexport function setItem(key: string, data: string): void {\n try {\n getWindow()?.sessionStorage.setItem(key, data);\n } catch (e) {\n /* Eat the exception */\n }\n}\n","import { KeyCodes } from './KeyCodes';\nimport { getDocument } from './dom/getDocument';\nimport { getItem, setItem } from './sessionStorage';\nimport { setRTL as mergeStylesSetRTL } from '@uifabric/merge-styles';\n\nconst RTL_LOCAL_STORAGE_KEY = 'isRTL';\n\n// Default to undefined so that we initialize on first read.\nlet _isRTL: boolean | undefined;\n\n/**\n * Gets the rtl state of the page (returns true if in rtl.)\n */\nexport function getRTL(theme: { rtl?: boolean } = {}): boolean {\n if (theme.rtl !== undefined) {\n return theme.rtl;\n }\n if (_isRTL === undefined) {\n // Fabric supports persisting the RTL setting between page refreshes via session storage\n let savedRTL = getItem(RTL_LOCAL_STORAGE_KEY);\n if (savedRTL !== null) {\n _isRTL = savedRTL === '1';\n setRTL(_isRTL);\n }\n\n let doc = getDocument();\n if (_isRTL === undefined && doc) {\n _isRTL = ((doc.body && doc.body.getAttribute('dir')) || doc.documentElement.getAttribute('dir')) === 'rtl';\n mergeStylesSetRTL(_isRTL);\n }\n }\n\n return !!_isRTL;\n}\n\n/**\n * Sets the rtl state of the page (by adjusting the dir attribute of the html element.)\n */\nexport function setRTL(isRTL: boolean, persistSetting: boolean = false): void {\n let doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');\n }\n\n if (persistSetting) {\n setItem(RTL_LOCAL_STORAGE_KEY, isRTL ? '1' : '0');\n }\n\n _isRTL = isRTL;\n mergeStylesSetRTL(_isRTL);\n}\n\n/**\n * Returns the given key, but flips right/left arrows if necessary.\n */\nexport function getRTLSafeKeyCode(key: number, theme: { rtl?: boolean } = {}): number {\n if (getRTL(theme)) {\n if (key === KeyCodes.left) {\n key = KeyCodes.right;\n } else if (key === KeyCodes.right) {\n key = KeyCodes.left;\n }\n }\n\n return key;\n}\n","import {\n mergeCssSets,\n IStyleSet,\n IProcessedStyleSet,\n Stylesheet,\n IStyleFunctionOrObject,\n} from '@uifabric/merge-styles';\nimport { getRTL } from './rtl';\nimport { getWindow } from './dom';\nimport { StyleFunction } from './styled';\n\nconst MAX_CACHE_COUNT = 50;\nconst DEFAULT_SPECIFICITY_MULTIPLIER = 5;\n\nlet _memoizedClassNames = 0;\n\nconst stylesheet = Stylesheet.getInstance();\n\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(() => _memoizedClassNames++);\n}\n\n// Note that because of the caching nature within the classNames memoization,\n// I've disabled this rule to simply be able to work with any types.\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\n// This represents a prop we attach to each Map to indicate the cached return value\n// associated with the graph node.\nconst retVal = '__retval__';\n\ninterface IRecursiveMemoNode extends Map {\n [retVal]?: string;\n}\n\ntype AppWindow = (Window & { FabricConfig?: { enableClassNameCacheFullWarning?: boolean } }) | undefined;\n\nexport interface IClassNamesFunctionOptions {\n /**\n * Disables class caching for scenarios where styleProp parts mutate frequently.\n */\n disableCaching?: boolean;\n\n /**\n * Size of the cache. It overwrites default cache size when defined.\n */\n cacheSize?: number;\n\n /**\n * Set to true if component base styles are implemented in scss instead of css-in-js.\n */\n useStaticStyles?: boolean;\n}\n\n/**\n * Creates a getClassNames function which calls getStyles given the props, and injects them\n * into mergeStyleSets.\n *\n * Note that the props you pass in on every render should be in the same order and\n * immutable (numbers, strings, and booleans). This will allow the results to be memoized. Violating\n * these will cause extra recalcs to occur.\n */\nexport function classNamesFunction>(\n options: IClassNamesFunctionOptions = {},\n): (\n getStyles: IStyleFunctionOrObject | undefined,\n styleProps?: TStyleProps,\n) => IProcessedStyleSet {\n // We build a trie where each node is a Map. The map entry key represents an argument\n // value, and the entry value is another node (Map). Each node has a `__retval__`\n // property which is used to hold the cached response.\n\n // To derive the response, we can simply ensure the arguments are added or already\n // exist in the trie. At the last node, if there is a `__retval__` we return that. Otherwise\n // we call the `getStyles` api to evaluate, cache on the property, and return that.\n let map: IRecursiveMemoNode = new Map();\n let styleCalcCount = 0;\n let getClassNamesCount = 0;\n let currentMemoizedClassNames = _memoizedClassNames;\n\n const getClassNames = (\n styleFunctionOrObject: IStyleFunctionOrObject | undefined,\n styleProps: TStyleProps = {} as TStyleProps,\n ): IProcessedStyleSet => {\n // If useStaticStyles is true, styleFunctionOrObject returns slot to classname mappings.\n // If there is also no style overrides, we can skip merge styles completely and\n // simply return the result from the style funcion.\n if (\n options.useStaticStyles &&\n typeof styleFunctionOrObject === 'function' &&\n (styleFunctionOrObject as StyleFunction).__noStyleOverride__\n ) {\n return styleFunctionOrObject(styleProps) as IProcessedStyleSet;\n }\n\n getClassNamesCount++;\n let current: Map = map;\n const { theme } = styleProps as any;\n const rtl = theme && theme.rtl !== undefined ? theme.rtl : getRTL();\n\n const disableCaching = options.disableCaching;\n\n // On reset of our stylesheet, reset memoized cache.\n if (currentMemoizedClassNames !== _memoizedClassNames) {\n currentMemoizedClassNames = _memoizedClassNames;\n map = new Map();\n styleCalcCount = 0;\n }\n\n if (!options.disableCaching) {\n current = _traverseMap(map, styleFunctionOrObject as any);\n current = _traverseMap(current, styleProps);\n }\n\n if (disableCaching || !(current as any)[retVal]) {\n if (styleFunctionOrObject === undefined) {\n (current as any)[retVal] = {} as IProcessedStyleSet;\n } else {\n (current as any)[retVal] = mergeCssSets(\n [\n (typeof styleFunctionOrObject === 'function'\n ? styleFunctionOrObject(styleProps)\n : styleFunctionOrObject) as IStyleSet,\n ],\n { rtl: !!rtl, specificityMultiplier: options.useStaticStyles ? DEFAULT_SPECIFICITY_MULTIPLIER : undefined },\n );\n }\n\n if (!disableCaching) {\n styleCalcCount++;\n }\n }\n\n if (styleCalcCount > (options.cacheSize || MAX_CACHE_COUNT)) {\n const win = getWindow() as AppWindow;\n if (win?.FabricConfig?.enableClassNameCacheFullWarning) {\n // eslint-disable-next-line no-console\n console.warn(\n `Styles are being recalculated too frequently. Cache miss rate is ${styleCalcCount}/${getClassNamesCount}.`,\n );\n // eslint-disable-next-line no-console\n console.trace();\n }\n\n map.clear();\n styleCalcCount = 0;\n\n // Mutate the options passed in, that's all we can do.\n options.disableCaching = true;\n }\n\n // Note: the retVal is an attached property on the Map; not a key in the Map. We use this attached property to\n // cache the return value for this branch of the graph.\n return (current as any)[retVal];\n };\n\n return getClassNames;\n}\n\nfunction _traverseEdge(current: Map, value: any): Map {\n value = _normalizeValue(value);\n\n if (!current.has(value)) {\n current.set(value, new Map());\n }\n\n return current.get(value);\n}\n\nfunction _traverseMap(current: Map, inputs: any[] | Object): Map {\n if (typeof inputs === 'function') {\n const cachedInputsFromStyled = (inputs as StyleFunction).__cachedInputs__;\n if (cachedInputsFromStyled) {\n // The styled helper will generate the styles function and will attach the cached\n // inputs (consisting of the default styles, customzied styles, and user provided styles.)\n // These should be used as cache keys for deriving the memoized value.\n for (const input of (inputs as any).__cachedInputs__) {\n current = _traverseEdge(current, input);\n }\n } else {\n current = _traverseEdge(current, inputs);\n }\n } else if (typeof inputs === 'object') {\n for (const propName in inputs) {\n if (inputs.hasOwnProperty(propName)) {\n current = _traverseEdge(current, (inputs as any)[propName]);\n }\n }\n }\n\n return current;\n}\n\nfunction _normalizeValue(value: any): string {\n switch (value) {\n case undefined:\n return '__undefined__';\n case null:\n return '__null__';\n default:\n return value;\n }\n}\n","const toObjectMap = (...items: (string[] | Record)[]) => {\n const result: Record = {};\n\n for (const item of items) {\n const keys = Array.isArray(item) ? item : Object.keys(item);\n\n for (const key of keys) {\n result[key] = 1;\n }\n }\n\n return result;\n};\n\n/**\n * An array of events that are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementEvents = toObjectMap([\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onCompositionEnd',\n 'onCompositionStart',\n 'onCompositionUpdate',\n 'onFocus',\n 'onFocusCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onChange',\n 'onInput',\n 'onSubmit',\n 'onLoad',\n 'onError',\n 'onKeyDown',\n 'onKeyDownCapture',\n 'onKeyPress',\n 'onKeyUp',\n 'onAbort',\n 'onCanPlay',\n 'onCanPlayThrough',\n 'onDurationChange',\n 'onEmptied',\n 'onEncrypted',\n 'onEnded',\n 'onLoadedData',\n 'onLoadedMetadata',\n 'onLoadStart',\n 'onPause',\n 'onPlay',\n 'onPlaying',\n 'onProgress',\n 'onRateChange',\n 'onSeeked',\n 'onSeeking',\n 'onStalled',\n 'onSuspend',\n 'onTimeUpdate',\n 'onVolumeChange',\n 'onWaiting',\n 'onClick',\n 'onClickCapture',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseDownCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOut',\n 'onMouseOver',\n 'onMouseUp',\n 'onMouseUpCapture',\n 'onSelect',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n 'onScroll',\n 'onWheel',\n 'onPointerCancel',\n 'onPointerDown',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onPointerMove',\n 'onPointerOut',\n 'onPointerOver',\n 'onPointerUp',\n 'onGotPointerCapture',\n 'onLostPointerCapture',\n]);\n\n/**\n * An array of element attributes which are allowed on every html element type.\n *\n * @public\n */\nexport const baseElementProperties = toObjectMap([\n 'accessKey', // global\n 'children', // global\n 'className', // global\n 'contentEditable', // global\n 'dir', // global\n 'draggable', // global\n 'hidden', // global\n 'htmlFor', // global\n 'id', // global\n 'lang', // global\n 'ref', // global\n 'role', // global\n 'style', // global\n 'tabIndex', // global\n 'title', // global\n 'translate', // global\n 'spellCheck', // global\n 'name', // global\n]);\n\n/**\n * An array of HTML element properties and events.\n *\n * @public\n */\nexport const htmlElementProperties = toObjectMap(baseElementProperties, baseElementEvents);\n\n/**\n * An array of LABEL tag properties and events.\n *\n * @public\n */\nexport const labelProperties = toObjectMap(htmlElementProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n]);\n\n/**\n * An array of AUDIO tag properties and events.\n\n * @public\n */\nexport const audioProperties = toObjectMap(htmlElementProperties, [\n 'height', // canvas, embed, iframe, img, input, object, video\n 'loop', // audio, video\n 'muted', // audio, video\n 'preload', // audio, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of VIDEO tag properties and events.\n *\n * @public\n */\nexport const videoProperties = toObjectMap(audioProperties, [\n 'poster', // video\n]);\n\n/**\n * An array of OL tag properties and events.\n *\n * @public\n */\nexport const olProperties = toObjectMap(htmlElementProperties, [\n 'start', // ol\n]);\n\n/**\n * An array of LI tag properties and events.\n *\n * @public\n */\nexport const liProperties = toObjectMap(htmlElementProperties, [\n 'value', // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of A tag properties and events.\n *\n * @public\n */\nexport const anchorProperties = toObjectMap(htmlElementProperties, [\n 'download', // a, area\n 'href', // a, area, base, link\n 'hrefLang', // a, area, link\n 'media', // a, area, link, source, style\n 'rel', // a, area, link\n 'target', // a, area, base, form\n 'type', // a, button, input, link, menu, object, script, source, style\n]);\n\n/**\n * An array of BUTTON tag properties and events.\n *\n * @public\n */\nexport const buttonProperties = toObjectMap(htmlElementProperties, [\n 'autoFocus', // button, input, select, textarea\n 'disabled', // button, fieldset, input, optgroup, option, select, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'formAction', // input, button\n 'formEncType', // input, button\n 'formMethod', // input, button\n 'formNoValidate', // input, button\n 'formTarget', // input, button\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param,\n]);\n\n/**\n * An array of INPUT tag properties and events.\n *\n * @public\n */\nexport const inputProperties = toObjectMap(buttonProperties, [\n 'accept', // input\n 'alt', // area, img, input\n 'autoCapitalize', // input, textarea\n 'autoComplete', // form, input\n 'checked', // input\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'height', // canvas, embed, iframe, img, input, object, video\n 'inputMode', // input\n 'list', // input\n 'max', // input, meter\n 'maxLength', // input, textarea\n 'min', // input, meter\n 'multiple', // input, select\n 'pattern', // input\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'step', // input\n 'size', // input\n 'type', // a, button, input, link, menu, object, script, source, style\n 'value', // button, input, li, option, meter, progress, param\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * An array of TEXTAREA tag properties and events.\n *\n * @public\n */\nexport const textAreaProperties = toObjectMap(buttonProperties, [\n 'autoCapitalize', // input, textarea\n 'cols', // textarea\n 'dirname', // input, textarea\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'maxLength', // input, textarea\n 'placeholder', // input, textarea\n 'readOnly', // input, textarea\n 'required', // input, select, textarea\n 'rows', // textarea\n 'wrap', // textarea\n]);\n\n/**\n * An array of SELECT tag properties and events.\n *\n * @public\n */\nexport const selectProperties = toObjectMap(buttonProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n 'multiple', // input, select\n 'required', // input, select, textarea\n]);\n\nexport const optionProperties = toObjectMap(htmlElementProperties, [\n 'selected', // option\n 'value', // button, input, li, option, meter, progress, param\n]);\n\n/**\n * An array of TABLE tag properties and events.\n *\n * @public\n */\nexport const tableProperties = toObjectMap(htmlElementProperties, [\n 'cellPadding', // table\n 'cellSpacing', // table\n]);\n\n/**\n * An array of TR tag properties and events.\n *\n * @public\n */\nexport const trProperties = htmlElementProperties;\n\n/**\n * An array of TH tag properties and events.\n *\n * @public\n */\nexport const thProperties = toObjectMap(htmlElementProperties, [\n 'rowSpan', // td, th\n 'scope', // th\n]);\n\n/**\n * An array of TD tag properties and events.\n *\n * @public\n */\nexport const tdProperties = toObjectMap(htmlElementProperties, [\n 'colSpan', // td\n 'headers', // td\n 'rowSpan', // td, th\n 'scope', // th\n]);\n\nexport const colGroupProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n\nexport const colProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n\n/**\n * An array of FORM tag properties and events.\n *\n * @public\n */\nexport const formProperties = toObjectMap(htmlElementProperties, [\n 'acceptCharset', // form\n 'action', // form\n 'encType', // form\n 'encType', // form\n 'method', // form\n 'noValidate', // form\n 'target', // form\n]);\n\n/**\n * An array of IFRAME tag properties and events.\n *\n * @public\n */\nexport const iframeProperties = toObjectMap(htmlElementProperties, [\n 'allow', // iframe\n 'allowFullScreen', // iframe\n 'allowPaymentRequest', // iframe\n 'allowTransparency', // iframe\n 'csp', // iframe\n 'height', // canvas, embed, iframe, img, input, object, video\n 'importance', // iframe\n 'referrerPolicy', // iframe\n 'sandbox', // iframe\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcDoc', // iframe\n 'width', // canvas, embed, iframe, img, input, object, video,\n]);\n\n/**\n * An array of IMAGE tag properties and events.\n *\n * @public\n */\nexport const imgProperties = toObjectMap(htmlElementProperties, [\n 'alt', // area, img, input\n 'crossOrigin', // img\n 'height', // canvas, embed, iframe, img, input, object, video\n 'src', // audio, embed, iframe, img, input, script, source, track, video\n 'srcSet', // img, source\n 'useMap', // img, object,\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n\n/**\n * @deprecated Use imgProperties for img elements.\n */\nexport const imageProperties = imgProperties;\n\n/**\n * An array of DIV tag properties and events.\n *\n * @public\n */\nexport const divProperties = htmlElementProperties;\n\n/**\n * Gets native supported props for an html element provided the allowance set. Use one of the property\n * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given\n * props set. Note that all data- and aria- prefixed attributes will be allowed.\n * NOTE: getNativeProps should always be applied first when adding props to a react component. The\n * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.\n * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to\n * the component after an onClick function is added, then the getNativeProps onClick will override it.\n *\n * @public\n * @param props - The unfiltered input props\n * @param allowedPropsNames - The array or record of allowed prop names.\n * @returns The filtered props\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeProps>(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n props: Record,\n allowedPropNames: string[] | Record,\n excludedPropNames?: string[],\n): T {\n // It'd be great to properly type this while allowing 'aria-` and 'data-' attributes like TypeScript does for\n // JSX attributes, but that ability is hardcoded into the TS compiler with no analog in TypeScript typings.\n // Then we'd be able to enforce props extends native props (including aria- and data- attributes), and then\n // return native props.\n // We should be able to do this once this PR is merged: https://github.com/microsoft/TypeScript/pull/26797\n\n const isArray = Array.isArray(allowedPropNames);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: Record = {};\n const keys = Object.keys(props);\n\n for (const key of keys) {\n const isNativeProp =\n (!isArray && (allowedPropNames as Record)[key]) ||\n (isArray && (allowedPropNames as string[]).indexOf(key) >= 0) ||\n key.indexOf('data-') === 0 ||\n key.indexOf('aria-') === 0;\n\n if (isNativeProp && (!excludedPropNames || excludedPropNames?.indexOf(key) === -1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n result[key] = props![key] as any;\n }\n }\n\n return result as T;\n}\n","import * as React from 'react';\n\n/**\n * DelayedRender component props.\n *\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface IDelayedRenderProps extends React.Props<{}> {\n /**\n * Number of milliseconds to delay rendering children.\n */\n delay?: number;\n}\n\n/**\n * DelayedRender component state.\n *\n * @internal\n */\nexport interface IDelayedRenderState {\n /**\n * Whether the component is rendered or not.\n */\n isRendered: boolean;\n}\n\n/**\n * Utility component for delaying the render of a child component after a given delay. This component\n * requires a single child component; don't pass in many components. Wrap multiple components in a DIV\n * if necessary.\n *\n * @public\n * {@docCategory DelayedRender}\n */\nexport class DelayedRender extends React.Component {\n public static defaultProps = {\n delay: 0,\n };\n\n private _timeoutId: number | undefined;\n\n constructor(props: IDelayedRenderProps) {\n super(props);\n this.state = {\n isRendered: false,\n };\n }\n\n public componentDidMount(): void {\n let { delay } = this.props;\n this._timeoutId = window.setTimeout(() => {\n this.setState({\n isRendered: true,\n });\n }, delay);\n }\n\n public componentWillUnmount(): void {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n }\n }\n\n public render(): React.ReactElement<{}> | null {\n return this.state.isRendered ? (React.Children.only(this.props.children) as React.ReactElement<{}>) : null;\n }\n}\n","import * as React from 'react';\nimport { ISpinnerProps, ISpinnerStyleProps, ISpinnerStyles, SpinnerType, SpinnerSize } from './Spinner.types';\nimport { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';\n\nconst getClassNames = classNamesFunction();\n\nexport class SpinnerBase extends React.Component {\n public static defaultProps: ISpinnerProps = {\n size: SpinnerSize.medium,\n ariaLive: 'polite',\n labelPosition: 'bottom',\n };\n\n public render() {\n // eslint-disable-next-line deprecation/deprecation\n const { type, size, ariaLabel, ariaLive, styles, label, theme, className, labelPosition } = this.props;\n const statusMessage = ariaLabel;\n const nativeProps = getNativeProps>(this.props, divProperties, ['size']);\n\n // SpinnerType is deprecated. If someone is still using this property, rather than putting the SpinnerType into the\n // ISpinnerStyleProps, we'll map SpinnerType to its equivalent SpinnerSize and pass that in. Once SpinnerType\n // finally goes away we should delete this.\n let styleSize = size;\n if (styleSize === undefined && type !== undefined) {\n // eslint-disable-next-line deprecation/deprecation\n styleSize = type === SpinnerType.large ? SpinnerSize.large : SpinnerSize.medium;\n }\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n size: styleSize,\n className,\n labelPosition,\n });\n\n return (\n \n
\n {label &&
{label}
}\n {statusMessage && (\n
\n
\n {statusMessage}
\n \n
\n )}\n
= {\n [key in Exclude<\n keyof S,\n S extends React.MemoExoticComponent\n ? keyof typeof MEMO_STATICS | keyof C\n : S extends React.ForwardRefExoticComponent\n ? keyof typeof FORWARD_REF_STATICS | keyof C\n : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C\n >]: S[key];\n};\n\nexport default function hoistNonReactStatics<\n T extends OmniComponent,\n S extends OmniComponent,\n C extends ExcludeList = {},\n>(targetComponent: T, sourceComponent: S, excludelist?: C | undefined) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n\n if (objectPrototype) {\n const inheritedComponent = getPrototypeOf(sourceComponent);\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);\n }\n }\n\n let keys: (String | Symbol)[] = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n const targetStatics = getStatics(targetComponent);\n const sourceStatics = getStatics(sourceComponent);\n\n for (let i = 0; i < keys.length; ++i) {\n const key = keys[i] as unknown as string;\n if (\n !(key in KNOWN_STATICS) &&\n !(excludelist && excludelist[key]) &&\n !(sourceStatics && key in sourceStatics) &&\n !(targetStatics && key in targetStatics)\n ) {\n const descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor!);\n } catch (e) {\n /* ignore */\n }\n }\n }\n }\n\n return targetComponent as T & NonReactStatics;\n}\n","export default function isFunction(test: any): test is Function {\n return typeof test === 'function';\n}\n","import { StyledComponentBrand } from '../types';\n\nexport default function isStyledComponent(target: any): target is StyledComponentBrand {\n return typeof target === 'object' && 'styledComponentId' in target;\n}\n","/**\n * Convenience function for joining strings to form className chains\n */\nexport function joinStrings(a?: string | undefined, b?: string | undefined): string {\n return a && b ? `${a} ${b}` : a || b || '';\n}\n\nexport function joinStringArray(arr: string[], sep?: string | undefined): string {\n if (arr.length === 0) {\n return '';\n }\n\n let result = arr[0];\n for (let i = 1; i < arr.length; i++) {\n result += sep ? sep + arr[i] : arr[i];\n }\n return result;\n}\n","export default function isPlainObject(x: any): x is Record {\n return (\n x !== null &&\n typeof x === 'object' &&\n x.constructor.name === Object.name &&\n /* check for reasonable markers that the object isn't an element for react & preact/compat */\n !('props' in x && x.$$typeof)\n );\n}\n","import isPlainObject from './isPlainObject';\n\nfunction mixinRecursively(target: any, source: any, forceMerge = false) {\n /* only merge into POJOs, Arrays, but for top level objects only\n * allow to merge into anything by passing forceMerge = true */\n if (!forceMerge && !isPlainObject(target) && !Array.isArray(target)) {\n return source;\n }\n\n if (Array.isArray(source)) {\n for (let key = 0; key < source.length; key++) {\n target[key] = mixinRecursively(target[key], source[key]);\n }\n } else if (isPlainObject(source)) {\n for (const key in source) {\n target[key] = mixinRecursively(target[key], source[key]);\n }\n }\n\n return target;\n}\n\n/**\n * Arrays & POJOs merged recursively, other objects and value types are overridden\n * If target is not a POJO or an Array, it will get source properties injected via shallow merge\n * Source objects applied left to right. Mutates & returns target. Similar to lodash merge.\n */\nexport default function mixinDeep(target: any, ...sources: any[]) {\n for (const source of sources) {\n mixinRecursively(target, source, true);\n }\n\n return target;\n}\n","/**\n * If the Object prototype is frozen, the \"toString\" property is non-writable. This means that any objects which inherit this property\n * cannot have the property changed using a \"=\" assignment operator. If using strict mode, attempting that will cause an error. If not using\n * strict mode, attempting that will be silently ignored.\n *\n * If the Object prototype is frozen, inherited non-writable properties can still be shadowed using one of two mechanisms:\n *\n * 1. ES6 class methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#methods\n * 2. Using the `Object.defineProperty()` static method:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\n *\n * However, this project uses Babel to transpile ES6 classes, and transforms ES6 class methods to use the assignment operator instead:\n * https://babeljs.io/docs/babel-plugin-transform-class-properties#options\n *\n * Therefore, the most compatible way to shadow the prototype's \"toString\" property is to define a new \"toString\" property on this object.\n */\nexport function setToString(object: object, toStringFn: () => string) {\n Object.defineProperty(object, 'toString', { value: toStringFn });\n}\n","import { Dict } from '../types';\nimport errorMap from './errors';\n\nconst ERRORS: Dict = process.env.NODE_ENV !== 'production' ? errorMap : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format(...args: [string, ...any]) {\n let a = args[0];\n const b = [];\n\n for (let c = 1, len = args.length; c < len; c += 1) {\n b.push(args[c]);\n }\n\n b.forEach(d => {\n a = a.replace(/%[a-z]/, d);\n });\n\n return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\nexport default function throwStyledComponentsError(\n code: string | number,\n ...interpolations: any[]\n) {\n if (process.env.NODE_ENV === 'production') {\n return new Error(\n `An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#${code} for more information.${\n interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''\n }`\n );\n } else {\n return new Error(format(ERRORS[code], ...interpolations).trim());\n }\n}\n","import { SPLITTER } from '../constants';\nimport styledError from '../utils/error';\nimport { GroupedTag, Tag } from './types';\n\n/** Create a GroupedTag with an underlying Tag implementation */\nexport const makeGroupedTag = (tag: Tag) => {\n return new DefaultGroupedTag(tag);\n};\n\nconst BASE_SIZE = 1 << 9;\n\nconst DefaultGroupedTag = class DefaultGroupedTag implements GroupedTag {\n groupSizes: Uint32Array;\n length: number;\n tag: Tag;\n\n constructor(tag: Tag) {\n this.groupSizes = new Uint32Array(BASE_SIZE);\n this.length = BASE_SIZE;\n this.tag = tag;\n }\n\n indexOfGroup(group: number) {\n let index = 0;\n for (let i = 0; i < group; i++) {\n index += this.groupSizes[i];\n }\n\n return index;\n }\n\n insertRules(group: number, rules: string[]) {\n if (group >= this.groupSizes.length) {\n const oldBuffer = this.groupSizes;\n const oldSize = oldBuffer.length;\n\n let newSize = oldSize;\n while (group >= newSize) {\n newSize <<= 1;\n if (newSize < 0) {\n throw styledError(16, `${group}`);\n }\n }\n\n this.groupSizes = new Uint32Array(newSize);\n this.groupSizes.set(oldBuffer);\n this.length = newSize;\n\n for (let i = oldSize; i < newSize; i++) {\n this.groupSizes[i] = 0;\n }\n }\n\n let ruleIndex = this.indexOfGroup(group + 1);\n\n for (let i = 0, l = rules.length; i < l; i++) {\n if (this.tag.insertRule(ruleIndex, rules[i])) {\n this.groupSizes[group]++;\n ruleIndex++;\n }\n }\n }\n\n clearGroup(group: number) {\n if (group < this.length) {\n const length = this.groupSizes[group];\n const startIndex = this.indexOfGroup(group);\n const endIndex = startIndex + length;\n\n this.groupSizes[group] = 0;\n\n for (let i = startIndex; i < endIndex; i++) {\n this.tag.deleteRule(startIndex);\n }\n }\n }\n\n getGroup(group: number) {\n let css = '';\n if (group >= this.length || this.groupSizes[group] === 0) {\n return css;\n }\n\n const length = this.groupSizes[group];\n const startIndex = this.indexOfGroup(group);\n const endIndex = startIndex + length;\n\n for (let i = startIndex; i < endIndex; i++) {\n css += `${this.tag.getRule(i)}${SPLITTER}`;\n }\n\n return css;\n }\n};\n","import styledError from '../utils/error';\n\nconst MAX_SMI = 1 << (31 - 1);\n\nlet groupIDRegister: Map = new Map();\nlet reverseRegister: Map = new Map();\nlet nextFreeGroup = 1;\n\nexport const resetGroupIds = () => {\n groupIDRegister = new Map();\n reverseRegister = new Map();\n nextFreeGroup = 1;\n};\n\nexport const getGroupForId = (id: string): number => {\n if (groupIDRegister.has(id)) {\n return groupIDRegister.get(id) as any;\n }\n\n while (reverseRegister.has(nextFreeGroup)) {\n nextFreeGroup++;\n }\n\n const group = nextFreeGroup++;\n\n if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {\n throw styledError(16, `${group}`);\n }\n\n groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n return group;\n};\n\nexport const getIdForGroup = (group: number): void | string => {\n return reverseRegister.get(group);\n};\n\nexport const setGroupForId = (id: string, group: number) => {\n groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n};\n","import { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION, SPLITTER } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport { Sheet } from './types';\n\nconst SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}=\"${SC_VERSION}\"]`;\nconst MARKER_RE = new RegExp(`^${SC_ATTR}\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)`);\n\nexport const outputSheet = (sheet: Sheet) => {\n const tag = sheet.getTag();\n const { length } = tag;\n\n let css = '';\n for (let group = 0; group < length; group++) {\n const id = getIdForGroup(group);\n if (id === undefined) continue;\n\n const names = sheet.names.get(id);\n const rules = tag.getGroup(group);\n if (names === undefined || rules.length === 0) continue;\n\n const selector = `${SC_ATTR}.g${group}[id=\"${id}\"]`;\n\n let content = '';\n if (names !== undefined) {\n names.forEach(name => {\n if (name.length > 0) {\n content += `${name},`;\n }\n });\n }\n\n // NOTE: It's easier to collect rules and have the marker\n // after the actual rules to simplify the rehydration\n css += `${rules}${selector}{content:\"${content}\"}${SPLITTER}`;\n }\n\n return css;\n};\n\nconst rehydrateNamesFromContent = (sheet: Sheet, id: string, content: string) => {\n const names = content.split(',');\n let name;\n\n for (let i = 0, l = names.length; i < l; i++) {\n if ((name = names[i])) {\n sheet.registerName(id, name);\n }\n }\n};\n\nconst rehydrateSheetFromTag = (sheet: Sheet, style: HTMLStyleElement) => {\n const parts = (style.textContent ?? '').split(SPLITTER);\n const rules: string[] = [];\n\n for (let i = 0, l = parts.length; i < l; i++) {\n const part = parts[i].trim();\n if (!part) continue;\n\n const marker = part.match(MARKER_RE);\n\n if (marker) {\n const group = parseInt(marker[1], 10) | 0;\n const id = marker[2];\n\n if (group !== 0) {\n // Rehydrate componentId to group index mapping\n setGroupForId(id, group);\n // Rehydrate names and rules\n // looks like: data-styled.g11[id=\"idA\"]{content:\"nameA,\"}\n rehydrateNamesFromContent(sheet, id, marker[3]);\n sheet.getTag().insertRules(group, rules);\n }\n\n rules.length = 0;\n } else {\n rules.push(part);\n }\n }\n};\n\nexport const rehydrateSheet = (sheet: Sheet) => {\n const nodes = document.querySelectorAll(SELECTOR);\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const node = nodes[i] as any as HTMLStyleElement;\n if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {\n rehydrateSheetFromTag(sheet, node);\n\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n }\n }\n};\n","declare let __webpack_nonce__: string;\n\nexport default function getNonce() {\n return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n}\n","import { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport styledError from '../utils/error';\nimport getNonce from '../utils/nonce';\n\n/** Find last style element if any inside target */\nconst findLastStyleTag = (target: HTMLElement): void | HTMLStyleElement => {\n const arr = Array.from(target.querySelectorAll(`style[${SC_ATTR}]`));\n\n return arr[arr.length - 1];\n};\n\n/** Create a style element inside `target` or after the last */\nexport const makeStyleTag = (target?: HTMLElement | undefined): HTMLStyleElement => {\n const head = document.head;\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};\n\n/** Get the CSSStyleSheet instance for a given style element */\nexport const getSheet = (tag: HTMLStyleElement): CSSStyleSheet => {\n if (tag.sheet) {\n return tag.sheet as any as CSSStyleSheet;\n }\n\n // Avoid Firefox quirk where the style element might not have a sheet property\n const { styleSheets } = document;\n for (let i = 0, l = styleSheets.length; i < l; i++) {\n const sheet = styleSheets[i];\n if (sheet.ownerNode === tag) {\n return sheet as any as CSSStyleSheet;\n }\n }\n\n throw styledError(17);\n};\n","import { getSheet, makeStyleTag } from './dom';\nimport { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions) => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport const CSSOMTag = class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement | undefined) {\n this.element = makeStyleTag(target);\n\n // Avoid Edge bug where empty style elements don't create sheets\n this.element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(this.element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule && rule.cssText) {\n return rule.cssText;\n } else {\n return '';\n }\n }\n};\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport const TextTag = class TextTag implements Tag {\n element: HTMLStyleElement;\n nodes: NodeListOf;\n length: number;\n\n constructor(target?: HTMLElement | undefined) {\n this.element = makeStyleTag(target);\n this.nodes = this.element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string) {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode || null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number) {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number) {\n if (index < this.length) {\n return this.nodes[index].textContent as string;\n } else {\n return '';\n }\n }\n};\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport const VirtualTag = class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement | undefined) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string) {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number) {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number) {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n};\n","import { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { setToString } from '../utils/setToString';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport { GroupedTag, Sheet, SheetOptions } from './types';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean;\n useCSSOMInjection?: boolean;\n target?: HTMLElement | undefined;\n};\n\ntype GlobalStylesAllocationMap = {\n [key: string]: number;\n};\ntype NamesAllocationMap = Map>;\n\nconst defaultOptions: SheetOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n names: NamesAllocationMap;\n options: SheetOptions;\n server: boolean;\n tag?: GroupedTag | undefined;\n\n /** Register a group ID to give it an index */\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = EMPTY_OBJECT as Object,\n globalStyles: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap | undefined\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names as NamesAllocationMap);\n this.server = !!options.isServer;\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n\n setToString(this, () => outputSheet(this));\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) || undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] || 0) + 1);\n }\n\n /** Lazily initialises a GroupedTag for when it's actually needed */\n getTag() {\n return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /** Check whether a name is known for caching */\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id) as any).has(name);\n }\n\n /** Mark a group's name as known for caching */\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id) as any).add(name);\n }\n }\n\n /** Insert new rules which also marks the name as known */\n insertRules(id: string, name: string, rules: string | string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /** Clears all cached names for a given group ID */\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id) as any).clear();\n }\n }\n\n /** Clears all rules for a given group ID */\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /** Clears the entire tag which deletes all rules but not its names */\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n}\n","import * as stylis from 'stylis';\nimport { Stringifier } from '../types';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';\nimport throwStyledError from './error';\nimport { phash, SEED } from './hash';\n\nconst AMP_REGEX = /&/g;\nconst COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\n\nexport type ICreateStylisInstance = {\n options?: { namespace?: string | undefined; prefix?: boolean | undefined } | undefined;\n plugins?: stylis.Middleware[] | undefined;\n};\n\n/**\n * Takes an element and recurses through it's rules added the namespace to the start of each selector.\n * Takes into account media queries by recursing through child rules if they are present.\n */\nfunction recursivelySetNamepace(compiled: stylis.Element[], namespace: String): stylis.Element[] {\n return compiled.map(rule => {\n if (rule.type === 'rule') {\n // add the namespace to the start\n rule.value = `${namespace} ${rule.value}`;\n // add the namespace after each comma for subsequent selectors.\n // @ts-expect-error we target modern browsers but intentionally transpile to ES5 for speed\n rule.value = rule.value.replaceAll(',', `,${namespace} `);\n rule.props = (rule.props as string[]).map(prop => {\n return `${namespace} ${prop}`;\n });\n }\n\n if (Array.isArray(rule.children) && rule.type !== '@keyframes') {\n rule.children = recursivelySetNamepace(rule.children, namespace);\n }\n return rule;\n });\n}\n\nexport default function createStylisInstance(\n {\n options = EMPTY_OBJECT as object,\n plugins = EMPTY_ARRAY as unknown as stylis.Middleware[],\n }: ICreateStylisInstance = EMPTY_OBJECT as object\n) {\n let _componentId: string;\n let _selector: string;\n let _selectorRegexp: RegExp;\n\n const selfReferenceReplacer: Parameters[1] = (match, offset, string) => {\n if (\n /**\n * We only want to refer to the static class directly in the following scenarios:\n *\n * 1. The selector is alone on the line `& { color: red; }`\n * 2. The selector is part of a self-reference selector `& + & { color: red; }`\n */\n string === _selector ||\n (string.startsWith(_selector) &&\n string.endsWith(_selector) &&\n string.replaceAll(_selector, '').length > 0)\n ) {\n return `.${_componentId}`;\n }\n\n return match;\n };\n\n /**\n * When writing a style like\n *\n * & + & {\n * color: red;\n * }\n *\n * The second ampersand should be a reference to the static component class. stylis\n * has no knowledge of static class so we have to intelligently replace the base selector.\n *\n * https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure\n */\n const selfReferenceReplacementPlugin: stylis.Middleware = element => {\n if (element.type === stylis.RULESET && element.value.includes('&')) {\n (element.props as string[])[0] = element.props[0]\n // catch any hanging references that stylis missed\n .replace(AMP_REGEX, _selector)\n .replace(_selectorRegexp, selfReferenceReplacer);\n }\n };\n\n const middlewares = plugins.slice();\n\n middlewares.push(selfReferenceReplacementPlugin);\n\n /**\n * Enables automatic vendor-prefixing for styles.\n */\n if (options.prefix) {\n middlewares.push(stylis.prefixer);\n }\n\n middlewares.push(stylis.stringify);\n\n const stringifyRules: Stringifier = (\n css: string,\n selector = '',\n /**\n * This \"prefix\" referes to a _selector_ prefix.\n */\n prefix = '',\n componentId = '&'\n ) => {\n // stylis has no concept of state to be passed to plugins\n // but since JS is single-threaded, we can rely on that to ensure\n // these properties stay in sync with the current stylis run\n _componentId = componentId;\n _selector = selector;\n _selectorRegexp = new RegExp(`\\\\${_selector}\\\\b`, 'g');\n\n const flatCSS = css.replace(COMMENT_REGEX, '');\n let compiled = stylis.compile(\n prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS\n );\n\n if (options.namespace) {\n compiled = recursivelySetNamepace(compiled, options.namespace);\n }\n\n const stack: string[] = [];\n\n stylis.serialize(\n compiled,\n stylis.middleware(middlewares.concat(stylis.rulesheet(value => stack.push(value))))\n );\n\n return stack;\n };\n\n stringifyRules.hash = plugins.length\n ? plugins\n .reduce((acc, plugin) => {\n if (!plugin.name) {\n throwStyledError(15);\n }\n\n return phash(acc, plugin.name);\n }, SEED)\n .toString()\n : '';\n\n return stringifyRules;\n}\n","import React, { useContext, useEffect, useMemo, useState } from 'react';\nimport shallowequal from 'shallowequal';\nimport type stylis from 'stylis';\nimport StyleSheet from '../sheet';\nimport { ShouldForwardProp, Stringifier } from '../types';\nimport createStylisInstance from '../utils/stylis';\n\nexport const mainSheet: StyleSheet = new StyleSheet();\nexport const mainStylis: Stringifier = createStylisInstance();\n\nexport type IStyleSheetContext = {\n shouldForwardProp?: ShouldForwardProp<'web'> | undefined;\n styleSheet: StyleSheet;\n stylis: Stringifier;\n};\n\nexport const StyleSheetContext = React.createContext({\n shouldForwardProp: undefined,\n styleSheet: mainSheet,\n stylis: mainStylis,\n});\n\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\n\nexport type IStylisContext = Stringifier | void;\nexport const StylisContext = React.createContext(undefined);\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport function useStyleSheetContext() {\n return useContext(StyleSheetContext);\n}\n\nexport type IStyleSheetManager = React.PropsWithChildren<{\n /**\n * If desired, you can pass this prop to disable \"speedy\" insertion mode, which\n * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).\n * When disabled, rules are inserted as simple text into style blocks.\n */\n disableCSSOMInjection?: undefined | boolean;\n /**\n * If you are working exclusively with modern browsers, vendor prefixes can often be omitted\n * to reduce the weight of CSS on the page.\n */\n enableVendorPrefixes?: undefined | boolean;\n /**\n * Provide an optional selector to be prepended to all generated style rules.\n */\n namespace?: undefined | string;\n /**\n * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.\n */\n sheet?: undefined | StyleSheet;\n /**\n * Starting in v6, styled-components no longer does its own prop validation\n * and recommends use of transient props \"$prop\" to pass style-only props to\n * components. If for some reason you are not able to use transient props, a\n * prop validation function can be provided via `StyleSheetManager`, such as\n * `@emotion/is-prop-valid`.\n *\n * When the return value is `true`, props will be forwarded to the DOM/underlying\n * component. If return value is `false`, the prop will be discarded after styles\n * are calculated.\n *\n * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will\n * override this default.\n */\n shouldForwardProp?: undefined | IStyleSheetContext['shouldForwardProp'];\n /**\n * An array of plugins to be run by stylis (style processor) during compilation.\n * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).\n *\n * \\* The plugin(s) must be compatible with stylis v4 or above.\n */\n stylisPlugins?: undefined | stylis.Middleware[];\n /**\n * Provide an alternate DOM node to host generated styles; useful for iframes.\n */\n target?: undefined | HTMLElement;\n}>;\n\nexport function StyleSheetManager(props: IStyleSheetManager): JSX.Element {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const { styleSheet } = useStyleSheetContext();\n\n const resolvedStyleSheet = useMemo(() => {\n let sheet = styleSheet;\n\n if (props.sheet) {\n sheet = props.sheet;\n } else if (props.target) {\n sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n }\n\n if (props.disableCSSOMInjection) {\n sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n }\n\n return sheet;\n }, [props.disableCSSOMInjection, props.sheet, props.target, styleSheet]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },\n plugins,\n }),\n [props.enableVendorPrefixes, props.namespace, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n const styleSheetContextValue = useMemo(\n () => ({\n shouldForwardProp: props.shouldForwardProp,\n styleSheet: resolvedStyleSheet,\n stylis,\n }),\n [props.shouldForwardProp, resolvedStyleSheet, stylis]\n );\n\n return (\n