Refactored layout. Added NavBar component.

assets/clock.svg

@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="rgb(0,0,0)" fill-rule="evenodd"><path d="m12 4c-4.41828 0-8 3.58172-8 8 0 4.4183 3.58172 8 8 8 4.4183 0 8-3.5817 8-8 0-4.41828-3.5817-8-8-8zm-10 8c0-5.52285 4.47715-10 10-10 5.5228 0 10 4.47715 10 10 0 5.5228-4.4772 10-10 10-5.52285 0-10-4.4772-10-10z"/><path d="m11.168 11.4453c.3063-.4595.9272-.5837 1.3867-.2774l3 2c.4595.3064.5837.9273.2774 1.3868-.3064.4595-.9273.5837-1.3868.2773l-3-2c-.4595-.3063-.5837-.9272-.2773-1.3867z"/><path d="m12 6c.5523 0 1 .44772 1 1v5c0 .5523-.4477 1-1 1s-1-.4477-1-1v-5c0-.55228.4477-1 1-1z"/></g></svg>

assets/dashboard.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m197.332031 170.667969h-160c-20.585937 0-37.332031-16.746094-37.332031-37.335938v-96c0-20.585937 16.746094-37.332031 37.332031-37.332031h160c20.589844 0 37.335938 16.746094 37.335938 37.332031v96c0 20.589844-16.746094 37.335938-37.335938 37.335938zm-160-138.667969c-2.941406 0-5.332031 2.390625-5.332031 5.332031v96c0 2.945313 2.390625 5.335938 5.332031 5.335938h160c2.945313 0 5.335938-2.390625 5.335938-5.335938v-96c0-2.941406-2.390625-5.332031-5.335938-5.332031zm0 0"/><path d="m197.332031 512h-160c-20.585937 0-37.332031-16.746094-37.332031-37.332031v-224c0-20.589844 16.746094-37.335938 37.332031-37.335938h160c20.589844 0 37.335938 16.746094 37.335938 37.335938v224c0 20.585937-16.746094 37.332031-37.335938 37.332031zm-160-266.667969c-2.941406 0-5.332031 2.390625-5.332031 5.335938v224c0 2.941406 2.390625 5.332031 5.332031 5.332031h160c2.945313 0 5.335938-2.390625 5.335938-5.332031v-224c0-2.945313-2.390625-5.335938-5.335938-5.335938zm0 0"/><path d="m474.667969 512h-160c-20.589844 0-37.335938-16.746094-37.335938-37.332031v-96c0-20.589844 16.746094-37.335938 37.335938-37.335938h160c20.585937 0 37.332031 16.746094 37.332031 37.335938v96c0 20.585937-16.746094 37.332031-37.332031 37.332031zm-160-138.667969c-2.945313 0-5.335938 2.390625-5.335938 5.335938v96c0 2.941406 2.390625 5.332031 5.335938 5.332031h160c2.941406 0 5.332031-2.390625 5.332031-5.332031v-96c0-2.945313-2.390625-5.335938-5.332031-5.335938zm0 0"/><path d="m474.667969 298.667969h-160c-20.589844 0-37.335938-16.746094-37.335938-37.335938v-224c0-20.585937 16.746094-37.332031 37.335938-37.332031h160c20.585937 0 37.332031 16.746094 37.332031 37.332031v224c0 20.589844-16.746094 37.335938-37.332031 37.335938zm-160-266.667969c-2.945313 0-5.335938 2.390625-5.335938 5.332031v224c0 2.945313 2.390625 5.335938 5.335938 5.335938h160c2.941406 0 5.332031-2.390625 5.332031-5.335938v-224c0-2.941406-2.390625-5.332031-5.332031-5.332031zm0 0"/></svg>

components/buttons/SettingsButton.js

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import TimezoneSetting from './TimezoneSetting';
-import DateRangeSetting from './DateRangeSetting';
+import TimezoneSetting from '../pages/settings/profile/TimezoneSetting';
+import DateRangeSetting from '../pages/settings/profile/DateRangeSetting';
 import { Button, Icon } from 'react-basics';
 import styles from './SettingsButton.module.css';
 import Gear from 'assets/gear.svg';

components/common/DateFilter.js

