@guardian/stand 0.0.40 → 0.0.42

package/dist/styleD/utils/semantic/mq.cjs

@@ -1,38 +1,55 @@
-'use strict';
-
-var breakpoints = require('../../build/typescript/semantic/breakpoints.cjs');
-
-const smidgen = 0.1;
+const require_breakpoints = require("../../build/typescript/semantic/breakpoints.cjs");
+//#region src/styleD/utils/semantic/mq.ts
+/**
+* Making this value much smaller than `1px` prevents
+* media queries falling between entire pixel values.
+*/
+const smidgen = .1;
 const parseMinPx = (value) => value === "0" ? 0 : parseFloat(value);
 const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
 const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
 const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
-const from = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
-    name,
-    minWidthQuery(parseMinPx(min))
-  ])
-);
-const until = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
-    name,
-    maxWidthQuery(parseMinPx(min))
-  ])
-);
-const between = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([fromName, fromMin]) => [
-    fromName,
-    {
-      and: Object.fromEntries(
-        Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
-          toName,
-          minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
-        ])
-      )
-    }
-  ])
-);
-
+/**
+* Returns a `min-width` media query string for the given breakpoint.
+* Use to apply styles at that breakpoint and above.
+*
+* @example
+* const styles = css`
+* 	 display: none;
+*   ${from.md} {
+*     display: block;
+*   }
+* `;
+*/
+const from = Object.fromEntries(Object.entries(require_breakpoints.semanticBreakpoints).map(([name, min]) => [name, minWidthQuery(parseMinPx(min))]));
+/**
+* Returns a `max-width` media query string for everything *below* the given
+* breakpoint (exclusive). Use to apply styles only on screens smaller than
+* where that breakpoint starts.
+*
+* @example
+* const styles = css`
+*   display: block;
+*   ${until.lg} {
+*     display: none;
+*   }
+* `;
+*/
+const until = Object.fromEntries(Object.entries(require_breakpoints.semanticBreakpoints).map(([name, min]) => [name, maxWidthQuery(parseMinPx(min))]));
+/**
+* Returns a combined `min-width` and `max-width` media query string for
+* the range starting at breakpoint A up to (but not including) breakpoint B.
+*
+* @example
+* const styles = css`
+*   display: none;
+*   ${between.md.and.lg} {
+*     display: block;
+*   }
+* `;
+*/
+const between = Object.fromEntries(Object.entries(require_breakpoints.semanticBreakpoints).map(([fromName, fromMin]) => [fromName, { and: Object.fromEntries(Object.entries(require_breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [toName, minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))])) }]));
+//#endregion
 exports.between = between;
 exports.from = from;
 exports.until = until;

package/dist/styleD/utils/semantic/mq.d.cts

@@ -0,0 +1,56 @@
+import { semanticBreakpoints } from "../../build/typescript/semantic/breakpoints.cjs";
+
+//#region src/styleD/utils/semantic/mq.d.ts
+type Breakpoint = keyof typeof semanticBreakpoints;
+/**
+ * Returns a `min-width` media query string for the given breakpoint.
+ * Use to apply styles at that breakpoint and above.
+ *
+ * @example
+ * const styles = css`
+ * 	 display: none;
+ *   ${from.md} {
+ *     display: block;
+ *   }
+ * `;
+ */
+declare const from: Record<"sm" | "md" | "lg", string>;
+/**
+ * Returns a `max-width` media query string for everything *below* the given
+ * breakpoint (exclusive). Use to apply styles only on screens smaller than
+ * where that breakpoint starts.
+ *
+ * @example
+ * const styles = css`
+ *   display: block;
+ *   ${until.lg} {
+ *     display: none;
+ *   }
+ * `;
+ */
+declare const until: Record<"sm" | "md" | "lg", string>;
+/**
+ * Returns a combined `min-width` and `max-width` media query string for
+ * the range starting at breakpoint A up to (but not including) breakpoint B.
+ *
+ * @example
+ * const styles = css`
+ *   display: none;
+ *   ${between.md.and.lg} {
+ *     display: block;
+ *   }
+ * `;
+ */
+declare const between: {
+  sm: {
+    and: Record<"md" | "lg", string>;
+  };
+  md: {
+    and: Record<"sm" | "lg", string>;
+  };
+  lg: {
+    and: Record<"sm" | "md", string>;
+  };
+};
+//#endregion
+export { Breakpoint, between, from, until };

