@typespec/playground 0.5.0-dev.4 → 0.5.0-dev.6

package/dist/react/index.js

@@ -2323,18 +2323,13 @@ function createFileViewer(fileViewers) {
 }
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 var reservedModifierKeywords = ['shift', 'alt', 'meta', 'mod', 'ctrl'];
@@ -2360,7 +2355,7 @@ var mappedKeys = {
   ControlRight: 'ctrl'
 };
 function mapKey(key) {
-  return (mappedKeys[key] || key).trim().toLowerCase().replace(/key|digit|numpad|arrow/, '');
+  return (key && mappedKeys[key] || key || '').trim().toLowerCase().replace(/key|digit|numpad|arrow/, '');
 }
 function isHotkeyModifier(key) {
   return reservedModifierKeywords.includes(key);
@@ -2600,7 +2595,9 @@ var stopPropagation = function stopPropagation(e) {
 };
 var useSafeLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 function useHotkeys(keys, callback, options, dependencies) {
-  var ref = useRef(null);
+  var _useState = useState(null),
+    ref = _useState[0],
+    setRef = _useState[1];
   var hasTriggeredRef = useRef(false);
   var _options = !(options instanceof Array) ? options : !(dependencies instanceof Array) ? dependencies : undefined;
   var _keys = isReadonlyArray(keys) ? keys.join(_options == null ? void 0 : _options.splitKey) : keys;
@@ -2630,9 +2627,9 @@ function useHotkeys(keys, callback, options, dependencies) {
       }
       // TODO: SINCE THE EVENT IS NOW ATTACHED TO THE REF, THE ACTIVE ELEMENT CAN NEVER BE INSIDE THE REF. THE HOTKEY ONLY TRIGGERS IF THE
       // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WON'T TRIGGER THE HOTKEY.
-      if (ref.current !== null) {
-        var rootNode = ref.current.getRootNode();
-        if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement !== ref.current && !ref.current.contains(rootNode.activeElement)) {
+      if (ref !== null) {
+        var rootNode = ref.getRootNode();
+        if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement !== ref && !ref.contains(rootNode.activeElement)) {
           stopPropagation(e);
           return;
         }
@@ -2684,7 +2681,7 @@ function useHotkeys(keys, callback, options, dependencies) {
         listener(event, true);
       }
     };
-    var domNode = ref.current || (_options == null ? void 0 : _options.document) || document;
+    var domNode = ref || (_options == null ? void 0 : _options.document) || document;
     // @ts-ignore
     domNode.addEventListener('keyup', handleKeyUp);
     // @ts-ignore
@@ -2705,8 +2702,8 @@ function useHotkeys(keys, callback, options, dependencies) {
         });
       }
     };
