@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/form/useResizingTextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = \"24\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef: RefObject<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const { maxRows, resize, onChange = noop, containerRef } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [height, setHeight] = useState<number>();\n  const [scrollable, setScrollable] = useState(false);\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    if (!mask || !container) {\n      return;\n    }\n\n    const containerStyles = window.getComputedStyle(container);\n    const borderHeight =\n      parseFloat(containerStyles.borderTopWidth) +\n      parseFloat(containerStyles.borderBottomWidth);\n    let nextHeight = mask.scrollHeight + borderHeight;\n    /* istanbul ignore if */\n    if (maxRows > 0) {\n      const lineHeight = parseFloat(\n        window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT\n      );\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n\n      // only want the textarea to be scrollable if there's a limit on the rows\n      // since it'll flash the scrollbar on most OS during the height transition\n      if (nextHeight === maxHeight && !scrollable) {\n        setScrollable(true);\n      } else if (nextHeight !== maxHeight && scrollable) {\n        setScrollable(false);\n      }\n    }\n\n    setHeight(nextHeight + 2);\n  }, [containerRef, maxRows, scrollable]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    scrollable,\n    onChange(event) {\n      const mask = maskRef.current;\n      onChange(event);\n      if (event.isPropagationStopped() || !mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","maskRef","height","setHeight","scrollable","setScrollable","undefined","updateHeight","mask","current","container","containerStyles","window","getComputedStyle","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","lineHeight","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","event","isPropagationStopped","value","currentTarget"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAIH,QAAQ;AACf,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,0DAA0D;AAC1D,MAAMC,sBAAsB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA0CA,cAAc,GACd,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAWL,IAAI,EAAEM,YAAY,EAAE,GAAGJ;IAE3D,MAAMK,UAAUX,OAA4B;IAC5C,MAAM,CAACY,QAAQC,UAAU,GAAGZ;IAC5B,MAAM,CAACa,YAAYC,cAAc,GAAGd,SAAS;IAC7CF,UAAU;QACR,IAAIS,WAAW,QAAQ;YACrBK,UAAUG;QACZ;IACF,GAAG;QAACR;KAAO;IAEX,MAAMS,eAAenB,YAAY;QAC/B,MAAMoB,OAAOP,QAAQQ,OAAO;QAC5B,MAAMC,YAAYV,aAAaS,OAAO;QACtC,IAAI,CAACD,QAAQ,CAACE,WAAW;YACvB;QACF;QAEA,MAAMC,kBAAkBC,OAAOC,gBAAgB,CAACH;QAChD,MAAMI,eACJC,WAAWJ,gBAAgBK,cAAc,IACzCD,WAAWJ,gBAAgBM,iBAAiB;QAC9C,IAAIC,aAAaV,KAAKW,YAAY,GAAGL;QACrC,sBAAsB,GACtB,IAAIjB,UAAU,GAAG;YACf,MAAMuB,aAAaL,WACjBH,OAAOC,gBAAgB,CAACL,MAAMY,UAAU,IAAI3B;YAE9C,MAAM4B,YAAYxB,UAAUuB;YAC5BF,aAAaI,KAAKC,GAAG,CAACF,WAAWH;YAEjC,yEAAyE;YACzE,0EAA0E;YAC1E,IAAIA,eAAeG,aAAa,CAACjB,YAAY;gBAC3CC,cAAc;YAChB,OAAO,IAAIa,eAAeG,aAAajB,YAAY;gBACjDC,cAAc;YAChB;QACF;QAEAF,UAAUe,aAAa;IACzB,GAAG;QAAClB;QAAcH;QAASO;KAAW;IAEtC,MAAMoB,kBAAkBhC,kBAAkB;QACxCiC,KAAKxB;QACLyB,UAAUnB;QACVoB,eAAe;IACjB;IAEA,OAAO;QACLzB,QAAQ,OAAOA,WAAW,WAAW,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAGI;QACrDL,SAASuB;QACTpB;QACAL,UAAS6B,KAAK;YACZ,MAAMpB,OAAOP,QAAQQ,OAAO;YAC5BV,SAAS6B;YACT,IAAIA,MAAMC,oBAAoB,MAAM,CAACrB,QAAQV,WAAW,QAAQ;gBAC9D;YACF;YAEA,uEAAuE;YACvE,uEAAuE;YACvE,wBAAwB;YACxB,yEAAyE;YACzE,aAAa;YACb,2EAA2E;YAC3E,EAAE;YACF,yEAAyE;YACzE,4EAA4E;YAC5E,uEAAuE;YACvE,sDAAsD;YACtD,8EAA8E;YAC9E,cAAc;YACd,8EAA8E;YAC9E,sDAAsD;YACtD,6EAA6E;YAC7E,2EAA2E;YAC3E,0BAA0B;YAC1BU,KAAKsB,KAAK,GAAGF,MAAMG,aAAa,CAACD,KAAK;YACtCvB;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = 24;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef?: Ref<HTMLDivElement>;\n  disableTransition: boolean | undefined;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  containerRef: RefCallback<HTMLDivElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n  disableTransition: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const {\n    maxRows,\n    resize,\n    onChange = noop,\n    containerRef: propContainerRef,\n    disableTransition,\n  } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);\n  const [height, setHeight] = useState<number>();\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  // Since access to the DOM is required to calculate the current height of the\n  // textarea, do not enable the height transition until it has been calculated\n  // once.\n  const isHeightSet = useRef(true);\n  useEffect(() => {\n    isHeightSet.current = !height;\n  }, [height]);\n\n  // Do not enable the scrollbar until the max height has been reached since\n  // it'll flash as the user types on OS that display scrollbars.\n  //\n  // Note: This does cause an infinite loop issue on browsers that display OS\n  // when rendered in a flex/grid container and a \"fluid\" width since:\n  // - the width changes when the overflow changes to `auto`\n  // - the resize observer triggers since there was a width change\n  // - the number of rows imght change because of this width change\n  // - it might no longer be at the max height, so remove the scrollbar\n  // - restart\n  const [isMaxHeightReached, setMaxHeightReached] = useState(false);\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    /* c8 ignore start */\n    if (!mask || !container) {\n      return;\n    }\n    /* c8 ignore stop */\n\n    const containerStyles = window.getComputedStyle(container);\n    const isBorderBox = containerStyles.boxSizing === \"border-box\";\n    let borderHeight = 0;\n    if (isBorderBox) {\n      borderHeight =\n        parseFloat(containerStyles.borderTopWidth) +\n        parseFloat(containerStyles.borderBottomWidth);\n    }\n\n    let nextHeight = mask.scrollHeight + borderHeight;\n    if (maxRows > 0) {\n      nextHeight -= borderHeight;\n      const maskStyles = window.getComputedStyle(mask);\n      // in tests, this is `\"normal\"` by default instead of a number\n      let lineHeight = parseFloat(maskStyles.lineHeight);\n      if (Number.isNaN(lineHeight)) {\n        lineHeight = DEFAULT_LINE_HEIGHT;\n      }\n\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n      setMaxHeightReached(nextHeight === maxHeight);\n      nextHeight += borderHeight;\n    }\n\n    // This just makes snapshots look nicer since `nextHeight` will be 0 in\n    // tests unless the user mocks out all the DOM properties\n    if (nextHeight) {\n      setHeight(nextHeight);\n    }\n  }, [containerRef, maxRows]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    containerRef: containerRefCallback,\n    scrollable: maxRows > 0 && isMaxHeightReached,\n    disableTransition: disableTransition || isHeightSet.current,\n    onChange(event) {\n      onChange(event);\n\n      const mask = maskRef.current;\n      if (!mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useEnsuredRef","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","propContainerRef","disableTransition","maskRef","containerRefCallback","height","setHeight","undefined","isHeightSet","current","isMaxHeightReached","setMaxHeightReached","updateHeight","mask","container","containerStyles","window","getComputedStyle","isBorderBox","boxSizing","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","maskStyles","lineHeight","Number","isNaN","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","scrollable","event","value","currentTarget"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAIH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,0DAA0D;AAC1D,MAAMC,sBAAsB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA6CA,cAAc,GACd,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAWL,IAAI,EACfM,cAAcC,gBAAgB,EAC9BC,iBAAiB,EAClB,GAAGN;IAEJ,MAAMO,UAAUd,OAA4B;IAC5C,MAAM,CAACW,cAAcI,qBAAqB,GAAGb,cAAcU;IAC3D,MAAM,CAACI,QAAQC,UAAU,GAAGhB;IAC5BF,UAAU;QACR,IAAIU,WAAW,QAAQ;YACrBQ,UAAUC;QACZ;IACF,GAAG;QAACT;KAAO;IAEX,6EAA6E;IAC7E,6EAA6E;IAC7E,QAAQ;IACR,MAAMU,cAAcnB,OAAO;IAC3BD,UAAU;QACRoB,YAAYC,OAAO,GAAG,CAACJ;IACzB,GAAG;QAACA;KAAO;IAEX,0EAA0E;IAC1E,+DAA+D;IAC/D,EAAE;IACF,2EAA2E;IAC3E,oEAAoE;IACpE,0DAA0D;IAC1D,gEAAgE;IAChE,iEAAiE;IACjE,qEAAqE;IACrE,YAAY;IACZ,MAAM,CAACK,oBAAoBC,oBAAoB,GAAGrB,SAAS;IAC3D,MAAMsB,eAAezB,YAAY;QAC/B,MAAM0B,OAAOV,QAAQM,OAAO;QAC5B,MAAMK,YAAYd,aAAaS,OAAO;QACtC,mBAAmB,GACnB,IAAI,CAACI,QAAQ,CAACC,WAAW;YACvB;QACF;QACA,kBAAkB,GAElB,MAAMC,kBAAkBC,OAAOC,gBAAgB,CAACH;QAChD,MAAMI,cAAcH,gBAAgBI,SAAS,KAAK;QAClD,IAAIC,eAAe;QACnB,IAAIF,aAAa;YACfE,eACEC,WAAWN,gBAAgBO,cAAc,IACzCD,WAAWN,gBAAgBQ,iBAAiB;QAChD;QAEA,IAAIC,aAAaX,KAAKY,YAAY,GAAGL;QACrC,IAAIvB,UAAU,GAAG;YACf2B,cAAcJ;YACd,MAAMM,aAAaV,OAAOC,gBAAgB,CAACJ;YAC3C,8DAA8D;YAC9D,IAAIc,aAAaN,WAAWK,WAAWC,UAAU;YACjD,IAAIC,OAAOC,KAAK,CAACF,aAAa;gBAC5BA,aAAalC;YACf;YAEA,MAAMqC,YAAYjC,UAAU8B;YAC5BH,aAAaO,KAAKC,GAAG,CAACF,WAAWN;YACjCb,oBAAoBa,eAAeM;YACnCN,cAAcJ;QAChB;QAEA,uEAAuE;QACvE,yDAAyD;QACzD,IAAII,YAAY;YACdlB,UAAUkB;QACZ;IACF,GAAG;QAACxB;QAAcH;KAAQ;IAE1B,MAAMoC,kBAAkBzC,kBAAkB;QACxC0C,KAAK/B;QACLgC,UAAUvB;QACVwB,eAAe;IACjB;IAEA,OAAO;QACL/B,QAAQ,OAAOA,WAAW,WAAW,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAGE;QACrDJ,SAAS8B;QACTjC,cAAcI;QACdiC,YAAYxC,UAAU,KAAKa;QAC3BR,mBAAmBA,qBAAqBM,YAAYC,OAAO;QAC3DV,UAASuC,KAAK;YACZvC,SAASuC;YAET,MAAMzB,OAAOV,QAAQM,OAAO;YAC5B,IAAI,CAACI,QAAQf,WAAW,QAAQ;gBAC9B;YACF;YAEA,uEAAuE;YACvE,uEAAuE;YACvE,wBAAwB;YACxB,yEAAyE;YACzE,aAAa;YACb,2EAA2E;YAC3E,EAAE;YACF,yEAAyE;YACzE,4EAA4E;YAC5E,uEAAuE;YACvE,sDAAsD;YACtD,8EAA8E;YAC9E,cAAc;YACd,8EAA8E;YAC9E,sDAAsD;YACtD,6EAA6E;YAC7E,2EAA2E;YAC3E,0BAA0B;YAC1Be,KAAK0B,KAAK,GAAGD,MAAME,aAAa,CAACD,KAAK;YACtC3B;QACF;IACF;AACF"}

