SUM-290: Replace "Hidden" class with "tw-hidden" (#78)

eslint.config.mjs

@@ -32,7 +32,13 @@ const esLintConfig = tseslint.config(eslint.configs.recommended, ...tseslint.con
     "@typescript-eslint/require-await": "off",
     "no-console": ["error", { allow: ["warn", "error"] }],
     "no-fallthrough": "off",
-    "no-restricted-syntax": ["error", "Literal[value=/text-m[\\d]/i]"],
+    "no-restricted-syntax": ["error", {
+      selector: "Literal[value=/text-m[\\d]/i]",
+      message: "Classes like text-m# are deprecated and should be replaced with text-#."
+    }, {
+      selector: "Literal[value=/(?<![^\\s])hidden/i]",
+      message: "Tailwind class 'hidden' conflicts with Slate embed code. Use tw-hidden instead."
+    }],
     "prettier/prettier": ["error"],
     "@typescript-eslint/no-unused-vars": [
       "error",

src/components/global/page-header.tsx

@@ -34,7 +34,7 @@ const PageHeader = async () => {
           <div className="min-h-50 rs-py-2 centered pr-24 lg:pr-0">
             <div className="flex w-full justify-between">
               <Lockup />
-              <div className="hidden lg:flex">
+              <div className="tw-hidden lg:flex">
                 {primaryButton?.url && (
                   <Button href={primaryButton.url} secondary>
                     {primaryButton.title}

src/components/layouts/interior-page.tsx

@@ -24,7 +24,7 @@ const InteriorPage = async ({children, currentPath, menuItems, ...props}: Props)
   return (
     <div {...props} className={twMerge("centered flex gap-20", props.className)}>
       {(subTree.length > 1 || subTree[0]?.children) && (
-        <aside className="hidden w-1/4 shrink-0 lg:block">
+        <aside className="tw-hidden w-1/4 shrink-0 lg:block">
           <a href="#page-content" className="skiplink">
             Skip secondary navigation
           </a>