-  }, [_keys, memoisedOptions, enabledScopes]);
-  return ref;
+  }, [ref, _keys, memoisedOptions, enabledScopes]);
+  return setRef;
 }
 
 /**
@@ -9556,7 +9553,7 @@ class TabsterCore {
     this._forgetMemorizedElements = [];
     this._wrappers = new Set();
     this._initQueue = [];
-    this._version = "8.0.1";
+    this._version = "8.1.0";
     this._noop = false;
 
     this.getWindow = () => {
@@ -10076,66 +10073,76 @@ function isHTMLElement(target) {
  * @returns single merged tabster attribute
  */ const useMergedTabsterAttributes_unstable = (...attributes)=>{
     'use no memo';
-    const stringAttributes = attributes.map((attribute)=>attribute[TABSTER_ATTRIBUTE_NAME]).filter(Boolean);
-    return React.useMemo(()=>{
-        let attribute = stringAttributes[0];
-        attributes.shift();
-        for (const attr of stringAttributes){
-            attribute = mergeAttributes(attribute, attr);
+    const stringAttributes = attributes.reduce((acc, curr)=>{
+        if (curr[TABSTER_ATTRIBUTE_NAME]) {
+            acc.push(curr[TABSTER_ATTRIBUTE_NAME]);
         }
-        return {
-            [TABSTER_ATTRIBUTE_NAME]: attribute
-        };
+        return acc;
+    }, []);
+    if (process.env.NODE_ENV !== 'production') {
+        // ignoring rules of hooks because this is a condition based on the environment
+        // it's safe to ignore the rule
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useWarnIfUnstableAttributes(stringAttributes);
+    }
+    return React.useMemo(()=>({
+            [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined
+        }), // disable exhaustive-deps because we want to memoize the result of the reduction
+    // this is safe because the collection of attributes is not expected to change at runtime
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, stringAttributes);
+    stringAttributes);
 };
-function mergeAttributes(a, b) {
-    if (!b) {
-        return a;
-    }
-    let aParsed = {};
-    let bParsed = {};
-    if (a) {
-        try {
-            aParsed = JSON.parse(a);
-        // eslint-disable-next-line no-empty
-        } catch  {}
-    }
-    if (b) {
-        try {
-            bParsed = JSON.parse(b);
-        // eslint-disable-next-line no-empty
-        } catch  {}
+/**
+ * Merges two JSON strings into one.
+ */ const mergeJSONStrings = (a, b)=>JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));
+/**
+ * Tries to parse a JSON string and returns an object.
+ * If the JSON string is invalid, an empty object is returned.
+ */ const safelyParseJSON = (json)=>{
+    try {
+        return JSON.parse(json);
+    } catch  {
+        return {};
     }
-    return JSON.stringify({
-        ...aParsed,
-        ...bParsed
-    });
-}
-
+};
 /**
- * @internal
+ * Helper hook that ensures that the attributes passed to the hook are stable.
+ * This is necessary because the attributes are expected to not change at runtime.
  *
- * @param entry - CSS bucket entry that can be either a string or an array
- * @returns An array where the first element is the CSS rule
- */
-function normalizeCSSBucketEntry(entry) {
-  if (!Array.isArray(entry)) {
-    return [entry];
-  }
-  if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
-    throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
-  }
-  return entry;
-}
+ * This hook will console.warn if the attributes change at runtime.
+ */ const useWarnIfUnstableAttributes = (attributes)=>{
+    'use no memo';
+    const initialAttributesRef = React.useRef(attributes);
+    let isStable = initialAttributesRef.current.length === attributes.length;
+    if (initialAttributesRef.current !== attributes && isStable) {
+        for(let i = 0; i < attributes.length; i++){
+            if (initialAttributesRef.current[i] !== attributes[i]) {
+                isStable = false;
+                break;
+            }
+        }
+    }
+    React.useEffect(()=>{
+        if (!isStable) {
+            const error = new Error();
+            // eslint-disable-next-line no-console
+            console.warn(/** #__DE-INDENT__ */ `
+        @fluentui/react-tabster [useMergedTabsterAttributes]:
+        The attributes passed to the hook changed at runtime.
+        This might lead to unexpected behavior, please ensure that the attributes are stable.
+        ${error.stack}
+      `);
+        }
+    }, [
+        isStable
+    ]);
+};
 
 // ----
-
 // Heads up!
 // These constants are global and will be shared between Griffel instances.
 // Any change in them should happen only in a MAJOR version. If it happens,
 // please change "__NAMESPACE_PREFIX__" to include a version.
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const __GLOBAL__ = typeof window === 'undefined' ? global : window;
 const __NAMESPACE_PREFIX__ = '@griffel/';
@@ -10145,232 +10152,31 @@ function getGlobalVar(name, defaultValue) {
   }
   return __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)];
 }
-
 /** @internal */
 const DEBUG_RESET_CLASSES = /*#__PURE__*/getGlobalVar('DEBUG_RESET_CLASSES', {});
-
 /** @internal */
 const DEFINITION_LOOKUP_TABLE = /*#__PURE__*/getGlobalVar('DEFINITION_LOOKUP_TABLE', {});
-
 // ----
-
 /** @internal */
 const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
-
 /** @internal */
 const DATA_PRIORITY_ATTR = 'data-priority';
-
 /** @internal */
 const RESET_HASH_PREFIX = 'r';
-
 /** @internal */
 const SEQUENCE_HASH_LENGTH = 7;
-
 /** @internal */
 const SEQUENCE_PREFIX = '___';
-
 /** @internal */
 const DEBUG_SEQUENCE_SEPARATOR = '_';
-
 /** @internal */
 const SEQUENCE_SIZE = process.env.NODE_ENV === 'production' ? SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH : SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH + DEBUG_SEQUENCE_SEPARATOR.length + SEQUENCE_HASH_LENGTH;