package/dist/form/useSelectCombobox.d.ts

@@ -0,0 +1,17 @@
+import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+    value: string;
+    values: readonly string[];
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function useSelectCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: SelectComboboxOptions<ComboboxEl, PopupEl>): SelectComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useSelectCombobox.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCombobox } from "./useCombobox.js";
+/**
+ * @remarks \@since 6.0.0
+ */ export function useSelectCombobox(options) {
+    const { value, values, ...comboboxOptions } = options;
+    return useCombobox({
+        ...comboboxOptions,
+        searchable: true,
+        extendKeyDown (movementData) {
+            const { event, show, focusLast, visible } = movementData;
+            if (visible) {
+                return;
+            }
+            switch(event.key){
+                case " ":
+                case "Home":
+                case "End":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    focusLast.current = event.key === "End";
+                    show();
+                    break;
+            }
+        },
+        getEnterDefaultFocusedIndex (options) {
+            const { focusLast } = options;
+            if (focusLast && !value) {
+                return values.length - 1;
+            }
+            return Math.max(0, values.findIndex((option)=>option === value));
+        }
+    });
+}
+
+//# sourceMappingURL=useSelectCombobox.js.map

package/dist/form/useSelectCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\n} from \"./useCombobox.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useSelectCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: SelectComboboxOptions<ComboboxEl, PopupEl>\n): SelectComboboxImplementation<ComboboxEl, PopupEl> {\n  const { value, values, ...comboboxOptions } = options;\n\n  return useCombobox({\n    ...comboboxOptions,\n    searchable: true,\n    extendKeyDown(movementData) {\n      const { event, show, focusLast, visible } = movementData;\n      if (visible) {\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n        case \"Home\":\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"End\";\n          show();\n          break;\n      }\n    },\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast } = options;\n      if (focusLast && !value) {\n        return values.length - 1;\n      }\n\n      return Math.max(\n        0,\n        values.findIndex((option) => option === value)\n      );\n    },\n  });\n}\n"],"names":["useCombobox","useSelectCombobox","options","value","values","comboboxOptions","searchable","extendKeyDown","movementData","event","show","focusLast","visible","key","preventDefault","stopPropagation","current","getEnterDefaultFocusedIndex","length","Math","max","findIndex","option"],"mappings":"AAAA;AACA,SACEA,WAAW,QAGN,mBAAmB;AAqB1B;;CAEC,GACD,OAAO,SAASC,kBAIdC,OAAmD;IAEnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,iBAAiB,GAAGH;IAE9C,OAAOF,YAAY;QACjB,GAAGK,eAAe;QAClBC,YAAY;QACZC,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGJ;YAC5C,IAAII,SAAS;gBACX;YACF;YAEA,OAAQH,MAAMI,GAAG;gBACf,KAAK;gBACL,KAAK;gBACL,KAAK;oBACHJ,MAAMK,cAAc;oBACpBL,MAAMM,eAAe;oBACrBJ,UAAUK,OAAO,GAAGP,MAAMI,GAAG,KAAK;oBAClCH;oBACA;YACJ;QACF;QACAO,6BAA4Bf,OAAO;YACjC,MAAM,EAAES,SAAS,EAAE,GAAGT;YACtB,IAAIS,aAAa,CAACR,OAAO;gBACvB,OAAOC,OAAOc,MAAM,GAAG;YACzB;YAEA,OAAOC,KAAKC,GAAG,CACb,GACAhB,OAAOiB,SAAS,CAAC,CAACC,SAAWA,WAAWnB;QAE5C;IACF;AACF"}

