From 8dd564b7fed22c08ccedc62ba8771bfb70d444e8 Mon Sep 17 00:00:00 2001
From: Taylor Seamans <taylor.seamans@yahoo.com>
Date: Fri, 1 Mar 2024 15:11:29 -0800
Subject: [PATCH] Add scaffold of today page, authentication

---
 aries-site/src/pages/demo.js                  | 150 ----------
 design-tokens/src/build.js                    |   8 +-
 sandbox/grommet-app/package.json              |   1 -
 sandbox/grommet-app/src/App.jsx               |  71 +++--
 sandbox/grommet-app/src/Login.jsx             |  45 +++
 .../grommet-app/src/components/Card/Card.jsx  |   4 +-
 .../DashboardCard/DashboardCard.jsx           |  16 +-
 .../grommet-app/src/mockData/services.json    |  46 ++-
 .../src/pages/FeaturedServices.jsx            |  71 +++++
 sandbox/grommet-app/src/pages/GetStarted.jsx  |  46 +++
 .../grommet-app/src/pages/QuickActions.jsx    |  20 --
 .../grommet-app/src/pages/RecentServices.jsx  |  97 ++++++
 sandbox/grommet-app/src/pages/index.jsx       |  71 ++---
 .../src/pages/next/BillingSummary.jsx         | 140 +++++++++
 .../src/pages/{ => next}/Learn.jsx            |   2 +-
 .../src/pages/{ => next}/MyServices.jsx       |   4 +-
 .../src/pages/{ => next}/Notifications.jsx    |   4 +-
 .../src/pages/next/QuickActions.jsx           |  33 +++
 .../src/pages/{ => next}/Recommended.jsx      |   2 +-
 .../{ => next}/SustainabilityOverview.jsx     |   4 +-
 sandbox/grommet-app/src/pages/next/index.jsx  |  75 +++++
 .../src/pages/sustainability/Devices.jsx      |  34 ++-
 .../sustainability/SustainabilityInsights.jsx |  21 +-
 .../src/pages/sustainability/index.jsx        |  16 +-
 .../grommet-app/src/pages/vision/index.jsx    |  11 +
 sandbox/grommet-app/src/theme.js              | 275 ++++++++++--------
 yarn.lock                                     | 136 ++++-----
 27 files changed, 922 insertions(+), 481 deletions(-)
 delete mode 100644 aries-site/src/pages/demo.js
 create mode 100644 sandbox/grommet-app/src/Login.jsx
 create mode 100644 sandbox/grommet-app/src/pages/FeaturedServices.jsx
 create mode 100644 sandbox/grommet-app/src/pages/GetStarted.jsx
 delete mode 100644 sandbox/grommet-app/src/pages/QuickActions.jsx
 create mode 100644 sandbox/grommet-app/src/pages/RecentServices.jsx
 create mode 100644 sandbox/grommet-app/src/pages/next/BillingSummary.jsx
 rename sandbox/grommet-app/src/pages/{ => next}/Learn.jsx (90%)
 rename sandbox/grommet-app/src/pages/{ => next}/MyServices.jsx (82%)
 rename sandbox/grommet-app/src/pages/{ => next}/Notifications.jsx (94%)
 create mode 100644 sandbox/grommet-app/src/pages/next/QuickActions.jsx
 rename sandbox/grommet-app/src/pages/{ => next}/Recommended.jsx (94%)
 rename sandbox/grommet-app/src/pages/{ => next}/SustainabilityOverview.jsx (97%)
 create mode 100644 sandbox/grommet-app/src/pages/next/index.jsx
 create mode 100644 sandbox/grommet-app/src/pages/vision/index.jsx

diff --git a/aries-site/src/pages/demo.js b/aries-site/src/pages/demo.js
deleted file mode 100644
index 7bd90319f..000000000
--- a/aries-site/src/pages/demo.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  Button,
-  Grid,
-  Heading,
-  PageContent,
-  Paragraph,
-  PageHeader,
-  ResponsiveContext,
-  ThemeContext,
-  Card,
-  CardBody,
-  Text,
-  Meter,
-} from 'grommet';
-import { AppsRounded, Configure, PlayFill, ShareRounded } from 'grommet-icons';
-import { Meta } from '../components';
-import { aries } from '../themes/aries';
-import { Card as TemplateCard } from '../examples';
-
-const title = 'Design Tokens Demo';
-
-const BriefCard = ({ description, title, icon, ...rest }) => (
-  <Card onClick={() => {}} {...rest}>
-    <CardBody direction="row" align="center" justify="between" gap="medium">
-      <Box gap="xsmall">
-        <Heading level={3} margin="none">
-          {title}
-        </Heading>
-        <Text margin="none" size="small" weight={500}>
-          {description}
-        </Text>
-      </Box>
-      <Box background={{ dark: true }}>{icon}</Box>
-    </CardBody>
-  </Card>
-);
-
-const MeterCard = () => (
-  <TemplateCard title="Issues" level={3}>
-    <Box gap="medium" pad={{ top: 'medium' }}>
-      <Box round="large" overflow="hidden">
-        <Meter
-          type="bar"
-          values={[
-            { value: 30, color: 'status-critical' },
-            { value: 28, color: 'status-warning' },
-            { value: 42, color: 'blue' },
-          ]}
-        />
-      </Box>
-      <Box gap="xsmall">
-        <Box direction="row" gap="xsmall" align="center">
-          <Box pad="xsmall" round background="status-critical" />
-          <Text>High severity</Text>
-        </Box>
-        <Box direction="row" gap="xsmall" align="center">
-          <Box pad="xsmall" round background="status-warning" />
-          <Text>Medium severity</Text>
-        </Box>
-        <Box direction="row" gap="xsmall" align="center">
-          <Box pad="xsmall" round background="blue" />
-          <Text>Low severity</Text>
-        </Box>
-      </Box>
-    </Box>
-  </TemplateCard>
-);
-
-const Demo = () => {
-  const size = useContext(ResponsiveContext);
-
-  return (
-    <>
-      <Meta title={title} />
-      <ThemeContext.Extend value={aries}>
-        <PageContent>
-          <PageHeader title="Console home" />
-          <Grid columns={['flex', 'medium']} gap="medium">
-            <Box gap="medium">
-              <Grid columns={['flex', 'flex']} gap="medium">
-                <BriefCard
-                  title="Block Storage"
-                  description=" Last used yesterday, at 8:36pm"
-                  icon={<ShareRounded size="xxlarge" color="green" />}
-                />
-
-                <BriefCard
-                  title="Private Cloud Enterprise"
-                  description="Last used on July 17, 2023, at 8:36pm"
-                  icon={<ShareRounded size="xxlarge" color="green" />}
-                />
-              </Grid>
-              <Card>
-                <CardBody gap="medium">
-                  <Box gap="xsmall">
-                    <Heading level={3} margin="none">
-                      Capacity
-                    </Heading>
-                    <Paragraph size="small" margin="none">
-                      Volume
-                    </Paragraph>
-                  </Box>
-                  <Text size="32px" weight={500}>
-                    32%{' '}
-                    <Text size="medium" weight={500}>
-                      used <Text weight={400}>(240 of 750 TiB)</Text>
-                    </Text>
-                  </Text>
-                </CardBody>
-              </Card>
-              <Grid columns={['flex', 'flex']} gap="medium">
-                <MeterCard />
-              </Grid>
-            </Box>
-            <Box gap="medium">
-              <BriefCard
-                title="Find Services"
-                description="Discover and lunch services from out catalog."
-                icon={<AppsRounded size="xxlarge" color="green" />}
-              />
-              <BriefCard
-                title="Manage Workspace"
-                description="Setup this workspace, users, access, and more."
-                icon={<Configure size="xxlarge" color="green" />}
-              />
-              <Card background="background-contrast">
-                <CardBody align="start" pad="large" gap="medium">
-                  <Heading level={3} margin="none">
-                    Learn about the new HPE GreenLake Console experience
-                  </Heading>
-                  <Button
-                    kind="toolbar"
-                    label="Watch now"
-                    icon={<PlayFill color="green" />}
-                    reverse
-                  />
-                </CardBody>
-              </Card>
-              <Box>Map goes here</Box>
-            </Box>
-          </Grid>
-        </PageContent>
-      </ThemeContext.Extend>
-    </>
-  );
-};
-
-export default Demo;
diff --git a/design-tokens/src/build.js b/design-tokens/src/build.js
index dbe90aeb9..1ad743231 100644
--- a/design-tokens/src/build.js
+++ b/design-tokens/src/build.js
@@ -60,6 +60,11 @@ const resolvedMobile = resolveTokens(mobile, primitives);
 
 mkdirSync('./dist');
 