package/dist/{types/styleD → styleD}/utils/semantic/mq.d.ts

@@ -1,5 +1,7 @@
-import { semanticBreakpoints } from '../../build/typescript/semantic/breakpoints';
-export type Breakpoint = keyof typeof semanticBreakpoints;
+import { semanticBreakpoints } from "../../build/typescript/semantic/breakpoints.js";
+
+//#region src/styleD/utils/semantic/mq.d.ts
+type Breakpoint = keyof typeof semanticBreakpoints;
 /**
  * Returns a `min-width` media query string for the given breakpoint.
  * Use to apply styles at that breakpoint and above.
@@ -12,7 +14,7 @@ export type Breakpoint = keyof typeof semanticBreakpoints;
  *   }
  * `;
  */
-export declare const from: Record<"sm" | "md" | "lg", string>;
+declare const from: Record<"sm" | "md" | "lg", string>;
 /**
  * Returns a `max-width` media query string for everything *below* the given
  * breakpoint (exclusive). Use to apply styles only on screens smaller than
@@ -26,7 +28,7 @@ export declare const from: Record<"sm" | "md" | "lg", string>;
  *   }
  * `;
  */
-export declare const until: Record<"sm" | "md" | "lg", string>;
+declare const until: Record<"sm" | "md" | "lg", string>;
 /**
  * Returns a combined `min-width` and `max-width` media query string for
  * the range starting at breakpoint A up to (but not including) breakpoint B.
@@ -39,14 +41,16 @@ export declare const until: Record<"sm" | "md" | "lg", string>;
  *   }
  * `;
  */
-export declare const between: {
-    sm: {
-        and: Record<"md" | "lg", string>;
-    };
-    md: {
-        and: Record<"sm" | "lg", string>;
-    };
-    lg: {
-        and: Record<"sm" | "md", string>;
-    };
+declare const between: {
+  sm: {
+    and: Record<"md" | "lg", string>;
+  };
+  md: {
+    and: Record<"sm" | "lg", string>;
+  };
+  lg: {
+    and: Record<"sm" | "md", string>;
+  };
 };
+//#endregion
+export { Breakpoint, between, from, until };

package/dist/styleD/utils/semantic/mq.js

@@ -1,26 +1,53 @@
-import { semanticBreakpoints } from '../../build/typescript/semantic/breakpoints.js';
-
-const smidgen = 0.1;
+import { semanticBreakpoints } from "../../build/typescript/semantic/breakpoints.js";
+//#region src/styleD/utils/semantic/mq.ts
+/**
+* Making this value much smaller than `1px` prevents
+* media queries falling between entire pixel values.
+*/
+const smidgen = .1;
 const parseMinPx = (value) => value === "0" ? 0 : parseFloat(value);
 const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
 const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
 const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
-const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
-  name,
-  minWidthQuery(parseMinPx(min))
-]));
-const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
-  name,
-  maxWidthQuery(parseMinPx(min))
-]));
-const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, fromMin]) => [
-  fromName,
-  {
-    and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
-      toName,
-      minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
-    ]))
-  }
-]));
-
+/**
+* Returns a `min-width` media query string for the given breakpoint.
+* Use to apply styles at that breakpoint and above.
+*
+* @example
+* const styles = css`
+* 	 display: none;
+*   ${from.md} {
+*     display: block;
+*   }
+* `;
+*/
+const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [name, minWidthQuery(parseMinPx(min))]));
+/**
+* Returns a `max-width` media query string for everything *below* the given
+* breakpoint (exclusive). Use to apply styles only on screens smaller than
+* where that breakpoint starts.
+*
+* @example
+* const styles = css`
+*   display: block;
+*   ${until.lg} {
+*     display: none;
+*   }
+* `;
+*/
+const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [name, maxWidthQuery(parseMinPx(min))]));
+/**
+* Returns a combined `min-width` and `max-width` media query string for
+* the range starting at breakpoint A up to (but not including) breakpoint B.
+*
+* @example
+* const styles = css`
+*   display: none;
+*   ${between.md.and.lg} {
+*     display: block;
+*   }
+* `;
+*/
+const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, fromMin]) => [fromName, { and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [toName, minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))])) }]));
+//#endregion
 export { between, from, until };