package/dist/form/utils.d.ts

@@ -27,7 +27,17 @@ export declare function tryToSubmitRelatedForm<E extends HTMLElement>(event: Key
  * @internal
  * @remarks \@since 6.0.0
  */
-export type ChangeableHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function isChangeableHTMLElement(element: Element | null): element is ChangeableHTMLElement;
 /**
  * This is used to trigger a change event for a form element.
  *

package/dist/form/utils.js

@@ -38,6 +38,12 @@
     }
     form.requestSubmit(submit);
 }
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function isChangeableHTMLElement(element) {
+    return !!element && "value" in element;
+}
 /**
  * This is used to trigger a change event for a form element.
  *

package/dist/form/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @remarks\n * \\@since 2.7.0\n * \\@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * \\@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type ChangeableHTMLElement =\n  | HTMLInputElement\n  | HTMLTextAreaElement\n  | HTMLSelectElement;\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @remarks \\@since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","triggerManualChangeEvent","element","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAWA;;;;;;CAMC,GACD,OAAO,SAASG,yBACdC,OAAqC,EACrCC,KAAsB;IAEtB,IAAI,CAACD,SAAS;QACZ;IACF;IAEA,MAAME,YAAYC,OAAOC,cAAc,CAACJ;IACxC,MAAMK,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACR,SAASC;IACrB,MAAMd,QAAQ,IAAIsB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDV,QAAQW,aAAa,CAACxB;AACxB"}
+{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @remarks\n * \\@since 2.7.0\n * \\@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * \\@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function isChangeableHTMLElement(\n  element: Element | null\n): element is ChangeableHTMLElement {\n  return !!element && \"value\" in element;\n}\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @remarks \\@since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","isChangeableHTMLElement","element","triggerManualChangeEvent","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAcA;;;CAGC,GACD,OAAO,SAASG,wBACdC,OAAuB;IAEvB,OAAO,CAAC,CAACA,WAAW,WAAWA;AACjC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdD,OAAqC,EACrCE,KAAsB;IAEtB,IAAI,CAACF,SAAS;QACZ;IACF;IAEA,MAAMG,YAAYC,OAAOC,cAAc,CAACL;IACxC,MAAMM,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACT,SAASE;IACrB,MAAMf,QAAQ,IAAIuB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDX,QAAQY,aAAa,CAACzB;AACxB"}

package/dist/hoverMode/useHoverMode.d.ts

@@ -10,11 +10,11 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
     /**
      * This can be used to override the `HoverModeContext`'s hover time.
      */
-    hoverTime?: number;
+    hoverTimeout?: number;
     /**
      * This can be used to override the `HoverModeContext`'s leave time.
      */
-    leaveTime?: number;
+    leaveTimeout?: number;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/hoverMode/useHoverMode.js

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 export function useHoverMode(options) {
-    const { disabled, hoverTime, hoverTimeoutRef, leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
+    const { disabled, hoverTimeout: hoverTime, hoverTimeoutRef, leaveTimeout: leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
     const state = useState(defaultVisible);
     let visible;
     let setVisible;

package/dist/hoverMode/useHoverMode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTime?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTime?: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow(id?: string | MouseEvent): void;\n  startHideFlow(): void;\n  clearVisibilityTimeout(): void;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * \\@since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTime,\n    hoverTimeoutRef,\n    leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTime","hoverTimeoutRef","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","hoverTimeout","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA+EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,SAAS,EACTC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGZ;IAEJ,MAAMa,QAAQf,SAASc;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBlB;IAC1B,MAAMmB,yBAAyBrB,YAAY;QACzCsB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXvB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMmB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBN;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLqB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAe9B,YACb,CAAC+B;YACC,MAAMC,eAAezB,aAAaC,gBAAgBgB,OAAO;YACzD,IAAIlB,YAAY,OAAO0B,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAIC;YACJ,IAAI,OAAOF,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEE,KAAKF,aAAa;YACpB,OAAO;gBACLE,KAAKF,UAAUG,aAAa,CAACD,EAAE;YACjC;YAEAnB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOa,UAAU,CAAC;gBAC5CxB,gBAAgBsB;gBAChBlB,WAAW;YACb,GAAGiB;QACL,GACA;YACElB;YACAO;YACAf;YACAK;YACAJ;YACAC;YACAO;SACD;QAEHqB,eAAepC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAO;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOa,UAAU,CAAC;gBAC5CpB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAf;YACAG;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}
+{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTimeout?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow(id?: string | MouseEvent): void;\n  startHideFlow(): void;\n  clearVisibilityTimeout(): void;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * \\@since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTimeout: hoverTime,\n    hoverTimeoutRef,\n    leaveTimeout: leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTimeout","hoverTime","hoverTimeoutRef","leaveTimeout","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA+EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,cAAcC,SAAS,EACvBC,eAAe,EACfC,cAAcC,SAAS,EACvBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGd;IAEJ,MAAMe,QAAQjB,SAASgB;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBpB;IAC1B,MAAMqB,yBAAyBvB,YAAY;QACzCwB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXzB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMqB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLuB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBiB,OAAO;YACzD,IAAIpB,YAAY,OAAOC,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAI2B;YACJ,IAAI,OAAOD,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEC,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAO;YACAjB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAjB;YACAK;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}

package/dist/icon/FontIcon.d.ts

@@ -18,6 +18,7 @@ export interface FontIconProps extends HTMLAttributes<HTMLElement>, FontIconClas
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element.
+ * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * the `forceSize`/`forceFontSize` props.
  */
 export declare const FontIcon: import("react").ForwardRefExoticComponent<FontIconProps & import("react").RefAttributes<HTMLElement>>;

package/dist/icon/FontIcon.js

@@ -12,9 +12,10 @@ import { icon } from "./styles.js";
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element.
+ * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * the `forceSize`/`forceFontSize` props.
  */ export const FontIcon = /*#__PURE__*/ forwardRef(function FontIcon(props, ref) {
-    const { className, children, "aria-hidden": ariaHidden = true, dense = false, theme, iconClassName = "material-icons", forceSize = false, forceFontSize = false, ...remaining } = props;
+    const { className, children, "aria-hidden": ariaHidden = true, dense = false, theme, iconClassName = "material-icons", ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         "aria-hidden": ariaHidden,
@@ -24,9 +25,7 @@ import { icon } from "./styles.js";
             dense,
             theme,
             className,
-            iconClassName,
-            forceSize,
-            forceFontSize
+            iconClassName
         }),
         children: children
     });

package/dist/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type FontIconClassNameOptions } from \"./styles.js\";\n\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLElement>,\n    FontIconClassNameOptions {\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons.\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * If you are using another font icon library that does not always create icons\n * with a perfect 1:1 scale (such as font awesome), it is recommended to use the\n * `forceSize` and `forceFontSize` props to fix the sizing issues.\n *\n * \\@remarks \\@since 6.0.0 Switched from `<i>` to `<span>` element.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      className,\n      children,\n      \"aria-hidden\": ariaHidden = true,\n      dense = false,\n      theme,\n      iconClassName = \"material-icons\",\n      forceSize = false,\n      forceFontSize = false,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n          forceSize,\n          forceFontSize,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","className","children","ariaHidden","dense","theme","iconClassName","forceSize","forceFontSize","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAuC,cAAc;AAYlE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,QAAQ,EACR,eAAeC,aAAa,IAAI,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,gBAAgB,gBAAgB,EAChCC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrB,GAAGC,WACJ,GAAGV;IAEJ,qBACE,KAACW;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbH,KAAKA;QACLC,WAAWJ,KAAK;YACde,MAAM;YACNR;YACAC;YACAJ;YACAK;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type FontIconClassNameOptions } from \"./styles.js\";\n\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLElement>,\n    FontIconClassNameOptions {\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons.\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * If you are using another font icon library that does not always create icons\n * with a perfect 1:1 scale (such as font awesome), it is recommended to use the\n * `forceSize` and `forceFontSize` props to fix the sizing issues.\n *\n * \\@remarks \\@since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      className,\n      children,\n      \"aria-hidden\": ariaHidden = true,\n      dense = false,\n      theme,\n      iconClassName = \"material-icons\",\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","className","children","ariaHidden","dense","theme","iconClassName","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAuC,cAAc;AAYlE;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,QAAQ,EACR,eAAeC,aAAa,IAAI,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,gBAAgB,gBAAgB,EAChC,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaN;QACbH,KAAKA;QACLC,WAAWJ,KAAK;YACda,MAAM;YACNN;YACAC;YACAJ;YACAK;QACF;kBAECJ;;AAGP,GACA"}