+writeFileSync(
+  './dist/primitives.base.js',
+  `export default ${JSON.stringify(primitives, null, 2)}`,
+);
+
 // do we only want to export resolved ones?
 // is there any value to having the references (for example, figma uses it)
 writeFileSync(
@@ -89,7 +94,8 @@ writeFileSync(
 
 writeFileSync(
   './dist/index.js',
-  `export { default as dark } from './color.dark.js';
+  `export { default as primitives } from './primitives.base.js';
+export { default as dark } from './color.dark.js';
 export { default as light } from './color.light.js';
 export { default as desktop } from './dimension.large.js';
 export { default as mobile } from './dimension.small.js';`,
diff --git a/sandbox/grommet-app/package.json b/sandbox/grommet-app/package.json
index e48f1196c..57079eaed 100644
--- a/sandbox/grommet-app/package.json
+++ b/sandbox/grommet-app/package.json
@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "design-tokens": "file:.yalc/design-tokens",
     "grommet": "^2.35.0",
     "grommet-icons": "^4.12.0",
     "grommet-theme-hpe": "^5.2.0",
diff --git a/sandbox/grommet-app/src/App.jsx b/sandbox/grommet-app/src/App.jsx
index 677377fe2..15f0aef48 100644
--- a/sandbox/grommet-app/src/App.jsx
+++ b/sandbox/grommet-app/src/App.jsx
@@ -1,13 +1,24 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Box, Button, Grommet, Image } from 'grommet';
 import { tokensTheme } from './theme';
 import { Moon, Sun } from 'grommet-icons';
 import Sustainability from './pages/sustainability/index';
 import Home from './pages/index';
+import NextDashboard from './pages/next/index';
+import VisionDashboard from './pages/vision/index';
+import { Login } from './Login';
 
 const App = () => {
   const [darkMode, setDarkMode] = useState(false);
+  const [authenticated, setAuthenticated] = useState(
+    localStorage.getItem('design-tokens-demo') || false,
+  );
+
+  useEffect(() => {
+    if (localStorage.getItem('design-tokens-demo')) setAuthenticated(true);
+  }, []);
+
   return (
     <Grommet
       theme={tokensTheme}
@@ -15,31 +26,39 @@ const App = () => {
       full="min"
       themeMode={darkMode ? 'dark' : 'light'}
     >
-      <Box
-        direction="row"
-        justify="between"
-        align="center"
-        background="background-front"
-        pad={{ horizontal: 'medium', vertical: 'small' }}
-        border={{ color: 'border-weak', side: 'bottom' }}
-      >
-        <Box height="32px" align="start">
-          <Image
-            src={`/hpe_greenlake_grn_${darkMode ? 'rev' : 'pos'}_rgb.svg`}
-            fit="contain"
-          />
-        </Box>
-        <Button
-          icon={darkMode ? <Moon /> : <Sun />}
-          onClick={() => setDarkMode(!darkMode)}
-        />
-      </Box>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/sustainability" element={<Sustainability />} />
-        </Routes>
-      </BrowserRouter>
+      {authenticated ? (
+        <>
+          <Box
+            direction="row"
+            justify="between"
+            align="center"
+            background="background-front"
+            pad={{ horizontal: 'medium', vertical: 'small' }}
+            border={{ color: 'border-weak', side: 'bottom' }}
+          >
+            <Box height="32px" align="start">
+              <Image
+                src={`/hpe_greenlake_grn_${darkMode ? 'rev' : 'pos'}_rgb.svg`}
+                fit="contain"
+              />
+            </Box>
+            <Button
+              icon={darkMode ? <Moon /> : <Sun />}
+              onClick={() => setDarkMode(!darkMode)}
+            />
+          </Box>
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/sustainability" element={<Sustainability />} />
+              <Route path="/next" element={<NextDashboard />} />
+              <Route path="/vision" element={<VisionDashboard />} />
+            </Routes>
+          </BrowserRouter>
+        </>
+      ) : (
+        <Login setAuthenticated={setAuthenticated} />
+      )}
     </Grommet>
   );
 };
diff --git a/sandbox/grommet-app/src/Login.jsx b/sandbox/grommet-app/src/Login.jsx
new file mode 100644
index 000000000..018e16174
--- /dev/null
+++ b/sandbox/grommet-app/src/Login.jsx
@@ -0,0 +1,45 @@
+import {
+  Form,
+  FormField,
+  TextInput,
+  Button,
+  Page,
+  PageContent,
+  PageHeader,
+} from 'grommet';
+import PropTypes from 'prop-types';
+
+export const Login = ({ setAuthenticated }) => {
+  return (
+    <Page>
+      <PageContent>
+        <PageHeader
+          title="HPE Design Tokens Demo"
+          subtitle="Please log in to view the designs."
+        />
+        <Form
+          onSubmit={({ value }) => {
+            if (value.password === import.meta.env.VITE_PASSWORD) {
+              localStorage.setItem('design-tokens-demo', 'true');
+              setAuthenticated(true);
+            }
+          }}
+        >
+          <FormField
+            label="Password"
+            name="password"
+            htmlFor="password"
+            contentProps={{ width: 'medium' }}
+          >
+            <TextInput type="password" name="password" id="password" />
+          </FormField>
+          <Button label="Submit" type="submit" kind="primary" />
+        </Form>
+      </PageContent>
+    </Page>
+  );
+};
+
+Login.propTypes = {
+  setAuthenticated: PropTypes.func,
+};
diff --git a/sandbox/grommet-app/src/components/Card/Card.jsx b/sandbox/grommet-app/src/components/Card/Card.jsx
index fab22d934..768f2b50c 100644
--- a/sandbox/grommet-app/src/components/Card/Card.jsx
+++ b/sandbox/grommet-app/src/components/Card/Card.jsx
@@ -102,7 +102,9 @@ const DesignSystemCard = ({
             align="start"
             pad={{ bottom: 'medium', horizontal: 'medium' }}
           >
-            <Paragraph margin="none">{description}</Paragraph>
+            <Paragraph margin="none" maxLines={4}>
+              {description}
+            </Paragraph>
             {children}
           </CardBody>
         </Box>
diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
index 3bffd2aeb..375137417 100644
--- a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
+++ b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
@@ -35,20 +35,22 @@ export const DashboardCard = ({
     <Card {...rest}>
       <CardHeader align="start">
         <Box direction="row" gap="small" align="start">
-          {icon}
-          <Box gap="xsmall">
+          <Box flex={false}>{icon}</Box>
+          <Box gap="xsmall" flex={false}>
             <Heading level={level} margin="none">
               {title}
             </Heading>
-
             <Text size="small">{subtitle}</Text>
           </Box>
         </Box>
-
-        <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
+        <Box flex={false}>
+          <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
+        </Box>
       </CardHeader>
-      <CardBody pad={{ horizontal: 'medium' }}>{children}</CardBody>
-      <CardFooter>{footer}</CardFooter>
+      {children && (
+        <CardBody pad={{ horizontal: 'medium' }}>{children}</CardBody>
+      )}
+      {footer && <CardFooter>{footer}</CardFooter>}
     </Card>
   );
 };
diff --git a/sandbox/grommet-app/src/mockData/services.json b/sandbox/grommet-app/src/mockData/services.json
index d640f2e60..812c62409 100644
--- a/sandbox/grommet-app/src/mockData/services.json
+++ b/sandbox/grommet-app/src/mockData/services.json
@@ -3,27 +3,63 @@
     {
       "name": "HPE GreenLake Flex Solutions",
       "category": "Workloads",
+      "description": "Manage your cloud services and view usage, cost, and more.",
+      "subscription": true
+    },
+    {
+      "name": "Sustainability Insight Center",
+      "category": "Common",
+      "description": "Monitor your estate carbon footprint and energy consumption.",
+      "href": "/sustainability",
       "subscription": true
     },
     {
       "name": "Aruba Networking",
       "category": "Networking",
+      "description": "Manage campus, branch, SD-WAN & data center networks with AI, automation & security.",
       "subscription": true
     },
     {
       "name": "Compute Ops Management",
       "category": "Compute",
+      "description": "Modern compute management that simplifies provisioning and automates key lifecycle tasks.",
       "subscription": true
     },
     {
-      "name": "Wellness Dashboard",
-      "category": "Governance",
+      "name": "Backup and Recovery",
+      "category": "Storage",
+      "description": "Data protection as a service that’s effortless, efficient, and secure.",
       "subscription": true
     },
     {
-      "name": "Backup and Recovery",
-      "category": "Compute",
-      "subscription": true
+      "name": "Block Storage",
+      "category": "Storage",
+      "description": "Simple self-service storage for any workload with AI-driven cloud management."
+    },
+    {
+      "name": "ML Ops",
+      "category": "Workloads",
+      "description": "Bring DevOps features to the machine learning lifecycle with containerized clusters for testing and development environments."
+    },
+    {
+      "name": "Private Cloud",
+      "category": "Private Cloud",
+      "description": "Cloud solutions that scale to any workload supporting vms, storage, containers and bare metal in your private environment."
+    },
+    {
+      "name": "Data Ops Management",
+      "category": "Storage",
+      "description": "Cloud solutions that scale to any workload supporting vms, storage, containers and bare metal in your private environment."
+    },
+    {
+      "name": "Containers",
+      "category": "Workloads",
+      "description": "Self-service management of containers across edge, data center and hybrid cloud."
+    },
+    {
+      "name": "High Performace Computing",
+      "category": "Workloads",
+      "description": "Solve big problems with systems optimized for high performance workloads and AI."
     }
   ]
 }
diff --git a/sandbox/grommet-app/src/pages/FeaturedServices.jsx b/sandbox/grommet-app/src/pages/FeaturedServices.jsx
new file mode 100644
index 000000000..8f6a0123a
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/FeaturedServices.jsx
@@ -0,0 +1,71 @@
+import { Fragment } from 'react';
+import { Anchor, Box, Heading, Grid, Tabs, Tab } from 'grommet';
+import PropTypes from 'prop-types';
+import services from '../mockData/services.json';
+import { Card } from '../components';
+import { LinkNext } from 'grommet-icons';
+
+const TabContent = ({ data, ...rest }) => (
+  <Grid columns="small" gap="medium" pad={{ vertical: 'medium' }} {...rest}>
+    {data.map((service, index) => (
+      <Card
+        key={index}
+        title={service.name}
+        subtitle={service.category}
+        description={service.description || 'hi'}
+        actions={<LinkNext color="brand" />}
+        level={3}
+      />
+    ))}
+  </Grid>
+);
+
+TabContent.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+export const FeaturedServices = () => {
+  let categories = services.services.map(service => service.category);
+  categories = [...new Set(categories)].sort();
+
+  const Container = Fragment;
+  const containerProps = {};
+  // const Container = Box;
+  // const containerProps = {
+  //   background: 'background-front',
+  //   pad: 'medium',
+  //   round: 'medium',
+  // };
+
+  return (
+    <Container {...containerProps}>
+      <Box gap="medium">
+        <Box direction="row" gap="medium" justify="between">
+          <Heading level={2} margin="none">
+            Featured services
+          </Heading>
+          <Anchor href="#" label="View catalog" />
+        </Box>
+        <Tabs justify="start">
+          <Tab title="Recommended">
+            <TabContent data={services.services.slice(0, 8)} />
+          </Tab>
+          {categories.map(category => {
+            const filteredServices = services.services.filter(
+              service => service.category === category,
+            );
+
+            return (
+              <Tab
+                key={category}
+                title={`${category} (${filteredServices.length})`}
+              >
+                <TabContent data={filteredServices} />
+              </Tab>
+            );
+          })}
+        </Tabs>
+      </Box>
+    </Container>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/GetStarted.jsx b/sandbox/grommet-app/src/pages/GetStarted.jsx
new file mode 100644
index 000000000..4dc270b5c
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/GetStarted.jsx
@@ -0,0 +1,46 @@
+import { Anchor, Box, Grid, Heading, ResponsiveContext } from 'grommet';
+import { DashboardCard } from '../components';
+import { AppsRounded, UserAdd } from 'grommet-icons';
+import { useContext } from 'react';
+
+export const GetStarted = () => {
+  const size = useContext(ResponsiveContext);
+  return (
+    <Box gap="medium">
+      <Box direction="row" justify="between">
+        {/* TO DO is this the h1? */}
+        <Heading level={2} margin="none">
+          Get started
+        </Heading>
+        {/* TO DO this should semantically be a button */}
+        <Anchor label="Dismiss" />
+      </Box>
+      <Grid
+        columns={
+          ['medium', 'small', 'xsmall'].includes(size)
+            ? ['auto']
+            : ['flex', 'flex']
+        }
+        gap="medium"
+      >
+        <DashboardCard
+          title="Find services"
+          subtitle="Discover and launch services from our catalog."
+          icon={
+            // TO DO is this override fine?
+            <Box background={{ dark: true }}>
+              <AppsRounded size="xxlarge" color="green" />
+            </Box>
+          }
+          level={3}
+        />
+        <DashboardCard
+          title="Manage workspace"
+          level={3}
+          subtitle="Set up this workspace, users, access, and more."
+          icon={<UserAdd color="purple" size="xxlarge" />}
+        />
+      </Grid>
+    </Box>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/QuickActions.jsx b/sandbox/grommet-app/src/pages/QuickActions.jsx
deleted file mode 100644
index 68c5edbf4..000000000
--- a/sandbox/grommet-app/src/pages/QuickActions.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Box, Button, Heading } from 'grommet';
-import { Edit } from 'grommet-icons';
-
-export const QuickActions = () => {
-  return (
-    <Box>
-      <Box direction="row" align="center" justify="between">
-        <Heading level={2} margin="none">
-          Quick Actions
-        </Heading>
-        <Button
-          label="Edit"
-          icon={<Edit color="brand" />}
-          kind="subtle"
-          reverse
-        />
-      </Box>
-    </Box>
-  );
-};
diff --git a/sandbox/grommet-app/src/pages/RecentServices.jsx b/sandbox/grommet-app/src/pages/RecentServices.jsx
new file mode 100644
index 000000000..2fb9cedf3
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/RecentServices.jsx
@@ -0,0 +1,97 @@
+import { Fragment, useState } from 'react';
+import { Anchor, List, Grid, Text, Box, Button, Heading } from 'grommet';
+import { Link } from 'react-router-dom';
+import services from '../mockData/services.json';
+import { Apps, List as ListIcon } from 'grommet-icons';
+import { Card } from '../components';
+
+const dates = [
+  '2024-02-28T20:04:00.000Z',
+  '2024-03-30T17:25:00.000Z',
+  '2024-03-10T19:37:00.000Z',
+  '2024-03-04T23:14:00.000Z',
+  '2024-03-02T20:19:00.000Z',
+];
+
+export const RecentServices = () => {
+  const [cards, setCards] = useState(false);
+  const recentServices = services.services.slice(0, 5);
+
+  // const Container = Box;
+  // const containerProps = {
+  //   background: 'background-front',
+  //   pad: 'medium',
+  //   round: 'medium',
+  // };
+  const Container = Fragment;
+  const containerProps = {};
+
+  return (
+    <Container {...containerProps}>
+      <Box gap="medium">
+        <Box direction="row" gap="medium" justify="between">
+          <Heading level={2} margin="none">
+            Recent services
+          </Heading>
+          <Box direction="row" gap="small" align="center">
+            <Button
+              icon={cards ? <ListIcon /> : <Apps />}
+              onClick={() => setCards(!cards)}
+            />
+            <Anchor href="#" label="My services" />
+          </Box>
+        </Box>
+        {cards ? (
+          <Grid columns="small" gap="medium">
+            {recentServices.map(service => (
+              <Card
+                key={service.name}
+                title={service.name}
+                subtitle={service.category}
+                description={service.description}
+                level={3}
+                actions={<Button label="Launch" secondary />}
+              />
+            ))}
+          </Grid>
+        ) : (
+          <List
+            data={recentServices}
+            defaultItemProps={{
+              border: { color: 'border-weak', side: 'bottom' },
+              pad: { vertical: 'small', horizontal: 'none' },
+            }}
+          >
+            {datum => (
+              <Grid
+                columns={['flex', 'flex', 'flex', 'auto']}
+                align="center"
+                gap="small"
+              >
+                <Box>
+                  <Text weight={500} color="text-strong">
+                    {datum.name}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>{datum.category}</Text>
+                </Box>
+                <Text>
+                  {Intl.DateTimeFormat(undefined, {
+                    timeStyle: 'short',
+                    dateStyle: 'medium',
+                  }).format(
+                    new Date(dates[Math.floor(Math.random() * dates.length)]),
+                  )}
+                </Text>
+                <Link to={datum.href}>
+                  <Button label="Launch" secondary />
+                </Link>
+              </Grid>
+            )}
+          </List>
+        )}
+      </Box>
+    </Container>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/index.jsx b/sandbox/grommet-app/src/pages/index.jsx
index ecd7e288b..c5b7772ad 100644
--- a/sandbox/grommet-app/src/pages/index.jsx
+++ b/sandbox/grommet-app/src/pages/index.jsx
@@ -1,67 +1,30 @@
 import { useContext } from 'react';
-import {
-  Box,
-  PageHeader,
-  Page,
-  PageContent,
-  Button,
-  Grid,
-  ResponsiveContext,
-} from 'grommet';
-import { Configure } from 'grommet-icons';
-import { DashboardCard } from '../components';
-import { Recommended } from './Recommended';
-import { Learn } from './Learn';
-import { QuickActions } from './QuickActions';
-import { MyServices } from './MyServices';
-import { SustainabilityOverview } from './SustainabilityOverview';
-import { Notifications } from './Notifications';
+import { Box, Grid, Page, PageContent, ResponsiveContext } from 'grommet';
 
-function Index() {
+import { GetStarted } from './GetStarted';
+import { RecentServices } from './RecentServices';
+import { Learn } from './next/Learn';
+import { QuickActions } from './next/QuickActions';
+import { FeaturedServices } from './FeaturedServices';
+
+function Home() {
   const size = useContext(ResponsiveContext);
   return (
-    <Page pad={{ bottom: 'large', top: 'medium' }}>
+    <Page pad={{ vertical: 'large' }}>
       <PageContent gap="medium">
         <Grid
           columns={
-            ['xlarge', 'large', 'medium'].includes(size)
-              ? ['flex', 'medium']
-              : ['auto']
+            ['small', 'xsmall'].includes(size) ? ['auto'] : ['flex', 'medium']
           }
-          gap="large"
+          gap={size === 'medium' ? 'large' : 'xlarge'}
         >
-          <Box gap="medium">
-            <PageHeader
-              title="Home"
-              actions={
-                <Button
-                  label="Customize"
-                  icon={<Configure color="brand" />}
-                  reverse
-                  kind="subtle"
-                />
-              }
-              pad="none"
-            />
-            <Grid
-              columns={size === 'xlarge' ? ['flex', 'flex'] : ['auto']}
-              gap="medium"
-            >
-              <MyServices />
-              <SustainabilityOverview />
-            </Grid>
-            <Notifications />
-            <Grid
-              columns={size === 'xlarge' ? ['flex', 'flex'] : ['auto']}
-              gap="medium"
-            >
-              <DashboardCard title="Wireless clients" level={2} />
-              <DashboardCard title="Device summary" level={2} />
-            </Grid>
+          <Box gap="large">
+            <GetStarted />
+            <RecentServices />
+            <FeaturedServices />
           </Box>
           <Box gap="medium">
-            <QuickActions />
-            <Recommended />
+            <QuickActions edit={false} />
             <Learn />
           </Box>
         </Grid>
@@ -70,4 +33,4 @@ function Index() {
   );
 }
 
-export default Index;
+export default Home;
diff --git a/sandbox/grommet-app/src/pages/next/BillingSummary.jsx b/sandbox/grommet-app/src/pages/next/BillingSummary.jsx
new file mode 100644
index 000000000..3f1266217
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/next/BillingSummary.jsx
@@ -0,0 +1,140 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Box, DataChart, Grid, Notification, Text } from 'grommet';
+import { DashboardCard } from '../../components';
+import sustainability from '../../mockData/sustainability.json';
+
+const SustainabilityMetric = ({ label, value, unit, options }) => (
+  <Box>
+    <Text size="small">{label}</Text>
+    <Text size="xsmall">
+      <Text size="xlarge" weight={500} color="text-strong">
+        {Intl.NumberFormat(undefined, options).format(value)}
+      </Text>{' '}
+      {unit}
+    </Text>
+  </Box>
+);
+
+SustainabilityMetric.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.number,
+  unit: PropTypes.string,
+  options: PropTypes.shape({}),
+};
+
+export const BillingSummary = () => {
+  return (
+    <Link to="/sustainability" style={{ textDecoration: 'none' }}>
+      <DashboardCard
+        title="Billing summary"
+        subtitle="August 1-10, 2023"
+        level={2}
+      >
+        <Grid columns={[['min-content', 'auto'], 'flex']} gap="medium">
+          <>
+            <SustainabilityMetric
+              label="Carbon emissions"
+              unit="MTCO2e"
+              value={132000}
+            />
+            <DataChart
+              data={sustainability.sustainability.slice(0, 10)}
+              series={['date', 'emissions']}
+              chart={[
+                {
+                  property: 'emissions',
+                  type: 'area',
+                  thickness: 'xsmall',
+                  color: 'graph-4',
+                  opacity: 'medium',
+                },
+                {
+                  property: 'emissions',
+                  type: 'line',
+                  thickness: 'xxsmall',
+                  color: 'graph-4',
+                  round: true,
+                },
+              ]}
+              axis={{
+                x: false,
+                y: false,
+              }}
+              size={{ height: 'xxsmall' }}
+            />
+          </>
+          <>
+            <SustainabilityMetric
+              label="Energy consumption"
+              unit="kWh"
+              value={325000}
+            />
+            <DataChart
+              data={sustainability.sustainability.slice(0, 10)}
+              series={['date', 'energy']}
+              chart={[
+                {
+                  property: 'energy',
+                  type: 'area',
+                  thickness: 'xsmall',
+                  color: 'graph-0',
+                  opacity: 'medium',
+                },
+                {
+                  property: 'energy',
+                  type: 'line',
+                  thickness: 'xxsmall',
+                  color: 'graph-0',
+                  round: true,
+                },
+              ]}
+              axis={{
+                x: false,
+                y: false,
+              }}
+              size={{ height: 'xxsmall' }}
+            />
+          </>
+          <>
+            <SustainabilityMetric
+              label="Energy cost"
+              unit="USD"
+              value={48750}
+            />
+            <DataChart
+              data={sustainability.sustainability.slice(0, 10)}
+              series={['date', 'cost']}
+              chart={[
+                {
+                  property: 'cost',
+                  type: 'area',
+                  thickness: 'xsmall',
+                  color: 'graph-2',
+                  opacity: 'medium',
+                },
+                {
+                  property: 'cost',
+                  type: 'line',
+                  thickness: 'xxsmall',
+                  color: 'graph-2',
+                  round: true,
+                },
+              ]}
+              axis={{
+                x: false,
+                y: false,
+              }}
+              size={{ height: 'xxsmall' }}
+            />
+          </>
+        </Grid>
+        <Notification
+          status="warning"
+          message="Your carbon emissions have increased by 83% in the past month."
+          margin={{ top: 'medium' }}
+        />
+      </DashboardCard>
+    </Link>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/Learn.jsx b/sandbox/grommet-app/src/pages/next/Learn.jsx
similarity index 90%
rename from sandbox/grommet-app/src/pages/Learn.jsx
rename to sandbox/grommet-app/src/pages/next/Learn.jsx
index 3a7edae57..e4b9fcc0a 100644
--- a/sandbox/grommet-app/src/pages/Learn.jsx
+++ b/sandbox/grommet-app/src/pages/next/Learn.jsx
@@ -1,5 +1,5 @@
 import { Box, Heading } from 'grommet';
-import { DashboardCard } from '../components';
+import { DashboardCard } from '../../components';
 
 export const Learn = () => {
   return (
diff --git a/sandbox/grommet-app/src/pages/MyServices.jsx b/sandbox/grommet-app/src/pages/next/MyServices.jsx
similarity index 82%
rename from sandbox/grommet-app/src/pages/MyServices.jsx
rename to sandbox/grommet-app/src/pages/next/MyServices.jsx
index 900cefe47..9e4676f80 100644
--- a/sandbox/grommet-app/src/pages/MyServices.jsx
+++ b/sandbox/grommet-app/src/pages/next/MyServices.jsx
@@ -1,6 +1,6 @@
 import { List, Box, Text } from 'grommet';
-import { DashboardCard } from '../components';
-import services from '../mockData/services.json';
+import { DashboardCard } from '../../components';
+import services from '../../mockData/services.json';
 
 export const MyServices = () => {
   return (
diff --git a/sandbox/grommet-app/src/pages/Notifications.jsx b/sandbox/grommet-app/src/pages/next/Notifications.jsx
similarity index 94%
rename from sandbox/grommet-app/src/pages/Notifications.jsx
rename to sandbox/grommet-app/src/pages/next/Notifications.jsx
index fc6cb4fbc..b4edac8ce 100644
--- a/sandbox/grommet-app/src/pages/Notifications.jsx
+++ b/sandbox/grommet-app/src/pages/next/Notifications.jsx
@@ -5,8 +5,8 @@ import {
   StatusGood,
   CircleInformation,
 } from 'grommet-icons';
-import { DashboardCard, NotificationMetric } from '../components';
-import notifications from '../mockData/notifications.json';
+import { DashboardCard, NotificationMetric } from '../../components';
+import notifications from '../../mockData/notifications.json';
 
 const statuses = {
   critical: {
diff --git a/sandbox/grommet-app/src/pages/next/QuickActions.jsx b/sandbox/grommet-app/src/pages/next/QuickActions.jsx
new file mode 100644
index 000000000..a0db2ce5f
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/next/QuickActions.jsx
@@ -0,0 +1,33 @@
+import { Anchor, Box, Button, Heading } from 'grommet';
+import PropTypes from 'prop-types';
+import { Edit } from 'grommet-icons';
+
+export const QuickActions = ({ edit = true }) => {
+  return (
+    <Box>
+      <Box direction="row" align="center" justify="between">
+        <Heading level={2} margin="none">
+          Quick Actions
+        </Heading>
+        {edit && (
+          <Button
+            label="Edit"
+            icon={<Edit color="brand" />}
+            kind="subtle"
+            reverse
+          />
+        )}
+      </Box>
+      <Box pad="medium" gap="xsmall">
+        <Anchor label="Add devices" href="#" />
+        <Anchor label="Add service subscriptions" href="#" />
+        <Anchor label="Add users / Assign roles" href="#" />
+        <Anchor label="Create location" href="#" />
+      </Box>
+    </Box>
+  );
+};
+
+QuickActions.propTypes = {
+  edit: PropTypes.bool,
+};
diff --git a/sandbox/grommet-app/src/pages/Recommended.jsx b/sandbox/grommet-app/src/pages/next/Recommended.jsx
similarity index 94%
rename from sandbox/grommet-app/src/pages/Recommended.jsx
rename to sandbox/grommet-app/src/pages/next/Recommended.jsx
index 3c875ca51..66bd6cc35 100644
--- a/sandbox/grommet-app/src/pages/Recommended.jsx
+++ b/sandbox/grommet-app/src/pages/next/Recommended.jsx
@@ -1,5 +1,5 @@
 import { Box, Heading } from 'grommet';
-import { DashboardCard } from '../components';
+import { DashboardCard } from '../../components';
 import { Tree, History, Robot } from 'grommet-icons';
 
 export const Recommended = () => {
diff --git a/sandbox/grommet-app/src/pages/SustainabilityOverview.jsx b/sandbox/grommet-app/src/pages/next/SustainabilityOverview.jsx
similarity index 97%
rename from sandbox/grommet-app/src/pages/SustainabilityOverview.jsx
rename to sandbox/grommet-app/src/pages/next/SustainabilityOverview.jsx
index 09ea2f112..3ef635148 100644
--- a/sandbox/grommet-app/src/pages/SustainabilityOverview.jsx
+++ b/sandbox/grommet-app/src/pages/next/SustainabilityOverview.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Box, DataChart, Grid, Notification, Text } from 'grommet';
-import { DashboardCard } from '../components';
-import sustainability from '../mockData/sustainability.json';
+import { DashboardCard } from '../../components';
+import sustainability from '../../mockData/sustainability.json';
 
 const SustainabilityMetric = ({ label, value, unit, options }) => (
   <Box>
diff --git a/sandbox/grommet-app/src/pages/next/index.jsx b/sandbox/grommet-app/src/pages/next/index.jsx
new file mode 100644
index 000000000..eae81b153
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/next/index.jsx
@@ -0,0 +1,75 @@
+import { useContext } from 'react';
+import {
+  Box,
+  PageHeader,
+  Page,
+  PageContent,
+  Button,
+  Grid,
+  ResponsiveContext,
+} from 'grommet';
+import { Configure } from 'grommet-icons';
+import { DashboardCard } from '../../components';
+import { Recommended } from './Recommended';
+import { Learn } from './Learn';
+import { QuickActions } from './QuickActions';
+import { MyServices } from './MyServices';
+import { SustainabilityOverview } from './SustainabilityOverview';
+import { Notifications } from './Notifications';
+import { BillingSummary } from './BillingSummary';
+
+function Index() {
+  const size = useContext(ResponsiveContext);
+  return (
+    <Page pad={{ bottom: 'large', top: 'medium' }}>
+      <PageContent gap="medium">
+        <Grid
+          columns={
+            ['xlarge', 'large', 'medium'].includes(size)
+              ? ['flex', 'medium']
+              : ['auto']
+          }
+          gap="large"
+        >
+          <Box gap="medium">
+            <PageHeader
+              title="Home"
+              actions={
+                <Button
+                  label="Customize"
+                  icon={<Configure color="brand" />}
+                  reverse
+                  kind="subtle"
+                />
+              }
+              pad="none"
+            />
+            <Grid
+              columns={size === 'xlarge' ? ['flex', 'flex', 'flex'] : ['auto']}
+              gap="medium"
+            >
+              <BillingSummary />
+              <MyServices />
+              <SustainabilityOverview />
+            </Grid>
+            <Notifications />
+            <Grid
+              columns={size === 'xlarge' ? ['flex', 'flex'] : ['auto']}
+              gap="medium"
+            >
+              <DashboardCard title="Wireless clients" level={2} />
+              <DashboardCard title="Device summary" level={2} />
+            </Grid>
+          </Box>
+          <Box gap="medium">
+            <QuickActions />
+            <Recommended />
+            <Learn />
+          </Box>
+        </Grid>
+      </PageContent>
+    </Page>
+  );
+}
+
+export default Index;
diff --git a/sandbox/grommet-app/src/pages/sustainability/Devices.jsx b/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
index 1b2224b34..19749bc4d 100644
--- a/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
+++ b/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
@@ -1,4 +1,16 @@
-import { Data, DataTable, Pagination, Box, Text } from 'grommet';
+import {
+  Data,
+  DataTable,
+  Pagination,
+  Box,
+  Text,
+  Toolbar,
+  DataSearch,
+  DataSort,
+  DataFilters,
+  DataSummary,
+  DataView,
+} from 'grommet';
 
 const columns = [
   {
@@ -1083,7 +1095,25 @@ const data = [
 
 export const Devices = () => {
   return (
-    <Data data={data} toolbar>
+    <Data
+      data={data}
+      views={[
+        {
+          name: 'My devices',
+          properties: {
+            type: 'Compute',
+            city: 'San Francisco',
+          },
+        },
+      ]}
+    >
+      <Toolbar>
+        <DataSearch />
+        <DataSort drop />
+        <DataFilters layer />
+        <DataView />
+      </Toolbar>
+      <DataSummary />
       <Box overflow={{ horizontal: 'auto' }}>
         <DataTable
           alignSelf="start"
diff --git a/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx b/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
index e7209f787..c429da3ac 100644
--- a/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
+++ b/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
@@ -6,7 +6,7 @@ const CarbonEmissions = () => (
   <Card title="Carbon emissions" level={2}>
     <Box gap="medium" pad={{ top: 'small' }}>
       <Metric value={132000} unit="MTCO2e" />
-      <Legend label="MTCO2e" color="graph-4" />
+      <Legend label="MTCO2e" color="chart-qualitative-70" />
       <DataChart
         data={mockData.sustainability.slice(0, 10)}
         series={[
@@ -25,14 +25,13 @@ const CarbonEmissions = () => (
             property: 'emissions',
             type: 'area',
             thickness: 'xsmall',
-            color: 'graph-4',
-            opacity: 'medium',
+            color: 'chart-qualitative-70-weak',
           },
           {
             property: 'emissions',
             type: 'line',
             thickness: 'xxsmall',
-            color: 'graph-4',
+            color: 'chart-qualitative-70',
             round: true,
           },
         ]}
@@ -50,7 +49,7 @@ const EnergyConsumption = () => (
   <Card title="Energy consumption" level={2}>
     <Box gap="medium" pad={{ top: 'medium' }}>
       <Metric value={325000} unit="kWh" />
-      <Legend label="Energy consumption (kWh)" color="graph-0" />
+      <Legend label="Energy consumption (kWh)" color="chart-qualitative-20" />
       <DataChart
         data={mockData.sustainability.slice(0, 10)}
         series={[
@@ -69,14 +68,13 @@ const EnergyConsumption = () => (
             property: 'energy',
             type: 'area',
             thickness: 'xsmall',
-            color: 'graph-0',
-            opacity: 'medium',
+            color: 'chart-qualitative-20-weak',
           },
           {
             property: 'energy',
             type: 'line',
             thickness: 'xxsmall',
-            color: 'graph-0',
+            color: 'chart-qualitative-20',
             round: true,
           },
         ]}
@@ -98,7 +96,7 @@ const EnergyCost = () => (
         unit="USD"
         options={{ style: 'currency', currency: 'USD' }}
       />
-      <Legend label="Energy cost (USD)" color="graph-2" />
+      <Legend label="Energy cost (USD)" color="chart-qualitative-30" />
       <DataChart
         data={mockData.sustainability.slice(0, 10)}
         series={[
@@ -117,14 +115,13 @@ const EnergyCost = () => (
             property: 'cost',
             type: 'area',
             thickness: 'xsmall',
-            color: 'graph-2',
-            opacity: 'medium',
+            color: 'chart-qualitative-30-weak',
           },
           {
             property: 'cost',
             type: 'line',
             thickness: 'xxsmall',
-            color: 'graph-2',
+            color: 'chart-qualitative-30',
             round: true,
           },
         ]}
diff --git a/sandbox/grommet-app/src/pages/sustainability/index.jsx b/sandbox/grommet-app/src/pages/sustainability/index.jsx
index e7bd3be00..a1f211e0b 100644
--- a/sandbox/grommet-app/src/pages/sustainability/index.jsx
+++ b/sandbox/grommet-app/src/pages/sustainability/index.jsx
@@ -1,6 +1,15 @@
-import { PageHeader, Page, PageContent, Heading, Button } from 'grommet';
+import {
+  Anchor,
+  PageHeader,
+  Page,
+  PageContent,
+  Heading,
+  Button,
+} from 'grommet';
+import { Link } from 'react-router-dom';
 import { Devices } from './Devices';
 import { SustainabilityInsights } from './SustainabilityInsights';
+import { Previous } from 'grommet-icons';
 
 function Sustainability() {
   return (
@@ -8,6 +17,11 @@ function Sustainability() {
       <PageContent gap="medium">
         <PageHeader
           title="Sustainability Insight Center"
+          parent={
+            <Link to="/">
+              <Anchor label="Home" icon={<Previous />} />
+            </Link>
+          }
           actions={<Button label="Export report" secondary />}
         />
         <SustainabilityInsights />
diff --git a/sandbox/grommet-app/src/pages/vision/index.jsx b/sandbox/grommet-app/src/pages/vision/index.jsx
new file mode 100644
index 000000000..48ebb1e08
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/vision/index.jsx
@@ -0,0 +1,11 @@
+import { Page, PageContent } from 'grommet';
+
+function Vision() {
+  return (
+    <Page pad={{ vertical: 'large' }}>
+      <PageContent gap="medium">TBD</PageContent>
+    </Page>
+  );
+}
+
+export default Vision;
diff --git a/sandbox/grommet-app/src/theme.js b/sandbox/grommet-app/src/theme.js
index 5030132c8..e2411a96a 100644
--- a/sandbox/grommet-app/src/theme.js
+++ b/sandbox/grommet-app/src/theme.js
@@ -2,98 +2,102 @@ import { hpe } from 'grommet-theme-hpe';
 import { deepMerge } from 'grommet/utils';
 import { dark, light, desktop, mobile } from 'design-tokens';
 
-export const tokensTheme = deepMerge(hpe, {
-  global: {
-    borderSize: {
-      xsmall: desktop.border.xsmall.$value,
-      small: desktop.border.small.$value,
-      medium: desktop.border.medium.$value,
-      large: desktop.border.large.$value,
-      xlarge: desktop.border.xlarge.$value,
-    },
-    edgeSize: {
-      none: desktop.spacing.none.$value,
-      hair: desktop.spacing.hair.$value,
-      xxsmall: desktop.spacing.xxsmall.$value,
-      xsmall: desktop.spacing.xsmall.$value,
-      small: desktop.spacing.small.$value,
-      medium: desktop.spacing.medium.$value,
-      large: desktop.spacing.large.$value,
-      xlarge: desktop.spacing.xlarge.$value,
-      responsiveBreakpoint: 'small',
-    },
-    size: {
-      xxsmall: desktop.content.xxsmall.$value,
-      xsmall: desktop.content.xsmall.$value,
-      small: desktop.content.small.$value,
-      medium: desktop.content.medium.$value,
-      large: desktop.content.large.$value,
-      xlarge: desktop.content.xlarge.$value,
-      xxlarge: desktop.content.xxlarge.$value,
-      full: '100%',
+const dimensions = {
+  borderSize: {
+    xsmall: desktop.border.xsmall.$value,
+    small: desktop.border.small.$value,
+    medium: desktop.border.medium.$value,
+    large: desktop.border.large.$value,
+    xlarge: desktop.border.xlarge.$value,
+  },
+  edgeSize: {
+    none: desktop.spacing.none.$value,
+    hair: desktop.spacing.hair.$value,
+    xxsmall: desktop.spacing.xxsmall.$value,
+    xsmall: desktop.spacing.xsmall.$value,
+    small: desktop.spacing.small.$value,
+    medium: desktop.spacing.medium.$value,
+    large: desktop.spacing.large.$value,
+    xlarge: desktop.spacing.xlarge.$value,
+    responsiveBreakpoint: 'small',
+  },
+  size: {
+    xxsmall: desktop.content.xxsmall.$value,
+    xsmall: desktop.content.xsmall.$value,
+    small: desktop.content.small.$value,
+    medium: desktop.content.medium.$value,
+    large: desktop.content.large.$value,
+    xlarge: desktop.content.xlarge.$value,
+    xxlarge: desktop.content.xxlarge.$value,
+    full: '100%',
+  },
+  breakpoints: {
+    xsmall: {
+      borderSize: {
+        xsmall: mobile.border.xsmall.$value,
+        small: mobile.border.small.$value,
+        medium: mobile.border.medium.$value,
+        large: mobile.border.large.$value,
+        xlarge: mobile.border.xlarge.$value,
+      },
+      edgeSize: {
+        none: mobile.spacing.none.$value,
+        hair: mobile.spacing.hair.$value,
+        xxsmall: mobile.spacing.xxsmall.$value,
+        xsmall: mobile.spacing.xsmall.$value,
+        small: mobile.spacing.small.$value,
+        medium: mobile.spacing.medium.$value,
+        large: mobile.spacing.large.$value,
+        xlarge: mobile.spacing.xlarge.$value,
+        responsiveBreakpoint: 'small',
+      },
+      size: {
+        xxsmall: mobile.content.xxsmall.$value,
+        xsmall: mobile.content.xsmall.$value,
+        small: mobile.content.small.$value,
+        medium: mobile.content.medium.$value,
+        large: mobile.content.large.$value,
+        xlarge: mobile.content.xlarge.$value,
+        xxlarge: mobile.content.xxlarge.$value,
+        full: '100%',
+      },
     },
-    breakpoints: {
-      xsmall: {
-        borderSize: {
-          xsmall: mobile.border.xsmall.$value,
-          small: mobile.border.small.$value,
-          medium: mobile.border.medium.$value,
-          large: mobile.border.large.$value,
-          xlarge: mobile.border.xlarge.$value,
-        },
-        edgeSize: {
-          none: mobile.spacing.none.$value,
-          hair: mobile.spacing.hair.$value,
-          xxsmall: mobile.spacing.xxsmall.$value,
-          xsmall: mobile.spacing.xsmall.$value,
-          small: mobile.spacing.small.$value,
-          medium: mobile.spacing.medium.$value,
-          large: mobile.spacing.large.$value,
-          xlarge: mobile.spacing.xlarge.$value,
-          responsiveBreakpoint: 'small',
-        },
-        size: {
-          xxsmall: mobile.content.xxsmall.$value,
-          xsmall: mobile.content.xsmall.$value,
-          small: mobile.content.small.$value,
-          medium: mobile.content.medium.$value,
-          large: mobile.content.large.$value,
-          xlarge: mobile.content.xlarge.$value,
-          xxlarge: mobile.content.xxlarge.$value,
-          full: '100%',
-        },
-      },
-      small: {
-        borderSize: {
-          xsmall: mobile.border.xsmall.$value,
-          small: mobile.border.small.$value,
-          medium: mobile.border.medium.$value,
-          large: mobile.border.large.$value,
-          xlarge: mobile.border.xlarge.$value,
-        },
-        edgeSize: {
-          none: mobile.spacing.none.$value,
-          hair: mobile.spacing.hair.$value,
-          xxsmall: mobile.spacing.xxsmall.$value,
-          xsmall: mobile.spacing.xsmall.$value,
-          small: mobile.spacing.small.$value,
-          medium: mobile.spacing.medium.$value,
-          large: mobile.spacing.large.$value,
-          xlarge: mobile.spacing.xlarge.$value,
-          responsiveBreakpoint: 'small',
-        },
-        size: {
-          xxsmall: mobile.content.xxsmall.$value,
-          xsmall: mobile.content.xsmall.$value,
-          small: mobile.content.small.$value,
-          medium: mobile.content.medium.$value,
-          large: mobile.content.large.$value,
-          xlarge: mobile.content.xlarge.$value,
-          xxlarge: mobile.content.xxlarge.$value,
-          full: '100%',
-        },
+    small: {
+      borderSize: {
+        xsmall: mobile.border.xsmall.$value,
+        small: mobile.border.small.$value,
+        medium: mobile.border.medium.$value,
+        large: mobile.border.large.$value,
+        xlarge: mobile.border.xlarge.$value,
+      },
+      edgeSize: {
+        none: mobile.spacing.none.$value,
+        hair: mobile.spacing.hair.$value,
+        xxsmall: mobile.spacing.xxsmall.$value,
+        xsmall: mobile.spacing.xsmall.$value,
+        small: mobile.spacing.small.$value,
+        medium: mobile.spacing.medium.$value,
+        large: mobile.spacing.large.$value,
+        xlarge: mobile.spacing.xlarge.$value,
+        responsiveBreakpoint: 'small',
+      },
+      size: {
+        xxsmall: mobile.content.xxsmall.$value,
+        xsmall: mobile.content.xsmall.$value,
+        small: mobile.content.small.$value,
+        medium: mobile.content.medium.$value,
+        large: mobile.content.large.$value,
+        xlarge: mobile.content.xlarge.$value,
+        xxlarge: mobile.content.xxlarge.$value,
+        full: '100%',
       },
     },
+  },
+};
+
+export const tokensTheme = deepMerge(hpe, {
+  global: {
+    ...dimensions,
     colors: {
       brand: {
         dark: dark.color.brand.$value,
@@ -195,6 +199,62 @@ export const tokensTheme = deepMerge(hpe, {
         light: light.color.background.validation.warning.$value,
         dark: dark.color.background.validation.critical.$value,
       },
+      'chart-qualitative-10': {
+        light: light.color.chart.qualitative[10].$value,
+        dark: dark.color.chart.qualitative[10].$value,
+      },
+      'chart-qualitative-10-weak': {
+        light: light.color.chart.qualitative['10-secondary'].$value,
+        dark: dark.color.chart.qualitative['10-secondary'].$value,
+      },
+      'chart-qualitative-20': {
+        light: light.color.chart.qualitative[20].$value,
+        dark: dark.color.chart.qualitative[20].$value,
+      },
+      'chart-qualitative-20-weak': {
+        light: light.color.chart.qualitative['20-secondary'].$value,
+        dark: dark.color.chart.qualitative['20-secondary'].$value,
+      },
+      'chart-qualitative-30': {
+        light: light.color.chart.qualitative[30].$value,
+        dark: dark.color.chart.qualitative[30].$value,
+      },
+      'chart-qualitative-30-weak': {
+        light: light.color.chart.qualitative['30-secondary'].$value,
+        dark: dark.color.chart.qualitative['30-secondary'].$value,
+      },
+      'chart-qualitative-40': {
+        light: light.color.chart.qualitative[40].$value,
+        dark: dark.color.chart.qualitative[40].$value,
+      },
+      'chart-qualitative-40-weak': {
+        light: light.color.chart.qualitative['40-secondary'].$value,
+        dark: dark.color.chart.qualitative['40-secondary'].$value,
+      },
+      'chart-qualitative-50': {
+        light: light.color.chart.qualitative[50].$value,
+        dark: dark.color.chart.qualitative[50].$value,
+      },
+      'chart-qualitative-50-weak': {
+        light: light.color.chart.qualitative['50-secondary'].$value,
+        dark: dark.color.chart.qualitative['50-secondary'].$value,
+      },
+      'chart-qualitative-60': {
+        light: light.color.chart.qualitative[60].$value,
+        dark: dark.color.chart.qualitative[60].$value,
+      },
+      'chart-qualitative-60-weak': {
+        light: light.color.chart.qualitative['60-secondary'].$value,
+        dark: dark.color.chart.qualitative['60-secondary'].$value,
+      },
+      'chart-qualitative-70': {
+        light: light.color.chart.qualitative[70].$value,
+        dark: dark.color.chart.qualitative[70].$value,
+      },
+      'chart-qualitative-70-weak': {
+        light: light.color.chart.qualitative['70-secondary'].$value,
+        dark: dark.color.chart.qualitative['70-secondary'].$value,
+      },
       // TO DO do we want these as tokens?
       'background-layer-overlay': '#00000080',
       control: 'brand',
@@ -213,41 +273,6 @@ export const tokensTheme = deepMerge(hpe, {
       placeholder: 'text-weak',
       'text-primary-button': '#FFFFFF',
       'background-cta-alternate': '#F2F2F2',
-      // blue: {
-      //   dark: '#00567A',
-      //   light: '#00C8FF',
-      // },
-      // 'blue!': '#00739D',
-      // green: {
-      //   dark: '#008567',
-      //   light: '#17EBA0',
-      // },
-      // 'green!': '#01A982',
-      // teal: {
-      //   dark: '#117B82',
-      //   light: '#82FFF2',
-      // },
-      // 'teal!': '#00E8CF',
-      // purple: {
-      //   dark: '#6633BC',
-      //   light: '#F740FF',
-      // },
-      // 'purple!': '#7630EA',
-      // red: {
-      //   dark: '#A2423D',
-      //   light: '#FC6161',
-      // },
-      // 'red!': '#C54E4B',
-      // orange: {
-      //   dark: '#9B6310',
-      //   light: '#FFBC44',
-      // },
-      // 'orange!': '#FF8300',
-      // yellow: {
-      //   dark: '#8D741C',
-      //   light: '#FFEB59',
-      // },
-      // 'yellow!': '#FEC901',
     },
   },
   button: {
@@ -262,7 +287,7 @@ export const tokensTheme = deepMerge(hpe, {
   card: {
     container: {
       extend: '',
-      elevation: 'small',
+      // elevation: 'small',
     },
   },
   notification: {
diff --git a/yarn.lock b/yarn.lock
index 35f67d22e..c4d66922e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13,12 +13,12 @@
   integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
 
 "@ampproject/remapping@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
-  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
 "@applitools/dom-capture@11.1.2":
   version "11.1.2"
@@ -1889,24 +1889,24 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.4.tgz#9b18145d26cf33d08576cf4c7665b28554480ed7"
-  integrity sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
   dependencies:
-    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/set-array" "^1.2.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
 "@jridgewell/resolve-uri@^3.0.3", "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
   integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
 
-"@jridgewell/set-array@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
-  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
 "@jridgewell/source-map@^0.3.3":
   version "0.3.5"
@@ -1929,10 +1929,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.23"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.23.tgz#afc96847f3f07841477f303eed687707a5aacd80"
-  integrity sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.24"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.24.tgz#e5640be1cab4085e4012a94c132ae86138f90f48"
+  integrity sha512-+VaWXDa6+l6MhflBvVXjIEAzb59nQ2JUK3bwRp2zRpPtU+8TFRy9Gg/5oIcNlkEL5PGlBFGfemUVvIgLnTzq7Q==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
@@ -2292,9 +2292,9 @@
     "@types/estree" "*"
 
 "@types/eslint@*":
-  version "8.56.4"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.4.tgz#1ce772b385cf23982d048c3ddadba6ff5787c761"
-  integrity sha512-lG1GLUnL5vuRBGb3MgWUWLdGMH2Hps+pERuyQXCfWozuGKdnhf9Pbg4pkcrVUHjKrU7Rl+GCZ/299ObBXZFAxg==
+  version "8.56.5"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.5.tgz#94b88cab77588fcecdd0771a6d576fa1c0af9d02"
+  integrity sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -2452,9 +2452,9 @@
     "@types/node" "*"
 
 "@types/node@*", "@types/node@^20.4.5":
-  version "20.11.22"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.22.tgz#9a192c3d7e7e71fa3a4b15032654f64643815cd6"
-  integrity sha512-/G+IxWxma6V3E+pqK1tSl2Fo1kl41pK1yeCyDsgkF9WlVAme4j5ISYM2zR11bgLFJGLN5sVK40T4RJNuiZbEjA==
+  version "20.11.24"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.24.tgz#cc207511104694e84e9fb17f9a0c4c42d4517792"
+  integrity sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==
   dependencies:
     undici-types "~5.26.4"
 
@@ -2484,9 +2484,9 @@
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
 "@types/react@>=16":
-  version "18.2.60"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.60.tgz#df026eaef1100b6dafe420f36fecb1d209a8cee1"
-  integrity sha512-dfiPj9+k20jJrLGOu9Nf6eqxm2EyJRrq2NvwOFsfbb7sFExZ9WELPs67UImHj3Ayxg8ruTtKtNnbjaF8olPq0A==
+  version "18.2.61"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.61.tgz#5607308495037436779939ec0348a5816c08799d"
+  integrity sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3372,13 +3372,13 @@ bluebird@3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-body-parser@1.20.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
-  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+body-parser@1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
+  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
   dependencies:
     bytes "3.1.2"
-    content-type "~1.0.4"
+    content-type "~1.0.5"
     debug "2.6.9"
     depd "2.0.0"
     destroy "1.2.0"
@@ -3386,7 +3386,7 @@ body-parser@1.20.1:
     iconv-lite "0.4.24"
     on-finished "2.4.1"
     qs "6.11.0"
-    raw-body "2.5.1"
+    raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
 
@@ -3896,7 +3896,7 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
-content-type@~1.0.4:
+content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
@@ -4392,9 +4392,9 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.4.668:
-  version "1.4.686"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.686.tgz#54105e8d48aec0315951d0a45f2104907b2d1807"
-  integrity sha512-3avY1B+vUzNxEgkBDpKOP8WarvUAEwpRaiCL0He5OKWEFxzaOFiq4WoZEZe7qh0ReS7DiWoHMnYoQCKxNZNzSg==
+  version "1.4.690"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz#dd5145d45c49c08a9a6f7454127e660bdf9a3fa7"
+  integrity sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -4489,17 +4489,17 @@ error-stack-parser@^1.3.6:
     stackframe "^0.3.1"
 
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
-  version "1.22.4"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.4.tgz#26eb2e7538c3271141f5754d31aabfdb215f27bf"
-  integrity sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==
+  version "1.22.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.5.tgz#1417df4e97cc55f09bf7e58d1e614bc61cb8df46"
+  integrity sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==
   dependencies:
     array-buffer-byte-length "^1.0.1"
     arraybuffer.prototype.slice "^1.0.3"
-    available-typed-arrays "^1.0.6"
+    available-typed-arrays "^1.0.7"
     call-bind "^1.0.7"
     es-define-property "^1.0.0"
     es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.2"
+    es-set-tostringtag "^2.0.3"
     es-to-primitive "^1.2.1"
     function.prototype.name "^1.1.6"
     get-intrinsic "^1.2.4"
@@ -4507,15 +4507,15 @@ es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
     globalthis "^1.0.3"
     gopd "^1.0.1"
     has-property-descriptors "^1.0.2"
-    has-proto "^1.0.1"
+    has-proto "^1.0.3"
     has-symbols "^1.0.3"
     hasown "^2.0.1"
     internal-slot "^1.0.7"
     is-array-buffer "^3.0.4"
     is-callable "^1.2.7"
-    is-negative-zero "^2.0.2"
+    is-negative-zero "^2.0.3"
     is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
+    is-shared-array-buffer "^1.0.3"
     is-string "^1.0.7"
     is-typed-array "^1.1.13"
     is-weakref "^1.0.2"
@@ -4528,10 +4528,10 @@ es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
     string.prototype.trim "^1.2.8"
     string.prototype.trimend "^1.0.7"
     string.prototype.trimstart "^1.0.7"
-    typed-array-buffer "^1.0.1"
-    typed-array-byte-length "^1.0.0"
-    typed-array-byte-offset "^1.0.0"
-    typed-array-length "^1.0.4"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.5"
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.14"
 
@@ -4593,7 +4593,7 @@ es-module-lexer@^1.2.1:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.4.1.tgz#41ea21b43908fe6a287ffcbe4300f790555331f5"
   integrity sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==
 
-es-set-tostringtag@^2.0.2:
+es-set-tostringtag@^2.0.2, es-set-tostringtag@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
   integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
@@ -5088,13 +5088,13 @@ expect@^29.0.0, expect@^29.7.0:
     jest-util "^29.7.0"
 
 express@^4.17.3:
-  version "4.18.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
-  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+  version "4.18.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.3.tgz#6870746f3ff904dee1819b82e4b51509afffb0d4"
+  integrity sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.1"
+    body-parser "1.20.2"
     content-disposition "0.5.4"
     content-type "~1.0.4"
     cookie "0.5.0"
@@ -5656,11 +5656,11 @@ grommet-icons@^4.10.0:
 
 "grommet-theme-hpe@https://github.com/grommet/grommet-theme-hpe/tarball/stable":
   version "0.0.0"
-  resolved "https://github.com/grommet/grommet-theme-hpe/tarball/stable#de2e41d97485a8c6f004d34843b1ef2b93d2c3ec"
+  resolved "https://github.com/grommet/grommet-theme-hpe/tarball/stable#b31ec75f4de8c51671e7dcb9eeaea5b582d8ebfa"
 
 "grommet@https://github.com/grommet/grommet/tarball/stable":
   version "2.35.0"
-  resolved "https://github.com/grommet/grommet/tarball/stable#e390b94064a0d25a63fc497dbf56cbff762eb0bf"
+  resolved "https://github.com/grommet/grommet/tarball/stable#31f99a067249a8188e2fa7aa822a27b557796938"
   dependencies:
     grommet-icons "^4.10.0"
     hoist-non-react-statics "^3.2.0"
@@ -6290,7 +6290,7 @@ is-map@^2.0.1, is-map@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
   integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
 
-is-negative-zero@^2.0.2:
+is-negative-zero@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
   integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
@@ -6383,7 +6383,7 @@ is-set@^2.0.1, is-set@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
   integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
 
-is-shared-array-buffer@^1.0.2:
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
   integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
@@ -9333,7 +9333,7 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-body@^2.2.0:
+raw-body@2.5.2, raw-body@^2.2.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
   integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
@@ -9948,11 +9948,11 @@ shell-quote@^1.8.1:
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
 side-channel@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.5.tgz#9a84546599b48909fb6af1211708d23b1946221b"
-  integrity sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
   dependencies:
-    call-bind "^1.0.6"
+    call-bind "^1.0.7"
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
@@ -10939,7 +10939,7 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typed-array-buffer@^1.0.1:
+typed-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
   integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
@@ -10948,7 +10948,7 @@ typed-array-buffer@^1.0.1:
     es-errors "^1.3.0"
     is-typed-array "^1.1.13"
 
-typed-array-byte-length@^1.0.0:
+typed-array-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
   integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
@@ -10959,7 +10959,7 @@ typed-array-byte-length@^1.0.0:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
-typed-array-byte-offset@^1.0.0:
+typed-array-byte-offset@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
   integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
@@ -10971,7 +10971,7 @@ typed-array-byte-offset@^1.0.0:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
-typed-array-length@^1.0.4:
+typed-array-length@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.5.tgz#57d44da160296d8663fd63180a1802ebf25905d5"
   integrity sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==