package/dist/styleD/utils/semantic/typography.cjs

@@ -1,21 +1,20 @@
-'use strict';
-
-var react = require('@emotion/react');
-
+require("../../../_virtual/_rolldown/runtime.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/styleD/utils/semantic/typography.ts
 const convertTypographyToEmotionStringStyle = (typography) => {
-  return react.css`
+	return _emotion_react.css`
 		font: ${typography.font};
 		letter-spacing: ${typography.letterSpacing};
 		font-variation-settings: \"wdth\" ${typography.fontWidth};
 	`;
 };
 const convertTypographyToEmotionObjectStyle = (typography) => {
-  return {
-    font: typography.font,
-    letterSpacing: typography.letterSpacing,
-    fontVariationSettings: `"wdth" ${typography.fontWidth}`
-  };
+	return {
+		font: typography.font,
+		letterSpacing: typography.letterSpacing,
+		fontVariationSettings: `"wdth" ${typography.fontWidth}`
+	};
 };
-
+//#endregion
 exports.convertTypographyToEmotionObjectStyle = convertTypographyToEmotionObjectStyle;
 exports.convertTypographyToEmotionStringStyle = convertTypographyToEmotionStringStyle;

package/dist/styleD/utils/semantic/typography.d.cts

@@ -0,0 +1,12 @@
+import { CSSObject, SerializedStyles } from "@emotion/react";
+
+//#region src/styleD/utils/semantic/typography.d.ts
+type SemanticTypography = {
+  font: string;
+  letterSpacing: string;
+  fontWidth: number;
+};
+declare const convertTypographyToEmotionStringStyle: (typography: SemanticTypography) => SerializedStyles;
+declare const convertTypographyToEmotionObjectStyle: (typography: SemanticTypography) => CSSObject;
+//#endregion
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle };

package/dist/styleD/utils/semantic/typography.d.ts

@@ -0,0 +1,12 @@
+import { CSSObject, SerializedStyles } from "@emotion/react";
+
+//#region src/styleD/utils/semantic/typography.d.ts
+type SemanticTypography = {
+  font: string;
+  letterSpacing: string;
+  fontWidth: number;
+};
+declare const convertTypographyToEmotionStringStyle: (typography: SemanticTypography) => SerializedStyles;
+declare const convertTypographyToEmotionObjectStyle: (typography: SemanticTypography) => CSSObject;
+//#endregion
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle };

package/dist/styleD/utils/semantic/typography.js

@@ -1,18 +1,18 @@
-import { css } from '@emotion/react';
-
+import { css } from "@emotion/react";
+//#region src/styleD/utils/semantic/typography.ts
 const convertTypographyToEmotionStringStyle = (typography) => {
-  return css`
+	return css`
 		font: ${typography.font};
 		letter-spacing: ${typography.letterSpacing};
 		font-variation-settings: \"wdth\" ${typography.fontWidth};
 	`;
 };
 const convertTypographyToEmotionObjectStyle = (typography) => {
-  return {
-    font: typography.font,
-    letterSpacing: typography.letterSpacing,
-    fontVariationSettings: `"wdth" ${typography.fontWidth}`
-  };
+	return {
+		font: typography.font,
+		letterSpacing: typography.letterSpacing,
+		fontVariationSettings: `"wdth" ${typography.fontWidth}`
+	};
 };
-
+//#endregion
 export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle };

package/dist/util/mergeDeep.cjs

@@ -1,19 +1,15 @@
-'use strict';
-
+//#region src/util/mergeDeep.ts
 const isObject = (obj) => obj && typeof obj === "object";
 function mergeDeep(obj1, obj2) {
-  return [obj1, obj2].reduce((prev, obj) => {
-    Object.keys(obj).forEach((key) => {
-      const pVal = prev[key];
-      const oVal = obj[key];
-      if (isObject(pVal) && isObject(oVal)) {
-        prev[key] = mergeDeep(pVal, oVal);
-      } else {
-        prev[key] = oVal;
-      }
-    });
-    return prev;
-  }, {});
+	return [obj1, obj2].reduce((prev, obj) => {
+		Object.keys(obj).forEach((key) => {
+			const pVal = prev[key];
+			const oVal = obj[key];
+			if (isObject(pVal) && isObject(oVal)) prev[key] = mergeDeep(pVal, oVal);
+			else prev[key] = oVal;
+		});
+		return prev;
+	}, {});
 }