-
 // indexes for values in LookupItem tuple
-
 /** @internal */
 const LOOKUP_DEFINITIONS_INDEX = 0;
-
 /** @internal */
 const LOOKUP_DIR_INDEX = 1;
 
-function createIsomorphicStyleSheet(styleElement, bucketName, priority, elementAttributes) {
-  // no CSSStyleSheet in SSR, just append rules here for server render
-  const __cssRulesForSSR = [];
-  elementAttributes[DATA_BUCKET_ATTR] = bucketName;
-  elementAttributes[DATA_PRIORITY_ATTR] = String(priority);
-  if (styleElement) {
-    for (const attrName in elementAttributes) {
-      styleElement.setAttribute(attrName, elementAttributes[attrName]);
-    }
-  }
-  function insertRule(rule) {
-    if (styleElement != null && styleElement.sheet) {
-      return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
-    }
-    return __cssRulesForSSR.push(rule);
-  }
-  return {
-    elementAttributes,
-    insertRule,
-    element: styleElement,
-    bucketName,
-    cssRules() {
-      if (styleElement != null && styleElement.sheet) {
-        return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
-      }
-      return __cssRulesForSSR;
-    }
-  };
-}
-
-/**
- * Ordered style buckets using their short pseudo name.
- *
- * @internal
- */
-const styleBucketOrdering = [
-// reset styles
-'r',
-// catch-all
-'d',
-// link
-'l',
-// visited
-'v',
-// focus-within
-'w',
-// focus
-'f',
-// focus-visible
-'i',
-// hover
-'h',
-// active
-'a',
-// at rules for reset styles
-'s',
-// keyframes
-'k',
-// at-rules
-'t',
-// @media rules
-'m',
-// @container rules
-'c'];
-
-// avoid repeatedly calling `indexOf` to determine order during new insertions
-const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
-  acc[cur] = j;
-  return acc;
-}, {});
-function getStyleSheetKey(bucketName, media, priority) {
-  return (bucketName === 'm' ? bucketName + media : bucketName) + priority;
-}
-
-/**
- * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
- */
-function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
-  var _ref, _ref2;
-  const isMediaBucket = bucketName === 'm';
-  const media = (_ref = metadata['m']) != null ? _ref : '0';
-  const priority = (_ref2 = metadata['p']) != null ? _ref2 : 0;
-  const stylesheetKey = getStyleSheetKey(bucketName, media, priority);
-  if (!renderer.stylesheets[stylesheetKey]) {
-    const tag = targetDocument && targetDocument.createElement('style');
-    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, priority, Object.assign({}, renderer.styleElementAttributes, isMediaBucket && {
-      media
-    }));
-    renderer.stylesheets[stylesheetKey] = stylesheet;
-    if (targetDocument && tag) {
-      targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
-    }
-  }
-  return renderer.stylesheets[stylesheetKey];
-}
-function isSameInsertionKey(element, bucketName, metadata) {
-  var _ref3, _element$media;
-  const targetKey = bucketName + ((_ref3 = metadata['m']) != null ? _ref3 : '');
-  const elementKey = element.getAttribute(DATA_BUCKET_ATTR) + ((_element$media = element.media) != null ? _element$media : '');
-  return targetKey === elementKey;
-}
-
-/**
- * Finds an element before which the new bucket style element should be inserted following the bucket sort order.
- *
- * @param targetDocument - A document
- * @param insertionPoint - An element that will be used as an initial insertion point
- * @param targetBucket - The bucket that should be inserted to DOM
- * @param renderer - Griffel renderer
- * @param metadata - metadata for CSS rule
- * @returns - Smallest style element with greater sort order than the current bucket
- */
-function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata = {}) {
-  var _ref4, _ref5;
-  const targetOrder = styleBucketOrderingMap[targetBucket];
-  const media = (_ref4 = metadata['m']) != null ? _ref4 : '';
-  const priority = (_ref5 = metadata['p']) != null ? _ref5 : 0;
-
-  // Similar to javascript sort comparators where
-  // a positive value is increasing sort order
-  // a negative value is decreasing sort order
-  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
-  let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
-  if (targetBucket === 'm') {
-    const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
-
-    // only reduce the scope of the search and change comparer
-    // if there are other media buckets already on the page
-    if (mediaElements.length) {
-      styleElements = mediaElements;
-      comparer = el => renderer.compareMediaQueries(media, el.media);
-    }
-  }
-  const comparerWithPriority = el => {
-    if (isSameInsertionKey(el, targetBucket, metadata)) {
-      return priority - Number(el.getAttribute('data-priority'));
-    }
-    return comparer(el);
-  };
-  const length = styleElements.length;
-  let index = length - 1;
-  while (index >= 0) {
-    const styleElement = styleElements.item(index);
-    if (comparerWithPriority(styleElement) > 0) {
-      return styleElement.nextSibling;
-    }
-    index--;
-  }
-  if (length > 0) {
-    return styleElements.item(0);
-  }
-  return insertionPoint ? insertionPoint.nextSibling : null;
-}
-
-/**
- * Suffixes to be ignored in case of error
- */
-const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
-const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
-
-/**
- * @internal
- *
- * Calls `sheet.insertRule` and catches errors related to browser prefixes.
- */
-function safeInsertRule(sheet, ruleCSS) {
-  try {
-    sheet.insertRule(ruleCSS);
-  } catch (e) {
-    // We've disabled these warnings due to false-positive errors with browser prefixes
-    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-      // eslint-disable-next-line no-console
-      console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
-    }
-  }
-}
-
-const isDevToolsEnabled = /*#__PURE__*/(() => {
-  // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
-  // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
-  try {
-    var _window$sessionStorag;
-    return Boolean(typeof window !== 'undefined' && ((_window$sessionStorag = window.sessionStorage) == null ? void 0 : _window$sessionStorag.getItem('__GRIFFEL_DEVTOOLS__')));
-  } catch (e) {
-    return false;
-  }
-})();
-
 /* eslint-disable */
 // Inspired by https://github.com/garycourt/murmurhash-js
 // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
