@codecademy/gamut-styles

Index: package/dist/utilities/directionIsRtl.js
===================================================================
--- package/dist/utilities/directionIsRtl.js
+++ package/dist/utilities/directionIsRtl.js
@@ -0,0 +1,50 @@
+import { useEffect, useLayoutEffect, useReducer } from 'react';
+
+/**
+ * Resolves whether layout direction is RTL for an element, including JSDOM where
+ * `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
+ */
+export function directionIsRtl(el) {
+  const ownDir = el.getAttribute('dir');
+  if (ownDir === 'rtl') return true;
+  if (ownDir === 'ltr') return false;
+  const {
+    direction
+  } = getComputedStyle(el);
+  if (direction === 'rtl' || direction === 'ltr') {
+    return direction === 'rtl';
+  }
+  return document.documentElement.getAttribute('dir') === 'rtl';
+}
+function resolveElement(elementRef) {
+  return elementRef?.current instanceof Element ? elementRef.current : document.documentElement;
+}
+
+/**
+ * Returns whether the resolved element’s direction is RTL, and updates when `dir`
+ * changes on the document subtree or after layout (so `ref.current` is current).
+ * Resolution uses {@link directionIsRtl}.
+ *
+ * @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
+ */
+export function useDirectionIsRtl(elementRef) {
+  const [, bump] = useReducer(n => n + 1, 0);
+  useLayoutEffect(() => {
+    bump();
+  }, [elementRef]);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      bump();
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ['dir'],
+      attributes: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
+  if (typeof document === 'undefined') {
+    return false;
+  }
+  return directionIsRtl(resolveElement(elementRef));
+}
\ No newline at end of file