package/dist/icon/IconRotator.js

@@ -8,7 +8,7 @@ import { iconRotator } from "./styles.js";
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {
-    const { style, className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
+    const { className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
     const className = iconRotator({
         rotated,
         className: propClassName,
@@ -22,9 +22,8 @@ import { iconRotator } from "./styles.js";
     }
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
-        style: style,
-        className: className,
         ref: ref,
+        className: className,
         children: children
     });
 });

package/dist/icon/IconRotator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { iconRotator, type IconRotatorClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      style,\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} style={style} className={className} ref={ref}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","style","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,QAIT,QAAQ;AACf,SAASC,WAAW,QAA0C,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGT;IAEJ,MAAMG,YAAYL,YAAY;QAC5BO;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBV,eAAuCS,WAAW;QACtE,MAAMI,QAAQhB,SAASiB,IAAI,CAACL;QAC5B,qBAAOX,aAAae,OAAO;YACzBP,WAAWV,IAAIU,WAAWO,MAAMV,KAAK,CAACG,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,OAAOA;QAAOC,WAAWA;QAAWF,KAAKA;kBAC3DK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { iconRotator, type IconRotatorClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,QAIT,QAAQ;AACf,SAASC,WAAW,QAA0C,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}

package/dist/icon/MaterialIcon.d.ts

@@ -6,10 +6,10 @@ export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Part
     /** @defaultValue `true` */
     "aria-hidden"?: AriaAttributes["aria-hidden"];
     name: MaterialIconName;
+    children?: never;
 }
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useMaterialIconsFamily hook
+ * **Server Component**
  *
  * @remarks \@since 6.0.0
  */

package/dist/icon/MaterialIcon.js

@@ -1,16 +1,13 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useMaterialIconsFamily } from "./MaterialIconsProvider.js";
+import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useMaterialIconsFamily hook
+ * **Server Component**
  *
  * @remarks \@since 6.0.0
  */ export const MaterialIcon = /*#__PURE__*/ forwardRef(function MaterialIcon(props, ref) {
-    const { "aria-hidden": ariaHidden = true, name, family: propFamily, theme, dense, className, ...remaining } = props;
-    const family = useMaterialIconsFamily(propFamily);
+    const { "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ref: ref,
         "aria-hidden": ariaHidden,

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { useMaterialIconsFamily } from \"./MaterialIconsProvider.js\";\nimport { type MaterialIconName } from \"./material.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialIconName;\n}\n\n/**\n * **Client Component**\n * Might be able to become a server component if I remove the useMaterialIconsFamily hook\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family: propFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n    const family = useMaterialIconsFamily(propFamily);\n\n    return (\n      <span\n        ref={ref}\n        aria-hidden={ariaHidden}\n        {...remaining}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","useMaterialIconsFamily","icon","MaterialIcon","props","ref","ariaHidden","name","family","propFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAkD,QAAQ;AAC7E,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpE,SAASC,IAAI,QAA2C,cAAc;AAWtE;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,QAAQC,UAAU,EAClBC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IACJ,MAAMI,SAASP,uBAAuBQ;IAEtC,qBACE,KAACK;QACCT,KAAKA;QACLU,eAAaT;QACZ,GAAGO,SAAS;QACbD,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialIconName;\n  children?: never;\n}\n\n/**\n * **Server Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        ref={ref}\n        aria-hidden={ariaHidden}\n        {...remaining}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,IAAI,QAA2C,cAAc;AAYtE;;;;CAIC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACCT,KAAKA;QACLU,eAAaT;QACZ,GAAGO,SAAS;QACbD,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}

package/dist/icon/MaterialSymbol.d.ts

@@ -1,6 +1,6 @@
-import { type HTMLAttributes } from "react";
+import { type AriaAttributes, type HTMLAttributes } from "react";
 import { type MaterialSymbolName } from "./material.js";
-import { type MaterialSymbolCustomization, type MaterialSymbolFill, type MaterialSymbolGrade, type MaterialSymbolOpticalSize, type MaterialSymbolWeight } from "./MaterialSymbolsProvider.js";
+import { type MaterialSymbolCustomization, type MaterialSymbolFill, type MaterialSymbolGrade, type MaterialSymbolOpticalSize, type MaterialSymbolWeight } from "./materialConfig.js";
 import { type MaterialSymbolClassNameOptions } from "./styles.js";
 declare module "react" {
     interface CSSProperties {
@@ -14,12 +14,19 @@ declare module "react" {
  * @remarks \@since 6.0.0
  */
 export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, MaterialSymbolCustomization, Partial<MaterialSymbolClassNameOptions> {
+    /** @defaultValue `true` */
+    "aria-hidden"?: AriaAttributes["aria-hidden"];
     name: MaterialSymbolName;
     children?: never;
 }
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useFontVariationSettings hook
+ * **Server Component**
+ * This is a convenience component that provides autocomplete for all the
+ * available material symbols via the `name` prop.
+ *
+ * Note: You might notice IDE slowdowns for files that use this component since
+ * there are so many icons available. If it becomes an issue, just stop using
+ * this component and define the icons inline instead.
  *
  * @example
  * Simple Example
@@ -31,11 +38,11 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
  * function Example(): ReactElement {
  *   return (
  *     <>
- *       <MaterialSymbol symbol="" />
- *       <MaterialSymbol symbol="" type="outline" />
+ *       <MaterialSymbol symbol="close" />
+ *       <MaterialSymbol symbol="tune" type="outline" />
  *
- *       <MaterialSymbol symbol="" type="round" />
- *       <MaterialSymbol symbol="" type="sharp" />
+ *       <MaterialSymbol symbol="add" type="round" />
+ *       <MaterialSymbol symbol="air" type="sharp" />
  *     </>
  *   );
  * }

package/dist/icon/MaterialSymbol.js

@@ -1,11 +1,15 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useFontVariationSettings } from "./MaterialSymbolsProvider.js";
+import { getFontVariationSettings } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useFontVariationSettings hook
+ * **Server Component**
+ * This is a convenience component that provides autocomplete for all the
+ * available material symbols via the `name` prop.
+ *
+ * Note: You might notice IDE slowdowns for files that use this component since
+ * there are so many icons available. If it becomes an issue, just stop using
+ * this component and define the icons inline instead.
  *
  * @example
  * Simple Example
@@ -17,11 +21,11 @@ import { icon } from "./styles.js";
  * function Example(): ReactElement {
  *   return (
  *     <>
- *       <MaterialSymbol symbol="" />
- *       <MaterialSymbol symbol="" type="outline" />
+ *       <MaterialSymbol symbol="close" />
+ *       <MaterialSymbol symbol="tune" type="outline" />
  *
- *       <MaterialSymbol symbol="" type="round" />
- *       <MaterialSymbol symbol="" type="sharp" />
+ *       <MaterialSymbol symbol="add" type="round" />
+ *       <MaterialSymbol symbol="air" type="sharp" />
  *     </>
  *   );
  * }
@@ -33,13 +37,13 @@ import { icon } from "./styles.js";
  * @remarks \@since 6.0.0
  */ export const MaterialSymbol = /*#__PURE__*/ forwardRef(function MaterialSymbol(props, ref) {
     const { "aria-hidden": ariaHidden = true, className, name: symbol, style: propStyle, family: propFamily, fill, weight, grade, opticalSize, theme, dense, ...remaining } = props;
-    const { style, family } = useFontVariationSettings({
+    const { style, family } = getFontVariationSettings({
         style: propStyle,
-        family: propFamily,
         fill,
         weight,
         grade,
-        opticalSize
+        opticalSize,
+        family: propFamily
     });
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,

package/dist/icon/MaterialSymbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  useFontVariationSettings,\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n} from \"./MaterialSymbolsProvider.js\";\nimport { icon, type MaterialSymbolClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * **Client Component**\n * Might be able to become a server component if I remove the useFontVariationSettings hook\n *\n * @example\n * Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"\" />\n *       <MaterialSymbol symbol=\"\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"\" type=\"round\" />\n *       <MaterialSymbol symbol=\"\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = useFontVariationSettings({\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","useFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SACEC,wBAAwB,QAMnB,+BAA+B;AACtC,SAASC,IAAI,QAA6C,cAAc;AAsBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPC,QAAQC;QACRC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACI;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  getFontVariationSettings,\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n} from \"./materialConfig.js\";\nimport { icon, type MaterialSymbolClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * **Server Component**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SACEC,wBAAwB,QAMnB,sBAAsB;AAC7B,SAASC,IAAI,QAA6C,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}