-
+//#endregion
 exports.mergeDeep = mergeDeep;

package/dist/util/mergeDeep.js

@@ -1,17 +1,15 @@
+//#region src/util/mergeDeep.ts
 const isObject = (obj) => obj && typeof obj === "object";
 function mergeDeep(obj1, obj2) {
-  return [obj1, obj2].reduce((prev, obj) => {
-    Object.keys(obj).forEach((key) => {
-      const pVal = prev[key];
-      const oVal = obj[key];
-      if (isObject(pVal) && isObject(oVal)) {
-        prev[key] = mergeDeep(pVal, oVal);
-      } else {
-        prev[key] = oVal;
-      }
-    });
-    return prev;
-  }, {});
+	return [obj1, obj2].reduce((prev, obj) => {
+		Object.keys(obj).forEach((key) => {
+			const pVal = prev[key];
+			const oVal = obj[key];
+			if (isObject(pVal) && isObject(oVal)) prev[key] = mergeDeep(pVal, oVal);
+			else prev[key] = oVal;
+		});
+		return prev;
+	}, {});
 }
-
+//#endregion
 export { mergeDeep };

package/dist/util/reset.cjs

@@ -1,10 +1,4 @@
-'use strict';
-
-var react = require('@emotion/react');
-var reset = require('./reset.css.cjs');
-
-const GlobalResetStyles = react.css`
-	${reset}
-`;
-
-exports.GlobalResetStyles = GlobalResetStyles;
+//#region src/util/reset.css?inline
+var reset_default = "*, :after, :before {\n  box-sizing: border-box;\n}\n\nhtml {\n  -webkit-text-size-adjust: none;\n  text-size-adjust: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nhtml, body {\n  text-rendering: optimizelegibility;\n  font-feature-settings: \"kern\";\n  font-kerning: normal;\n  font-variant-ligatures: common-ligatures;\n}\n\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, menu, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n  border: 0;\n  margin: 0;\n  padding: 0;\n}\n\n[hidden] {\n  display: none;\n}\n\nbody {\n  min-height: 100svh;\n}\n\n.focus-ring {\n  outline-offset: -1px;\n  outline: .125rem solid #00f;\n}\n\n.focus-focus {\n  outline-offset: -1px;\n  outline: .125rem solid red;\n}\n";
+//#endregion
+exports.default = reset_default;

package/dist/util/reset.d.cts

@@ -0,0 +1,4 @@
+//#region src/util/reset.d.ts
+declare const GlobalResetStyles: import("@emotion/react").SerializedStyles;
+//#endregion
+export { GlobalResetStyles };

package/dist/util/reset.d.ts

@@ -0,0 +1,4 @@
+//#region src/util/reset.d.ts
+declare const GlobalResetStyles: import("@emotion/react").SerializedStyles;
+//#endregion
+export { GlobalResetStyles };

package/dist/util/reset.js

@@ -1,8 +1,4 @@
-import { css } from '@emotion/react';
-import reset from './reset.css.js';
-
-const GlobalResetStyles = css`
-	${reset}
-`;
-
-export { GlobalResetStyles };
+//#region src/util/reset.css?inline
+var reset_default = "*, :after, :before {\n  box-sizing: border-box;\n}\n\nhtml {\n  -webkit-text-size-adjust: none;\n  text-size-adjust: none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nhtml, body {\n  text-rendering: optimizelegibility;\n  font-feature-settings: \"kern\";\n  font-kerning: normal;\n  font-variant-ligatures: common-ligatures;\n}\n\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, menu, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n  border: 0;\n  margin: 0;\n  padding: 0;\n}\n\n[hidden] {\n  display: none;\n}\n\nbody {\n  min-height: 100svh;\n}\n\n.focus-ring {\n  outline-offset: -1px;\n  outline: .125rem solid #00f;\n}\n\n.focus-focus {\n  outline-offset: -1px;\n  outline: .125rem solid red;\n}\n";
+//#endregion
+export { reset_default as default };

package/dist/util/reset2.cjs

@@ -0,0 +1,8 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_reset = require("./reset.cjs");
+//#region src/util/reset.ts
+const GlobalResetStyles = require("@emotion/react").css`
+	${require_reset.default}
+`;
+//#endregion
+exports.GlobalResetStyles = GlobalResetStyles;

package/dist/util/reset2.js

@@ -0,0 +1,8 @@
+import reset_default from "./reset.js";
+import { css } from "@emotion/react";
+//#region src/util/reset.ts
+const GlobalResetStyles = css`
+	${reset_default}
+`;
+//#endregion
+export { GlobalResetStyles };

package/dist/util/types.d.cts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/util/types.d.ts
+interface DefaultProps<ThemeType, ClassNameType = undefined> {
+  /**
+   * Custom theme overrides for the component, this is the recommended way to
+   * customize the appearance of the component based on the design system tokens
+   */
+  theme?: DeepPartial<ThemeType>;
+  /**
+   * Class name to be applied to the component's root element, for scenarios where
+   * custom styling is needed outside of the design system theming.
+   *
+   * Either use type ClassNameType (when extending a component from react-aria-components)
+   * or optional string if ClassNameType is undefined/not provided.
+   */
+  className?: ClassNameType extends undefined ? string | undefined : ClassNameType;
+  /**
+   * If the theme does not cover all use cases, you can use this prop to
+   * override component styles by passing in the result of [emotion's `css` function/prop](https://emotion.sh/docs/introduction).
+   */
+  cssOverrides?: SerializedStyles | SerializedStyles[];
+}
+interface DefaultPropsWithChildren<ThemeType, ClassNameType = undefined, ChildrenType = React.ReactNode> extends DefaultProps<ThemeType, ClassNameType> {
+  /**
+   * The content of the component
+   */
+  children?: ChildrenType;
+}
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
+type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;
+//#endregion
+export { DeepPartial, DefaultProps, DefaultPropsWithChildren, Prettify };

package/dist/util/types.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/util/types.d.ts
+interface DefaultProps<ThemeType, ClassNameType = undefined> {
+  /**
+   * Custom theme overrides for the component, this is the recommended way to
+   * customize the appearance of the component based on the design system tokens
+   */
+  theme?: DeepPartial<ThemeType>;
+  /**
+   * Class name to be applied to the component's root element, for scenarios where
+   * custom styling is needed outside of the design system theming.
+   *
+   * Either use type ClassNameType (when extending a component from react-aria-components)
+   * or optional string if ClassNameType is undefined/not provided.
+   */
+  className?: ClassNameType extends undefined ? string | undefined : ClassNameType;
+  /**
+   * If the theme does not cover all use cases, you can use this prop to
+   * override component styles by passing in the result of [emotion's `css` function/prop](https://emotion.sh/docs/introduction).
+   */
+  cssOverrides?: SerializedStyles | SerializedStyles[];
+}
+interface DefaultPropsWithChildren<ThemeType, ClassNameType = undefined, ChildrenType = React.ReactNode> extends DefaultProps<ThemeType, ClassNameType> {
+  /**
+   * The content of the component
+   */
+  children?: ChildrenType;
+}
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
+type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;
+//#endregion
+export { DeepPartial, DefaultProps, DefaultPropsWithChildren, Prettify };

package/dist/util/useResize.cjs

@@ -1,34 +1,27 @@
-'use strict';
-
-var React = require('react');
-
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/util/useResize.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 const useResize = (callback, debounceMs = 100) => {
-  const callbackRef = React.useRef(callback);
-  useIsomorphicLayoutEffect(() => {
-    callbackRef.current = callback;
-  });
-  React.useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    let timeout = null;
-    const handleResize = () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      timeout = setTimeout(() => {
-        callbackRef.current();
-      }, debounceMs);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [debounceMs]);
+	const callbackRef = (0, react.useRef)(callback);
+	useIsomorphicLayoutEffect(() => {
+		callbackRef.current = callback;
+	});
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		let timeout = null;
+		const handleResize = () => {
+			if (timeout) clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				callbackRef.current();
+			}, debounceMs);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			if (timeout) clearTimeout(timeout);
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [debounceMs]);
 };
-
+//#endregion
 exports.useResize = useResize;