@@ -10454,7 +10260,6 @@ function reduceToClassName(classMap, dir) {
   // `hashString` is needed to handle `null` values in a class map as they don't produce any classes.
   let classString = '';
   let hashString = '';
-
   // eslint-disable-next-line guard-for-in
   for (const propertyHash in classMap) {
     const classNameMapping = classMap[propertyHash];
@@ -10469,7 +10274,6 @@ function reduceToClassName(classMap, dir) {
   }
   return [classString.slice(0, -1), hashString.slice(0, -1)];
 }
-
 /**
  * Reduces classname maps for slots to classname strings. Registers them in a definition cache to be used by
  * `mergeClasses()`.
@@ -10478,11 +10282,9 @@ function reduceToClassName(classMap, dir) {
  */
 function reduceToClassNameForSlots(classesMapBySlot, dir) {
   const classNamesForSlots = {};
-
   // eslint-disable-next-line guard-for-in
   for (const slotName in classesMapBySlot) {
     const [slotClasses, slotClassesHash] = reduceToClassName(classesMapBySlot[slotName], dir);
-
     // Handles a case when there are no classes in a set i.e. "makeStyles({ root: {} })"
     if (slotClassesHash === '') {
       classNamesForSlots[slotName] = '';
@@ -10498,33 +10300,12 @@ function reduceToClassNameForSlots(classesMapBySlot, dir) {
 
 // Contains a mapping of previously resolved sequences of atomic classnames
 const mergeClassesCachedResults = {};
-
-/**
- * Function can take any number of arguments, joins classes together and deduplicates atomic declarations generated by
- * `makeStyles()`. Handles scoped directional styles.
- *
- * Classnames can be of any length, this function can take both atomic declarations and class names.
- *
- * Input:
- * ```
- * // not real classes
- * mergeClasses('ui-button', 'displayflex', 'displaygrid')
- * ```
- *
- * Output:
- * ```
- * 'ui-button displaygrid'
- * ```
- */
-
 function mergeClasses() {
   // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
   // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
   /* eslint-disable prefer-rest-params */
-
   let dir = null;
   let resultClassName = '';
-
   // Is used as a cache key to avoid object merging
   let sequenceMatch = '';
   const sequencesIds = new Array(arguments.length);
@@ -10551,7 +10332,6 @@ function mergeClasses() {
         resultClassName += className + ' ';
       } else {
         const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE);
-
         // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
         if (sequenceIndex > 0) {
           resultClassName += className.slice(0, sequenceIndex);
@@ -10567,13 +10347,11 @@ function mergeClasses() {
       }
     }
   }
-
   // .slice() there allows to avoid trailing space for non-atomic classes
   // "ui-button ui-flex " => "ui-button ui-flex"
   if (sequenceMatch === '') {
     return resultClassName.slice(0, -1);
   }
-
   // It's safe to reuse results to avoid continuous merging as results are stable
   // "__seq1 ... __seq2 ..." => "__seq12 ..."
   const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
@@ -10602,13 +10380,11 @@ function mergeClasses() {
       }
     }
   }
-
   // eslint-disable-next-line prefer-spread
   const resultClassesMap = Object.assign.apply(Object,
   // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
   [{}].concat(sequenceMappings));
   const [atomicClasses, classesMapHash] = reduceToClassName(resultClassesMap, dir);
-
   // Each merge of classes generates a new sequence of atomic classes that needs to be registered
   const newSequenceHash = hashSequence(classesMapHash, dir, sequencesIds);
   const newClassName = newSequenceHash + ' ' + atomicClasses;
@@ -10698,7 +10474,7 @@ function getDebugTree(debugSequenceHash, parentNode) {
     return undefined;
   }
   const parentLookupItem = parentNode ? DEFINITION_LOOKUP_TABLE[parentNode.sequenceHash] : undefined;
-  const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode == null ? void 0 : parentNode.debugClassNames, parentNode == null ? void 0 : parentNode.children);
+  const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode === null || parentNode === void 0 ? void 0 : parentNode.debugClassNames, parentNode === null || parentNode === void 0 ? void 0 : parentNode.children);
   const node = {
     sequenceHash: debugSequenceHash,
     direction: lookupItem[1],
@@ -10713,7 +10489,6 @@ function getDebugTree(debugSequenceHash, parentNode) {
       node.children.push(child);
     }
   });
-
   // if it's leaf (makeStyle node), get css rules
   if (!node.children.length) {
     node.rules = {};
@@ -10757,10 +10532,207 @@ function injectDevTools(document) {
   });
 }
 
+const isDevToolsEnabled = /*#__PURE__*/(() => {
+  var _a;
+  // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
+  // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
+  try {
+    return Boolean(typeof window !== 'undefined' && ((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem('__GRIFFEL_DEVTOOLS__')));
+  } catch (e) {
+    return false;
+  }
+})();
+
+/**
+ * @internal
+ *
+ * @param entry - CSS bucket entry that can be either a string or an array
+ * @returns An array where the first element is the CSS rule
+ */
+function normalizeCSSBucketEntry(entry) {
+  if (!Array.isArray(entry)) {
+    return [entry];
+  }
+  if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
+    throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
+  }
+  return entry;
+}
+
+function createIsomorphicStyleSheet(styleElement, bucketName, priority, elementAttributes) {
+  // no CSSStyleSheet in SSR, just append rules here for server render
+  const __cssRulesForSSR = [];
+  elementAttributes[DATA_BUCKET_ATTR] = bucketName;
+  elementAttributes[DATA_PRIORITY_ATTR] = String(priority);
+  if (styleElement) {
+    for (const attrName in elementAttributes) {
+      styleElement.setAttribute(attrName, elementAttributes[attrName]);
+    }
+  }
+  function insertRule(rule) {
+    if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
+      return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
+    }
+    return __cssRulesForSSR.push(rule);
+  }
+  return {
+    elementAttributes,
+    insertRule,
+    element: styleElement,
+    bucketName,
+    cssRules() {
+      if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
+        return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
+      }
+      return __cssRulesForSSR;
+    }
+  };
+}
+
+/**
+ * Ordered style buckets using their short pseudo name.
+ *
+ * @internal
+ */
+const styleBucketOrdering = [
+// reset styles
+'r',
+// catch-all
+'d',
+// link
+'l',
+// visited
+'v',
+// focus-within
+'w',
+// focus
+'f',
+// focus-visible
+'i',
+// hover
+'h',
+// active
+'a',
+// at rules for reset styles
+'s',
+// keyframes
+'k',
+// at-rules
+'t',
+// @media rules
+'m',
+// @container rules
+'c'];
+// avoid repeatedly calling `indexOf` to determine order during new insertions
+const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur] = j;
+  return acc;
+}, {});
+function getStyleSheetKey(bucketName, media, priority) {
+  return (bucketName === 'm' ? bucketName + media : bucketName) + priority;
+}
+/**
+ * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
+ */
+function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
+  var _a, _b;
+  const isMediaBucket = bucketName === 'm';
+  const media = (_a = metadata['m']) !== null && _a !== void 0 ? _a : '0';
+  const priority = (_b = metadata['p']) !== null && _b !== void 0 ? _b : 0;
+  const stylesheetKey = getStyleSheetKey(bucketName, media, priority);
+  if (!renderer.stylesheets[stylesheetKey]) {
+    const tag = targetDocument && targetDocument.createElement('style');
+    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, priority, Object.assign({}, renderer.styleElementAttributes, isMediaBucket && {
+      media
+    }));
+    renderer.stylesheets[stylesheetKey] = stylesheet;
+    if (targetDocument && tag) {
+      targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
+    }
+  }
+  return renderer.stylesheets[stylesheetKey];
+}
+function isSameInsertionKey(element, bucketName, metadata) {
+  var _a, _b;
+  const targetKey = bucketName + ((_a = metadata['m']) !== null && _a !== void 0 ? _a : '');
+  const elementKey = element.getAttribute(DATA_BUCKET_ATTR) + ((_b = element.media) !== null && _b !== void 0 ? _b : '');
+  return targetKey === elementKey;
+}
+/**
+ * Finds an element before which the new bucket style element should be inserted following the bucket sort order.
+ *
+ * @param targetDocument - A document
+ * @param insertionPoint - An element that will be used as an initial insertion point
+ * @param targetBucket - The bucket that should be inserted to DOM
+ * @param renderer - Griffel renderer
+ * @param metadata - metadata for CSS rule
+ * @returns - Smallest style element with greater sort order than the current bucket
+ */
+function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata = {}) {
+  var _a, _b;
+  const targetOrder = styleBucketOrderingMap[targetBucket];
+  const media = (_a = metadata['m']) !== null && _a !== void 0 ? _a : '';
+  const priority = (_b = metadata['p']) !== null && _b !== void 0 ? _b : 0;
+  // Similar to javascript sort comparators where
+  // a positive value is increasing sort order
+  // a negative value is decreasing sort order
+  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
+  let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
+  if (targetBucket === 'm') {
+    const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
+    // only reduce the scope of the search and change comparer
+    // if there are other media buckets already on the page
+    if (mediaElements.length) {
+      styleElements = mediaElements;
+      comparer = el => renderer.compareMediaQueries(media, el.media);
+    }
+  }
+  const comparerWithPriority = el => {
+    if (isSameInsertionKey(el, targetBucket, metadata)) {
+      return priority - Number(el.getAttribute('data-priority'));
+    }
+    return comparer(el);
+  };
+  const length = styleElements.length;
+  let index = length - 1;
+  while (index >= 0) {
+    const styleElement = styleElements.item(index);
+    if (comparerWithPriority(styleElement) > 0) {
+      return styleElement.nextSibling;
+    }
+    index--;
+  }
+  if (length > 0) {
+    return styleElements.item(0);
+  }
+  return insertionPoint ? insertionPoint.nextSibling : null;
+}
+
+/**
+ * Suffixes to be ignored in case of error
+ */
+const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
+const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
+/**
+ * @internal
+ *
+ * Calls `sheet.insertRule` and catches errors related to browser prefixes.
+ */
+function safeInsertRule(sheet, ruleCSS) {
+  try {
+    sheet.insertRule(ruleCSS);
+  } catch (e) {
+    // We've disabled these warnings due to false-positive errors with browser prefixes
+    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+      // eslint-disable-next-line no-console
+      console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
+    }
+  }
+}
+
 let lastIndex = 0;
 /** @internal */
 const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
-
 /**
  * Creates a new instances of a renderer.
  *
@@ -10768,12 +10740,14 @@ const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
  */
 function createDOMRenderer(targetDocument = typeof document === 'undefined' ? undefined : document, options = {}) {
   const {
+    classNameHashSalt,
     unstable_filterCSSRule,
     insertionPoint,
     styleElementAttributes,
     compareMediaQueries = defaultCompareMediaQueries
   } = options;
   const renderer = {
+    classNameHashSalt,
     insertionCache: {},
     stylesheets: {},
     styleElementAttributes: Object.freeze(styleElementAttributes),
@@ -10783,7 +10757,6 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
       // eslint-disable-next-line guard-for-in
       for (const styleBucketName in cssRules) {
         const cssRulesForBucket = cssRules[styleBucketName];
-
         // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
         for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
           const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
@@ -10812,28 +10785,10 @@ function createDOMRenderer(targetDocument = typeof document === 'undefined' ? un
   return renderer;
 }
 
-/**
- * Default implementation of insertion factory. Inserts styles only once per renderer and performs
- * insertion immediately after styles computation.
- *
- * @internal
- */
-const insertionFactory$1 = () => {
-  const insertionCache = {};
-  return function insertStyles(renderer, cssRules) {
-    if (insertionCache[renderer.id] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[renderer.id] = true;
-    }
-  };
-};
-
 // TODO: duplicated from https://github.com/lahmatiy/react-render-tracker/blob/main/src/publisher/react-integration/utils/stackTrace.ts
 // once it is published as a standalone npm package, remove this file
-
 // Adopted version of StackTrace-Parser
 // https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js
-
 const UNKNOWN_FUNCTION = '<unknown>';
 function parseStackTraceLine(line) {
   return parseChrome(line) || parseGecko(line) || parseJSC(line);
@@ -10849,7 +10804,6 @@ function parseChrome(line) {
   let loc = parts[2];
   const isNative = loc && loc.indexOf('native') === 0; // start of line
   const isEval = loc && loc.indexOf('eval') === 0; // start of line
-
   const submatch = chromeEvalRe.exec(loc);
   if (isEval && submatch != null) {
     // throw out eval line/column and use top-most line/column number
@@ -10898,7 +10852,7 @@ function getSourceURLfromError() {
     return undefined;
   }
   const result = parseStackTraceLine(userMakeStyleCallLine);
-  return result == null ? void 0 : result.loc;
+  return result === null || result === void 0 ? void 0 : result.loc;
 }
 function findUserMakeStyleCallInStacks(stacks) {
   for (let i = stacks.length - 1; i >= 0; --i) {
@@ -10914,6 +10868,22 @@ function findUserMakeStyleCallInStacks(stacks) {
   return undefined;
 }
 
+/**
+ * Default implementation of insertion factory. Inserts styles only once per renderer and performs
+ * insertion immediately after styles computation.
+ *
+ * @internal
+ */
+const insertionFactory$1 = () => {
+  const insertionCache = {};
+  return function insertStyles(renderer, cssRules) {
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};
+
 /**
  * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
  *
@@ -11008,7 +10978,6 @@ const insertionFactory = () => {
  * @private
  */
 const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
-
 /**
  * Returns an instance of current makeStyles() renderer.
  *
@@ -11022,7 +10991,6 @@ function useRenderer() {
  * @private
  */
 const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
-
 /**
  * Returns current directionality of the element's text.
  *
@@ -12808,7 +12776,7 @@ const renderCheckbox_unstable = (state)=>{
         children: [
             /*#__PURE__*/ jsx(state.input, {}),
             state.labelPosition === 'before' && state.label && /*#__PURE__*/ jsx(state.label, {}),
-            /*#__PURE__*/ jsx(state.indicator, {}),
+            state.indicator && /*#__PURE__*/ jsx(state.indicator, {}),
             state.labelPosition === 'after' && state.label && /*#__PURE__*/ jsx(state.label, {})
         ]
     });
@@ -31259,8 +31227,13 @@ const diagnostics = {
     unassignable: {
         severity: "error",
         messages: {
-            default: paramMessage `Type '${"value"}' is not assignable to type '${"targetType"}'`,
-            withDetails: paramMessage `Type '${"sourceType"}' is not assignable to type '${"targetType"}'\n  ${"details"}`,
+            default: paramMessage `Type '${"sourceType"}' is not assignable to type '${"targetType"}'`,
+        },
+    },
+    "property-unassignable": {
+        severity: "error",
+        messages: {
+            default: paramMessage `Types of property '${"propName"}' are incompatible`,
         },
     },
     "property-required": {
@@ -38807,7 +38780,7 @@ let manifest;
 try {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    manifest = (await import('../manifest-Cewnx59A-Cewnx59A.js')).default;
+    manifest = (await import('../manifest-onl5D1yL-onl5D1yL.js')).default;
 }
 catch {
     const name = "../dist/manifest.js";
@@ -40445,7 +40418,7 @@ function parse$1(original) {
     let sign = 1;
     let n;
     let exp;
-    let decimal;
+    let decimal = undefined;
     if (stringValue[0] === "-") {
         start = 1;
         sign = -1;
@@ -40481,6 +40454,7 @@ function parse$1(original) {
             }
             exp += Number(stringValue.slice(i + 1));
             stringValue = stringValue.slice(start, i);
+            decimal = Math.max(stringValue.length - exp, 0);
         }
         else if (exp === undefined) {
             // Integer.
@@ -40494,11 +40468,24 @@ function parse$1(original) {
         while (stringValue[end - 1] === "0" && end > adjustedPointIndex) {
             end--;
         }
+        // Only if there is 0 before the decimal point, keeps checking how many 0 there is after it and update the exponent accordingly.
+        if (start === adjustedPointIndex + 1) {
+            let cur = adjustedPointIndex;
+            while (stringValue[cur] === "0" && cur < end) {
+                cur++;
+                exp--;
+            }
+        }
         try {
             stringValue = stringValue.slice(0, end);
             stringValue = stringValue + "0".repeat(Math.max(exp - stringValue.length, 0)); // add remaining zeros for cases like 3e30
             n = BigInt(stringValue);
-            decimal = n === 0n ? 0 : Math.max(stringValue.length - exp, 0);
+            if (n === 0n) {
+                decimal = 0;
+            }
+            else if (decimal === undefined) {
+                decimal = Math.max(stringValue.length - Math.max(exp, 0), 0);
+            }
         }
         catch {
             throw new InvalidNumericError(`Invalid numeric value: ${original}`);
@@ -40511,8 +40498,8 @@ function stringify(value) {
         return "0";
     const n = value.n.toString();
     const sign = value.s === -1 ? "-" : "";
-    const int = value.e === 0 ? "0" : n.slice(0, value.e);
-    const decimal = value.e < n.length ? "." + n.slice(value.e).padStart(value.d, "0") : "";
+    const int = value.e <= 0 ? "0" : n.slice(0, value.e);
+    const decimal = value.e < n.length ? "." + n.slice(-value.d).padStart(value.d, "0") : "";
     return sign + int + decimal;
 }
 const equals = (a, b) => a.n === b.n && a.e === b.e;
@@ -40610,6 +40597,7 @@ var Related;
     Related[Related["true"] = 1] = "true";
     Related[Related["maybe"] = 2] = "maybe";
 })(Related || (Related = {}));
+// #endregion
 
 var ResolutionKind;
 (function (ResolutionKind) {
@@ -41931,6 +41919,41 @@ new Set([
     "intrinsic",
 ]);
 
+let currentProgram;
+/** @experimental */
+const TypekitPrototype = {};
+/** @experimental */
+function createTypekit() {
+    const tk = Object.create(TypekitPrototype);
+    Object.defineProperty(tk, "program", {
+        get() {
+            return currentProgram;
+        },
+    });
+    const handler = {
+        get(target, prop, receiver) {
+            const value = Reflect.get(target, prop, receiver);
+            if (prop === "program") {
+                // don't wrap program (probably need to ensure this isn't a nested program somewhere)
+                return value;
+            }
+            if (typeof value === "function") {
+                return function (...args) {
+                    return value.apply(proxy, args);
+                };
+            }
+            if (typeof value === "object" && value !== null) {
+                return new Proxy(value, handler);
+            }
+            return value;
+        },
+    };
+    const proxy = new Proxy(tk, handler);
+    return proxy;
+}
+/** @experimental */
+createTypekit();
+
 const globalLibraryUrlsLoadedSym = Symbol.for("TYPESPEC_LIBRARY_URLS_LOADED");
 if (globalThis[globalLibraryUrlsLoadedSym] === undefined) {
     globalThis[globalLibraryUrlsLoadedSym] = new Set();