@@ -5,7 +5,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import DatePickerForm from 'components/metrics/DatePickerForm';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';
-import Calendar from 'assets/calendar-alt.svg';
+import Calendar from 'assets/calendar.svg';
 
 const messages = defineMessages({
   today: { id: 'label.today', defaultMessage: 'Today' },

components/common/HamburgerButton.js

@@ -13,12 +13,12 @@ const menuItems = [
   },
   { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
   {
-    label: <FormattedMessage id="label.settings" defaultMessage="SettingsLayout" />,
-    value: '/settings',
+    label: <FormattedMessage id="label.settings" defaultMessage="AppLayout" />,
+    value: '/buttons',
   },
   {
     label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
-    value: '/settings/profile',
+    value: '/buttons/profile',
   },
   { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: '/logout' },
 ];

components/icons.js

@@ -0,0 +1,13 @@
+import Calendar from 'assets/calendar.svg';
+import Clock from 'assets/clock.svg';
+import Dashboard from 'assets/dashboard.svg';
+import Gear from 'assets/gear.svg';
+import Globe from 'assets/globe.svg';
+import Logo from 'assets/logo.svg';
+import Moon from 'assets/moon.svg';
+import Profile from 'assets/profile.svg';
+import Sun from 'assets/sun.svg';
+import User from 'assets/user.svg';
+import Users from 'assets/users.svg';
+
+export { Calendar, Clock, Dashboard, Gear, Globe, Logo, Moon, Profile, Sun, User, Users };

components/layout/AppLayout.js

@@ -1,22 +1,25 @@
 import { Container } from 'react-basics';
 import Head from 'next/head';
-import Header from 'components/layout/Header';
-import Footer from 'components/layout/Footer';
-import useLocale from 'hooks/useLocale';
+import NavBar from 'components/layout/NavBar';
 import useRequireLogin from 'hooks/useRequireLogin';
+import styles from './AppLayout.module.css';
 
 export default function AppLayout({ title, children }) {
   useRequireLogin();
-  const { dir } = useLocale();
 
   return (
-    <Container dir={dir} style={{ maxWidth: 1140 }}>
+    <div className={styles.layout}>
       <Head>
         <title>{title ? `${title} | umami` : 'umami'}</title>
       </Head>
-      <Header />
-      <main>{children}</main>
-      <Footer />
-    </Container>
+      <div className={styles.nav}>
+        <NavBar />
+      </div>
+      <div className={styles.body}>
+        <Container>
+          <main>{children}</main>
+        </Container>
+      </div>
+    </div>
   );
 }

components/layout/AppLayout.module.css

@@ -1,6 +1,16 @@
 .layout {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: minmax(60px, 200px) 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.nav {
+  grid-row: 1 / 3;
+}
+
+.body {
+  grid-area: 1 / 2;
+  overflow: auto;
 }

components/layout/Footer.js

@@ -1,33 +1,38 @@
+import { Row, Column } from 'react-basics';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 import Link from 'components/common/Link';
-import styles from './Footer.module.css';
 import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
+import styles from './Footer.module.css';
 
-export default function Footer() {
+const messages = defineMessages({
+  poweredBy: { id: 'message.powered-by', defaultMessage: 'Powered by {name}' },
+});
+
+export default function Footer({ className }) {
   const { pathname } = useRouter();
+  const { formatMessage } = useIntl();
 
   return (
-    <footer className={classNames(styles.footer, 'row')}>
-      <div className="col-12 col-md-4" />
-      <div className="col-12 col-md-4">
-        <FormattedMessage
-          id="message.powered-by"
-          defaultMessage="Powered by {name}"
-          values={{
-            name: (
-              <Link href={HOMEPAGE_URL}>
-                <b>umami</b>
-              </Link>
-            ),
-          }}
-        />
-      </div>
-      <div className={classNames(styles.version, 'col-12 col-md-4')}>
-        <Link href={REPO_URL}>{`v${CURRENT_VERSION}`}</Link>
-      </div>
+    <footer className={classNames(styles.footer, className)}>
+      <Row>
+        <Column>
+          <div>
+            {formatMessage(messages.poweredBy, {
+              name: (
+                <Link href={HOMEPAGE_URL}>
+                  <b>umami</b>
+                </Link>
+              ),
+            })}
+          </div>
+        </Column>
+        <Column className={styles.version}>
+          <Link href={REPO_URL}>{`v${CURRENT_VERSION}`}</Link>
+        </Column>
+      </Row>
       {!pathname.includes('/share/') && <Script src={`/telemetry.js`} />}
     </footer>
   );

components/layout/Header.js

@@ -1,19 +1,17 @@
-import Logo from 'assets/logo.svg';
 import HamburgerButton from 'components/common/HamburgerButton';
-import Link from 'components/common/Link';
 import UpdateNotice from 'components/common/UpdateNotice';
-import LanguageButton from 'components/settings/LanguageButton';
-import ThemeButton from 'components/settings/ThemeButton';
-import UserButton from 'components/settings/UserButton';
+import LanguageButton from 'components/buttons/LanguageButton';
+import ThemeButton from 'components/buttons/ThemeButton';
+import UserButton from 'components/buttons/UserButton';
 import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
-import { HOMEPAGE_URL } from 'lib/constants';
 import { useRouter } from 'next/router';
-import { Column, Icon, Row } from 'react-basics';
-import SettingsButton from '../settings/SettingsButton';
+import { Column, Row } from 'react-basics';
+import SettingsButton from '../buttons/SettingsButton';
 import styles from './Header.module.css';
+import classNames from 'classnames';
 
-export default function Header() {
+export default function Header({ className }) {
   const user = useUser();
   const { pathname } = useRouter();
   const { updatesDisabled, adminDisabled } = useConfig();
@@ -23,14 +21,9 @@ export default function Header() {
   return (
     <>
       {allowUpdate && <UpdateNotice />}
-      <header className={styles.header}>
+      <header className={classNames(styles.header, className)}>
         <Row>
-          <Column className={styles.title}>
-            <Icon size="lg" className={styles.logo}>
-              <Logo />
-            </Icon>
-            <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
-          </Column>
+          <Column className={styles.title}></Column>
           <HamburgerButton />
           <Column className={styles.buttons}>
             <ThemeButton />

components/layout/Header.module.css

@@ -1,8 +1,9 @@
 .header {
   display: flex;
   align-items: center;
-  min-height: 100px;
   width: 100%;
+  height: 50px;
+  border-bottom: 1px solid var(--base300);
 }
 
 .title {

components/layout/NavBar.js

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Icon, Text, Icons } from 'react-basics';
+import classNames from 'classnames';
+import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
+import NavGroup from './NavGroup';
+import styles from './NavBar.module.css';
+
+const { ChevronDown, Search } = Icons;
+
+const analytics = [
+  { key: 'dashboard', label: 'Dashboard', url: '/dashboard', icon: <Dashboard /> },
+  { key: 'realtime', label: 'Realtime', url: '/realtime', icon: <Clock /> },
+  { key: 'queries', label: 'Queries', url: '/queries', icon: <Search /> },
+];
+
+const settings = [
+  { key: 'websites', label: 'Websites', url: '/settings/websites', icon: <Globe /> },
+  { key: 'users', label: 'Users', url: '/settings/users', icon: <User /> },
+  { key: 'teams', label: 'Teams', url: '/settings/teams', icon: <Users /> },
+];
+
+export default function NavBar() {
+  const [minimized, setMinimized] = useState(false);
+
+  const handleMinimize = () => setMinimized(state => !state);
+
+  return (
+    <div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
+      <div className={styles.header} onClick={handleMinimize}>
+        <Icon size="lg">
+          <Logo />
+        </Icon>
+        <Text className={styles.text}>umami</Text>
+        <Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>
+          <ChevronDown />
+        </Icon>
+      </div>
+      <NavGroup title="Analytics" items={analytics} minimized={minimized} />
+      <NavGroup title="Settings" items={settings} minimized={minimized} />
+      <div className={styles.footer}>
+        <Icon>
+          <Profile />
+        </Icon>
+        <Text>Profile</Text>
+      </div>
+    </div>
+  );
+}

components/layout/NavBar.module.css

@@ -0,0 +1,47 @@
+.navbar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--base75);
+  height: 100%;
+  width: 200px;
+  border-right: 2px solid var(--base200);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  padding: 20px 0;
+  cursor: pointer;
+}
+
+.header:hover .icon {
+  visibility: visible;
+}
+
+.icon {
+  position: absolute;
+  right: 0;
+  visibility: hidden;
+}
+
+.minimized.navbar {
+  width: 60px;
+}
+
+.minimized .text {
+  display: none;
+}
+
+.footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 20px;
+}

components/layout/NavGroup.js

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Icon, Text, Icons } from 'react-basics';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import styles from './NavGroup.module.css';
+
+const { ChevronDown } = Icons;
+
+export default function NavGroup({
+  title,
+  items,
+  defaultExpanded = true,
+  allowExpand = true,
+  minimized = false,
+}) {
+  const { pathname } = useRouter();
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const handleExpand = () => setExpanded(state => !state);
+
+  return (
+    <div
+      className={classNames(styles.group, {
+        [styles.expanded]: expanded,
+        [styles.minimized]: minimized,
+      })}
+    >
+      <div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
+        <Text>{title}</Text>
+        <Icon size="sm" rotate={expanded ? 0 : -90}>
+          <ChevronDown />
+        </Icon>
+      </div>
+      <div className={styles.body}>
+        {items.map(({ key, label, url, icon }) => {
+          return (
+            <Link key={key} href={url}>
+              <a
+                className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
+              >
+                <Icon>{icon}</Icon>
+                <Text className={styles.text}>{label}</Text>
+              </a>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/layout/NavGroup.module.css

@@ -0,0 +1,76 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--base600);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 10px 20px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.body {
+  display: none;
+}
+
+.expanded .body {
+  display: block;
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-right: -2px;
+  width: 200px;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-right: 2px solid var(--base200);
+  padding: 1rem 2rem;
+  gap: var(--size500);
+  font-weight: 600;
+  width: 200px;
+}
+
+.item.selected {
+  color: var(--base900);
+  border-right-color: var(--primary400);
+  background: var(--blue100);
+}
+
+.item:hover {
+  color: var(--base900);
+}
+
+.item.disabled {
+  color: var(--base500) !important;
+  pointer-events: none;
+}
+
+a.item {
+  color: var(--base600);
+}
+
+.minimized .text,
+.minimized .header {
+  display: none;
+}
+
+.minimized .item {
+  width: 60px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

components/layout/PageHeader.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import classNames from 'classnames';
 import { Button, Icon } from 'react-basics';

components/nav/Nav.js

@@ -1,48 +0,0 @@
-import classNames from 'classnames';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { Icon, Item, Menu, Text } from 'react-basics';
-import useUser from 'hooks/useUser';
-import User from 'assets/user.svg';
-import Team from 'assets/users.svg';
-import Website from 'assets/website.svg';
-import Profile from 'assets/profile.svg';
-import styles from './Nav.module.css';
-
-export default function Nav() {
-  const user = useUser();
-  const { pathname } = useRouter();
-
-  if (!user) {
-    return null;
-  }
-
-  const handleSelect = () => {};
-
-  const items = [
-    { icon: <Website />, label: 'Websites', url: '/settings/websites' },
-    { icon: <User />, label: 'Users', url: '/settings/users' },
-    { icon: <Team />, label: 'Teams', url: '/settings/teams' },
-    { icon: <Profile />, label: 'Profile', url: '/settings/profile' },
-  ];
-
-  return (
-    <Menu items={items} onSelect={handleSelect} className={styles.menu}>
-      {({ icon, label, url, hidden }) =>
-        !hidden && (
-          <Item
-            key={label}
-            className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
-          >
-            <Link href={url}>
-              <a>
-                <Icon size="lg">{icon}</Icon>
-                <Text>{label}</Text>
-              </a>
-            </Link>
-          </Item>
-        )
-      }
-    </Menu>
-  );
-}

components/nav/Nav.module.css

@@ -1,45 +0,0 @@
-.menu {
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  gap: 10px;
-  background: transparent;
-  margin-right: 16px;
-}
-
-.menu svg {
-  width: 20px;
-  height: 20px;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  font-weight: 600;
-  background: transparent;
-  padding: 0;
-  border-radius: 8px;
-}
-
-.item:hover {
-  background: var(--base100);
-}
-
-.item a {
-  color: var(--base600);
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  flex: 1;
-  padding: 16px;
-  border-radius: 8px;
-}
-
-.item a:hover {
-  color: var(--base900);
-}
-
-.item.selected a {
-  color: var(--base900);
-}

components/pages/dashboard/Dashboard.js

@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
-import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
+import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
 import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
 import styles from 'components/pages/websites/WebsiteList.module.css';
 import useUser from 'hooks/useUser';

components/pages/login/LoginLayout.module.css

@@ -4,4 +4,5 @@
   align-items: center;
   justify-content: center;
   height: 100vh;
+  background: var(--base75);
 }

components/pages/settings/SettingsLayout.js

@@ -1,23 +0,0 @@
-import AppLayout from 'components/layout/AppLayout';
-import Menu from 'components/nav/Nav';
-import styles from './SettingsLayout.module.css';
-import useConfig from 'hooks/useConfig';
-
-export default function SettingsLayout({ children }) {
-  const { adminDisabled } = useConfig();
-
-  if (adminDisabled) {
-    return null;
-  }
-
-  return (
-    <AppLayout>
-      <div className={styles.dashboard}>
-        <div className={styles.nav}>
-          <Menu />
-        </div>
-        <div className={styles.content}>{children}</div>
-      </div>
-    </AppLayout>
-  );
-}

components/pages/settings/SettingsLayout.module.css

@@ -1,16 +0,0 @@
-.dashboard {
-  display: flex;
-  flex: 1;
-}
-
-.nav {
-  margin-top: 20px;
-}
-
-.content {
-  position: relative;
-  background: var(--base50);
-  flex: 1;
-  border-radius: 8px;
-  overflow: hidden;
-}

components/pages/settings/profile/LanguageSetting.js

@@ -19,7 +19,13 @@ export default function LanguageSetting() {
 
   return (
     <Flexbox width={400} gap={10}>
-      <Dropdown items={options} value={locale} renderValue={renderValue} onChange={saveLocale}>
+      <Dropdown
+        items={options}
+        value={locale}
+        renderValue={renderValue}
+        onChange={saveLocale}
+        menuProps={{ style: { height: 300, width: 300 } }}
+      >
         {item => <Item key={item}>{languages[item].label}</Item>}
       </Dropdown>
       <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>

components/pages/settings/profile/ProfileDetails.js

@@ -1,9 +1,9 @@
 import { Form, FormRow } from 'react-basics';
 import { useIntl, defineMessages } from 'react-intl';
-import TimezoneSetting from 'components/settings/TimezoneSetting';
-import DateRangeSetting from 'components/settings/DateRangeSetting';
-import LanguageSetting from 'components/settings/LanguageSetting';
-import ThemeSetting from 'components/settings/ThemeSetting';
+import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
+import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
+import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
+import ThemeSetting from 'components/buttons/ThemeSetting';
 import useUser from 'hooks/useUser';
 
 const messages = defineMessages({

components/pages/settings/profile/ProfileSettings.js

@@ -1,6 +1,6 @@
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import ProfileDetails from 'components/settings/ProfileDetails';
+import ProfileDetails from 'components/pages/settings/profile/ProfileDetails';
 import { useState } from 'react';
 import { Breadcrumbs, Icon, Item, useToast, Modal, Button } from 'react-basics';
 import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';

components/pages/settings/profile/TimezoneSetting.js

@@ -17,7 +17,12 @@ export default function TimezoneSetting() {
 
   return (
     <Flexbox width={400} gap={10}>
-      <Dropdown items={options} value={timezone} onChange={saveTimezone}>
+      <Dropdown
+        items={options}
+        value={timezone}
+        onChange={saveTimezone}
+        menuProps={{ style: { height: 300, width: 300 } }}
+      >
         {item => <Item key={item}>{item}</Item>}
       </Dropdown>
       <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>

components/pages/settings/websites/WebsitesList.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast } from 'react-basics';
+import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
 import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
@@ -8,6 +8,8 @@ import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import Page from 'components/layout/Page';
 import useUser from 'hooks/useUser';
 
+const { Plus } = Icons;
+
 export default function WebsitesList() {
   const [edit, setEdit] = useState(false);
   const { get, useQuery } = useApi();
@@ -44,8 +46,11 @@ export default function WebsitesList() {
     <Page loading={isLoading} error={error}>
       {toast}
       <PageHeader title="Websites">
-        <Button onClick={handleAdd}>
-          <Icon icon="plus" /> Add website
+        <Button variant="primary" onClick={handleAdd}>
+          <Icon>
+            <Plus />
+          </Icon>
+          <Text>Add website</Text>
         </Button>
       </PageHeader>
 
@@ -53,7 +58,10 @@ export default function WebsitesList() {
       {!hasData && (
         <EmptyPlaceholder message="You don't have any websites configured.">
           <Button variant="primary" onClick={handleAdd}>
-            <Icon icon="plus" /> Add website
+            <Icon>
+              <Plus />
+            </Icon>
+            <Text>Add website</Text>
           </Button>
         </EmptyPlaceholder>
       )}

components/pages/settings/websites/WebsitesTable.js

@@ -8,10 +8,12 @@ import {
   TableColumn,
   Button,
   Icon,
+  Icons,
 } from 'react-basics';
-import ExternalLink from 'assets/external-link.svg';
 import styles from './WebsitesTable.module.css';
 
+const { ArrowRight, External } = Icons;
+
 export default function WebsitesTable({ columns = [], rows = [] }) {
   return (
     <Table className={styles.table} columns={columns} rows={rows}>
@@ -33,7 +35,9 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
               <Link href={`/settings/websites/${id}`}>
                 <a>
                   <Button>
-                    <Icon icon="arrow-right" />
+                    <Icon>
+                      <ArrowRight />
+                    </Icon>
                     Settings
                   </Button>
                 </a>
@@ -42,7 +46,7 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
                 <a>
                   <Button>
                     <Icon>
-                      <ExternalLink />
+                      <External />
                     </Icon>
                     View
                   </Button>

components/pages/websites/WebsiteChartList.js

@@ -15,8 +15,8 @@ const messages = defineMessages({
     defaultMessage: "You don't have any websites configured.",
   },
   goToSettngs: {
-    id: 'message.go-to-settings',
-    defaultMessage: 'Go to settings',
+    id: 'message.go-to-buttons',
+    defaultMessage: 'Go to buttons',
   },
 });
 

hooks/useLocale.js

@@ -35,6 +35,8 @@ export default function useLocale() {
 
     setItem(LOCALE_CONFIG, value);
 
+    document.getElementById('__next')?.setAttribute('dir', getTextDirection(value));
+
     if (locale !== value) {
       setLocale(value);
     } else {

package.json

@@ -128,11 +128,11 @@
     "extract-react-intl-messages": "^4.1.1",
     "husky": "^7.0.0",
     "lint-staged": "^11.0.0",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.21",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^14.0.2",
-    "postcss-preset-env": "7.4.3",
-    "postcss-rtlcss": "^3.6.1",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-env": "7.8.3",
+    "postcss-rtlcss": "^4.0.1",
     "prettier": "^2.6.2",
     "prisma": "4.8.0",
     "prompts": "2.4.2",

pages/settings/index.js

@@ -3,7 +3,7 @@ export default () => null;
 export async function getServerSideProps() {
   return {
     redirect: {
-      destination: '/settings/websites',
+      destination: '/buttons/websites',
       permanent: true,
     },
   };

pages/settings/profile/index.js

@@ -1,10 +1,10 @@
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
 
 export default function ProfilePage() {
   return (
-    <SettingsLayout>
+    <AppLayout>
       <ProfileSettings />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/teams/[...id].js

@@ -1,4 +1,4 @@
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 import TeamDetails from 'components/pages/settings/teams/TeamDetails';
 import useUser from 'hooks/useUser';
 import { useRouter } from 'next/router';
@@ -13,8 +13,8 @@ export default function TeamDetailPage() {
   }
 
   return (
-    <SettingsLayout>
+    <AppLayout>
       <TeamDetails teamId={id} />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/teams/index.js

@@ -1,4 +1,4 @@
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 import TeamsList from 'components/pages/settings/teams/TeamsList';
 import useUser from 'hooks/useUser';
 
@@ -10,8 +10,8 @@ export default function TeamsPage() {
   }
 
   return (
-    <SettingsLayout>
+    <AppLayout>
       <TeamsList />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/users/[...id].js

@@ -1,4 +1,4 @@
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 import UserSettings from 'components/pages/settings/users/UserSettings';
 import useUser from 'hooks/useUser';
 import { useRouter } from 'next/router';
@@ -13,8 +13,8 @@ export default function TeamDetailPage() {
   }
 
   return (
-    <SettingsLayout>
+    <AppLayout>
       <UserSettings userId={id} />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/users/index.js

@@ -1,4 +1,4 @@
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
 
@@ -13,8 +13,8 @@ export default function UsersPage() {
   }
 
   return (
-    <SettingsLayout>
+    <AppLayout>
       <UsersList />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/websites/[id]/index.js

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import WebsiteDetails from 'components/pages/settings/websites/WebsiteDetails';
 import useUser from 'hooks/useUser';
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 
 export default function WebsiteSettingsPage() {
   const user = useUser();
@@ -13,8 +13,8 @@ export default function WebsiteSettingsPage() {
   }
 
   return (
-    <SettingsLayout>
+    <AppLayout>
       <WebsiteDetails websiteId={id} />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/websites/index.js

@@ -1,10 +1,10 @@
-import SettingsLayout from 'components/pages/settings/SettingsLayout';
+import AppLayout from 'components/layout/AppLayout';
 import WebsitesList from 'components/pages/settings/websites/WebsitesList';
 
 export default function WebsitesPage() {
   return (
-    <SettingsLayout>
+    <AppLayout>
       <WebsitesList />
-    </SettingsLayout>
+    </AppLayout>
   );
 }

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    'postcss-rtlcss',
     'postcss-flexbugs-fixes',
     [
       'postcss-preset-env',

styles/index.css

@@ -14,7 +14,7 @@ body {
   flex-direction: column;
   flex: 1;
   color: var(--font-color100);
-  background: var(--background200);
+  background: var(--base50);
 }
 
 *,

yarn.lock

@@ -1145,55 +1145,70 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@csstools/postcss-color-function@^1.0.3":
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.0.tgz"
-  integrity sha512-5D5ND/mZWcQoSfYnSPsXtuiFxhzmhxt6pcjrFLJyldj+p0ZN2vvRpYNX+lahFTtMhAYOa2WmkdGINr0yP0CvGA==
+"@csstools/postcss-cascade-layers@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz#8a997edf97d34071dd2e37ea6022447dd9e795ad"
+  integrity sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-color-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
+  integrity sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==
   dependencies:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-font-format-keywords@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.0.tgz"
-  integrity sha512-oO0cZt8do8FdVBX8INftvIA4lUrKUSCcWUf9IwH9IPWOgKT22oAZFXeHLoDK7nhB2SmkNycp5brxfNMRLIhd6Q==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-hwb-function@^1.0.0":
+"@csstools/postcss-font-format-keywords@^1.0.1":
   version "1.0.1"
-  resolved "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.1.tgz"
-  integrity sha512-AMZwWyHbbNLBsDADWmoXT9A5yl5dsGEBeJSJRUJt8Y9n8Ziu7Wstt4MC8jtPW7xjcLecyfJwtnUTNSmOzcnWeg==
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz#677b34e9e88ae997a67283311657973150e8b16a"
+  integrity sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-ic-unit@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.0.tgz"
-  integrity sha512-i4yps1mBp2ijrx7E96RXrQXQQHm6F4ym1TOD0D69/sjDjZvQ22tqiEvaNw7pFZTUO5b9vWRHzbHzP9+UKuw+bA==
+"@csstools/postcss-hwb-function@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b"
+  integrity sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-ic-unit@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz#28237d812a124d1a16a5acc5c3832b040b303e58"
+  integrity sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==
   dependencies:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-is-pseudo-class@^2.0.1":
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.5.tgz"
-  integrity sha512-Ek+UFI4UP2hB9u0N1cJd6KgSF1rL0J3PT4is0oSStuus8+WzbGGPyJNMOKQ0w/tyPjxiCnOI4RdSMZt3nks64g==
+"@csstools/postcss-is-pseudo-class@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz#846ae6c0d5a1eaa878fce352c544f9c295509cd1"
+  integrity sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==
   dependencies:
     "@csstools/selector-specificity" "^2.0.0"
     postcss-selector-parser "^6.0.10"
 
-"@csstools/postcss-normalize-display-values@^1.0.0":
+"@csstools/postcss-nested-calc@^1.0.0":
   version "1.0.0"
-  resolved "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.0.tgz"
-  integrity sha512-bX+nx5V8XTJEmGtpWTO6kywdS725t71YSLlxWt78XoHUbELWgoCXeOFymRJmL3SU1TLlKSIi7v52EWqe60vJTQ==
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz#d7e9d1d0d3d15cf5ac891b16028af2a1044d0c26"
+  integrity sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-oklab-function@^1.0.2":
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.0.tgz"
-  integrity sha512-e/Q5HopQzmnQgqimG9v3w2IG4VRABsBq3itOcn4bnm+j4enTgQZ0nWsaH/m9GV2otWGQ0nwccYL5vmLKyvP1ww==
+"@csstools/postcss-normalize-display-values@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz#15da54a36e867b3ac5163ee12c1d7f82d4d612c3"
+  integrity sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-oklab-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz#88cee0fbc8d6df27079ebd2fa016ee261eecf844"
+  integrity sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==
   dependencies:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
@@ -1205,6 +1220,32 @@
   dependencies:
     postcss-value-parser "^4.2.0"
 
+"@csstools/postcss-stepped-value-functions@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz#f8772c3681cc2befed695e2b0b1d68e22f08c4f4"
+  integrity sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-text-decoration-shorthand@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz#ea96cfbc87d921eca914d3ad29340d9bcc4c953f"
+  integrity sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-trigonometric-functions@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz#94d3e4774c36d35dcdc88ce091336cb770d32756"
+  integrity sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-unset-value@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz#c99bb70e2cdc7312948d1eb41df2412330b81f77"
+  integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
+
 "@csstools/selector-specificity@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.0.tgz"
@@ -2654,13 +2695,13 @@ at-least-node@^1.0.0:
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autoprefixer@^10.4.4:
-  version "10.4.7"
-  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz"
-  integrity sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==
+autoprefixer@^10.4.13:
+  version "10.4.13"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
+  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
   dependencies:
-    browserslist "^4.20.3"
-    caniuse-lite "^1.0.30001335"
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001426"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -2792,7 +2833,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.20.2, browserslist@^4.20.3, browserslist@^4.21.3, browserslist@^4.21.4:
+browserslist@^4.20.2, browserslist@^4.21.3, browserslist@^4.21.4:
   version "4.21.4"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
   integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
@@ -2872,11 +2913,6 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001335:
-  version "1.0.30001418"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz"
-  integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
-
 caniuse-lite@^1.0.30001400:
   version "1.0.30001427"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001427.tgz#d3a749f74be7ae0671fbec3a4eea18576e8ad646"
@@ -2887,6 +2923,11 @@ caniuse-lite@^1.0.30001406:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001435.tgz#502c93dbd2f493bee73a408fe98e98fb1dad10b2"
   integrity sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==
 
+caniuse-lite@^1.0.30001426:
+  version "1.0.30001444"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001444.tgz#c0a530776eb44d933b493de1d05346f2527b30fc"
+  integrity sha512-ecER9xgJQVMqcrxThKptsW0pPxSae8R2RB87LNa+ivW9ppNWRHEplXcDzkCOP4LYWGj8hunXLqaiC41iBATNyg==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
@@ -3245,10 +3286,10 @@ css-what@^6.0.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
-cssdb@^6.5.0:
-  version "6.6.3"
-  resolved "https://registry.npmjs.org/cssdb/-/cssdb-6.6.3.tgz"
-  integrity sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==
+cssdb@^7.1.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.2.1.tgz#f6f59e2c4249bcb5ca5606fc4ab6f9a808d55486"
+  integrity sha512-btohrCpVaLqOoMt90aumHe6HU4c06duiYA8ymwtpGfwuZAhWKDBve/c2k+E85Jeq5iojPkeonqiKV+aLeY8QlA==
 
 cssesc@^3.0.0:
   version "3.0.0"
@@ -4101,14 +4142,6 @@ find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-find-up@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
-  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
-  dependencies:
-    locate-path "^6.0.0"
-    path-exists "^4.0.0"
-
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -5174,13 +5207,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-locate-path@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
-  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
-  dependencies:
-    p-locate "^5.0.0"
-
 lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
@@ -5835,7 +5861,7 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
-p-limit@^3.0.2, p-limit@^3.1.0:
+p-limit@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
@@ -5849,13 +5875,6 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-locate@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
-  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
-  dependencies:
-    p-limit "^3.0.2"
-
 p-map@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz"
@@ -5982,12 +6001,12 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
-postcss-attribute-case-insensitive@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.0.tgz"
-  integrity sha512-b4g9eagFGq9T5SWX4+USfVyjIb3liPnjhHHRMP7FMB2kFVpYyfEscV0wP3eaXhKlcHKUut8lt5BGoeylWA/dBQ==
+postcss-attribute-case-insensitive@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
+  integrity sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==
   dependencies:
-    postcss-selector-parser "^6.0.2"
+    postcss-selector-parser "^6.0.10"
 
 postcss-clamp@^4.1.0:
   version "4.1.0"
@@ -5996,57 +6015,59 @@ postcss-clamp@^4.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-color-functional-notation@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.3.tgz"
-  integrity sha512-5fbr6FzFzjwHXKsVnkmEYrJYG8VNNzvD1tAXaPPWR97S6rhKI5uh2yOfV5TAzhDkZoq4h+chxEplFDc8GeyFtw==
+postcss-color-functional-notation@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz#21a909e8d7454d3612d1659e471ce4696f28caec"
+  integrity sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-color-hex-alpha@^8.0.3:
-  version "8.0.3"
-  resolved "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.3.tgz"
-  integrity sha512-fESawWJCrBV035DcbKRPAVmy21LpoyiXdPTuHUfWJ14ZRjY7Y7PA6P4g8z6LQGYhU1WAxkTxjIjurXzoe68Glw==
+postcss-color-hex-alpha@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz#c66e2980f2fbc1a63f5b079663340ce8b55f25a5"
+  integrity sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-color-rebeccapurple@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.0.2.tgz"
-  integrity sha512-SFc3MaocHaQ6k3oZaFwH8io6MdypkUtEy/eXzXEB1vEQlO3S3oDc/FSZA8AsS04Z25RirQhlDlHLh3dn7XewWw==
+postcss-color-rebeccapurple@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz#63fdab91d878ebc4dd4b7c02619a0c3d6a56ced0"
+  integrity sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-custom-media@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz"
-  integrity sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==
-
-postcss-custom-properties@^12.1.5:
-  version "12.1.7"
-  resolved "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.7.tgz"
-  integrity sha512-N/hYP5gSoFhaqxi2DPCmvto/ZcRDVjE3T1LiAMzc/bg53hvhcHOLpXOHb526LzBBp5ZlAUhkuot/bfpmpgStJg==
+postcss-custom-media@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz#c8f9637edf45fef761b014c024cee013f80529ea"
+  integrity sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-custom-selectors@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.0.tgz"
-  integrity sha512-/1iyBhz/W8jUepjGyu7V1OPcGbc636snN1yXEQCinb6Bwt7KxsiU7/bLQlp8GwAXzCh7cobBU5odNn/2zQWR8Q==
+postcss-custom-properties@^12.1.10:
+  version "12.1.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz#d14bb9b3989ac4d40aaa0e110b43be67ac7845cf"
+  integrity sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-selectors@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz#1ab4684d65f30fed175520f82d223db0337239d9"
+  integrity sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==
   dependencies:
     postcss-selector-parser "^6.0.4"
 
-postcss-dir-pseudo-class@^6.0.4:
-  version "6.0.4"
-  resolved "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz"
-  integrity sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==
+postcss-dir-pseudo-class@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz#2bf31de5de76added44e0a25ecf60ae9f7c7c26c"
+  integrity sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==
   dependencies:
-    postcss-selector-parser "^6.0.9"
+    postcss-selector-parser "^6.0.10"
 
-postcss-double-position-gradients@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.1.tgz"
-  integrity sha512-jM+CGkTs4FcG53sMPjrrGE0rIvLDdCrqMzgDC5fLI7JHDO7o6QG8C5TQBtExb13hdBdoH9C2QVbG4jo2y9lErQ==
+postcss-double-position-gradients@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz#b96318fdb477be95997e86edd29c6e3557a49b91"
+  integrity sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==
   dependencies:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
@@ -6082,22 +6103,22 @@ postcss-font-variant@^5.0.0:
   resolved "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz"
   integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
 
-postcss-gap-properties@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz"
-  integrity sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==
+postcss-gap-properties@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz#f7e3cddcf73ee19e94ccf7cb77773f9560aa2fff"
+  integrity sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==
 
-postcss-image-set-function@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.6.tgz"
-  integrity sha512-KfdC6vg53GC+vPd2+HYzsZ6obmPqOk6HY09kttU19+Gj1nC3S3XBVEXDHxkhxTohgZqzbUb94bKXvKDnYWBm/A==
+postcss-image-set-function@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz#08353bd756f1cbfb3b6e93182c7829879114481f"
+  integrity sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-import@^14.0.2:
-  version "14.1.0"
-  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
     read-cache "^1.0.0"
@@ -6108,10 +6129,10 @@ postcss-initial@^4.0.1:
   resolved "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz"
   integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
 
-postcss-lab-function@^4.1.2:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.0.tgz"
-  integrity sha512-Zb1EO9DGYfa3CP8LhINHCcTTCTLI+R3t7AX2mKsDzdgVQ/GkCpHOTgOr6HBHslP7XDdVbqgHW5vvRPMdVANQ8w==
+postcss-lab-function@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz#6fe4c015102ff7cd27d1bd5385582f67ebdbdc98"
+  integrity sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==
   dependencies:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
@@ -6131,10 +6152,10 @@ postcss-media-query-parser@^0.2.3:
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
   integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
 
-postcss-nesting@^10.1.3:
-  version "10.1.8"
-  resolved "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.8.tgz"
-  integrity sha512-txdb3/idHYsBbNDFo1PFY0ExCgH5nfWi8G5lO49e6iuU42TydbODTzJgF5UuL5bhgeSlnAtDgfFTDG0Cl1zaSQ==
+postcss-nesting@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.2.0.tgz#0b12ce0db8edfd2d8ae0aaf86427370b898890be"
+  integrity sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==
   dependencies:
     "@csstools/selector-specificity" "^2.0.0"
     postcss-selector-parser "^6.0.10"
@@ -6144,76 +6165,84 @@ postcss-opacity-percentage@^1.1.2:
   resolved "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz"
   integrity sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==
 
-postcss-overflow-shorthand@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz"
-  integrity sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==
+postcss-overflow-shorthand@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz#7ed6486fec44b76f0eab15aa4866cda5d55d893e"
+  integrity sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==
+  dependencies:
+    postcss-value-parser "^4.2.0"
 
 postcss-page-break@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz"
   integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
 
-postcss-place@^7.0.4:
-  version "7.0.4"
-  resolved "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.4.tgz"
-  integrity sha512-MrgKeiiu5OC/TETQO45kV3npRjOFxEHthsqGtkh3I1rPbZSbXGD/lZVi9j13cYh+NA8PIAPyk6sGjT9QbRyvSg==
+postcss-place@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-7.0.5.tgz#95dbf85fd9656a3a6e60e832b5809914236986c4"
+  integrity sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-preset-env@7.4.3:
-  version "7.4.3"
-  resolved "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.4.3.tgz"
-  integrity sha512-dlPA65g9KuGv7YsmGyCKtFkZKCPLkoVMUE3omOl6yM+qrynVHxFvf0tMuippIrXB/sB/MyhL1FgTIbrO+qMERg==
+postcss-preset-env@7.8.3:
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz#2a50f5e612c3149cc7af75634e202a5b2ad4f1e2"
+  integrity sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==
   dependencies:
-    "@csstools/postcss-color-function" "^1.0.3"
-    "@csstools/postcss-font-format-keywords" "^1.0.0"
-    "@csstools/postcss-hwb-function" "^1.0.0"
-    "@csstools/postcss-ic-unit" "^1.0.0"
-    "@csstools/postcss-is-pseudo-class" "^2.0.1"
-    "@csstools/postcss-normalize-display-values" "^1.0.0"
-    "@csstools/postcss-oklab-function" "^1.0.2"
+    "@csstools/postcss-cascade-layers" "^1.1.1"
+    "@csstools/postcss-color-function" "^1.1.1"
+    "@csstools/postcss-font-format-keywords" "^1.0.1"
+    "@csstools/postcss-hwb-function" "^1.0.2"
+    "@csstools/postcss-ic-unit" "^1.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.7"
+    "@csstools/postcss-nested-calc" "^1.0.0"
+    "@csstools/postcss-normalize-display-values" "^1.0.1"
+    "@csstools/postcss-oklab-function" "^1.1.1"
     "@csstools/postcss-progressive-custom-properties" "^1.3.0"
-    autoprefixer "^10.4.4"
-    browserslist "^4.20.2"
+    "@csstools/postcss-stepped-value-functions" "^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
+    "@csstools/postcss-trigonometric-functions" "^1.0.2"
+    "@csstools/postcss-unset-value" "^1.0.2"
+    autoprefixer "^10.4.13"
+    browserslist "^4.21.4"
     css-blank-pseudo "^3.0.3"
     css-has-pseudo "^3.0.4"
     css-prefers-color-scheme "^6.0.3"
-    cssdb "^6.5.0"
-    postcss-attribute-case-insensitive "^5.0.0"
+    cssdb "^7.1.0"
+    postcss-attribute-case-insensitive "^5.0.2"
     postcss-clamp "^4.1.0"
-    postcss-color-functional-notation "^4.2.2"
-    postcss-color-hex-alpha "^8.0.3"
-    postcss-color-rebeccapurple "^7.0.2"
-    postcss-custom-media "^8.0.0"
-    postcss-custom-properties "^12.1.5"
-    postcss-custom-selectors "^6.0.0"
-    postcss-dir-pseudo-class "^6.0.4"
-    postcss-double-position-gradients "^3.1.1"
+    postcss-color-functional-notation "^4.2.4"
+    postcss-color-hex-alpha "^8.0.4"
+    postcss-color-rebeccapurple "^7.1.1"
+    postcss-custom-media "^8.0.2"
+    postcss-custom-properties "^12.1.10"
+    postcss-custom-selectors "^6.0.3"
+    postcss-dir-pseudo-class "^6.0.5"
+    postcss-double-position-gradients "^3.1.2"
     postcss-env-function "^4.0.6"
     postcss-focus-visible "^6.0.4"
     postcss-focus-within "^5.0.4"
     postcss-font-variant "^5.0.0"
-    postcss-gap-properties "^3.0.3"
-    postcss-image-set-function "^4.0.6"
+    postcss-gap-properties "^3.0.5"
+    postcss-image-set-function "^4.0.7"
     postcss-initial "^4.0.1"
-    postcss-lab-function "^4.1.2"
+    postcss-lab-function "^4.2.1"
     postcss-logical "^5.0.4"
     postcss-media-minmax "^5.0.0"
-    postcss-nesting "^10.1.3"
+    postcss-nesting "^10.2.0"
     postcss-opacity-percentage "^1.1.2"
-    postcss-overflow-shorthand "^3.0.3"
+    postcss-overflow-shorthand "^3.0.4"
     postcss-page-break "^3.0.4"
-    postcss-place "^7.0.4"
-    postcss-pseudo-class-any-link "^7.1.1"
+    postcss-place "^7.0.5"
+    postcss-pseudo-class-any-link "^7.1.6"
     postcss-replace-overflow-wrap "^4.0.0"
-    postcss-selector-not "^5.0.0"
+    postcss-selector-not "^6.0.1"
     postcss-value-parser "^4.2.0"
 
-postcss-pseudo-class-any-link@^7.1.1:
-  version "7.1.4"
-  resolved "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.4.tgz"
-  integrity sha512-JxRcLXm96u14N3RzFavPIE9cRPuOqLDuzKeBsqi4oRk4vt8n0A7I0plFs/VXTg7U2n7g/XkQi0OwqTO3VWBfEg==
+postcss-pseudo-class-any-link@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
+  integrity sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==
   dependencies:
     postcss-selector-parser "^6.0.10"
 
@@ -6227,24 +6256,24 @@ postcss-resolve-nested-selector@^0.1.1:
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
   integrity sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==
 
-postcss-rtlcss@^3.6.1:
-  version "3.7.2"
-  resolved "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-3.7.2.tgz"
-  integrity sha512-GurrGedCKvOTe1QrifI+XpDKXA3bJky1v8KiOa/TYYHs1bfJOxI53GIRvVSqLJLly7e1WcNMz8KMESTN01vbZQ==
+postcss-rtlcss@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-rtlcss/-/postcss-rtlcss-4.0.1.tgz#aec5261a8fc6878f33bceb4c9de3e15945e6f4ab"
+  integrity sha512-x92gkPeo4Mt9K6oP02EghAkQkq3/dr19SWGQZdEOWfmFnjoUvET5+aoTr85eM+JH+hupSSXZhc+kqVrvAJrkvg==
   dependencies:
-    rtlcss "^3.5.0"
+    rtlcss "4.0.0"
 
 postcss-safe-parser@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
-postcss-selector-not@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-5.0.0.tgz"
-  integrity sha512-/2K3A4TCP9orP4TNS7u3tGdRFVKqz/E6pX3aGnriPG0jU78of8wsUcqE4QAhWEU0d+WnMSF93Ah3F//vUtK+iQ==
+postcss-selector-not@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
+  integrity sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==
   dependencies:
-    balanced-match "^1.0.0"
+    postcss-selector-parser "^6.0.10"
 
 postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11:
   version "6.0.11"
@@ -6254,7 +6283,7 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -6276,19 +6305,19 @@ postcss@8.4.14, postcss@^8.1.10:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.3.11:
-  version "8.4.16"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz"
-  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+postcss@^8.4.19:
+  version "8.4.20"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
+  integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.12, postcss@^8.4.19:
-  version "8.4.20"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
-  integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
+postcss@^8.4.21, postcss@^8.4.6:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
@@ -6894,14 +6923,14 @@ rollup@^2.70.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rtlcss@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz"
-  integrity sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==
+rtlcss@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-4.0.0.tgz#ba73233b9c79fbf66eb867f2ae937713acbf2b40"
+  integrity sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==
   dependencies:
-    find-up "^5.0.0"
+    escalade "^3.1.1"
     picocolors "^1.0.0"
-    postcss "^8.3.11"
+    postcss "^8.4.6"
     strip-json-comments "^3.1.1"
 
 run-parallel@^1.1.9: