linode · aaleksee-akamai · Apr 8, 2026
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -45,7 +45,9 @@
     "@tanstack/react-query-devtools": "5.51.24",
     "@tanstack/react-router": "^1.111.11",
     "@xterm/xterm": "^5.5.0",
-    "akamai-cds-react-components": "0.1.0",
+    "@akamai/cds-components": "0.0.0-20260407204557",
+    "@akamai/cds-icons": "0.0.0-20260407204557",
+    "@akamai/cds-tokens": "0.0.0-20260407204557",
     "algoliasearch": "^4.14.3",
     "axios": "~1.13.5",
     "braintree-web": "^3.92.2",

diff --git a/packages/manager/src/components/ImageSelect/ImageSelectTable.tsx b/packages/manager/src/components/ImageSelect/ImageSelectTable.tsx
@@ -17,15 +17,15 @@ import {
   useTheme,
 } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';

diff --git a/packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx b/packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx
@@ -7,7 +7,7 @@ import {
 } from '@linode/ui';
 import { convertStorageUnit, pluralize } from '@linode/utilities';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';

diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx
@@ -1,11 +1,11 @@
 import { Box, CircleProgress, LinkButton, useTheme } from '@linode/ui';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants';

diff --git a/...er/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx b/...er/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx
@@ -1,5 +1,5 @@
 import { Hidden } from '@linode/ui';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import * as React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';

diff --git a/...ager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx b/...ager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx
@@ -9,15 +9,15 @@ import {
 } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/material/styles';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { Link } from 'src/components/Link';

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -1,13 +1,13 @@
 import { Hidden } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants';

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
@@ -5,7 +5,7 @@ import {
 } from '@linode/queries';
 import { Chip, Hidden } from '@linode/ui';
 import { formatStorageUnits } from '@linode/utilities';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';

diff --git a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import { useLocation, useNavigate, useSearch } from '@tanstack/react-router';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   sortRows,
   Table,
@@ -14,7 +14,7 @@ import {
   TableHeaderCell,
   TableRow,
   TableRowExpanded,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
@@ -38,7 +38,7 @@ import {
 
 import type { RoleView } from '../../Shared/types';
 import type { SelectOption } from '@linode/ui';
-import type { Order } from 'akamai-cds-react-components/Table';
+import type { Order } from '@akamai/cds-components/react/Table';
 
 const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Roles',

diff --git a/...anager/src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel.style.ts b/...anager/src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel.style.ts
@@ -7,6 +7,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
       : theme.tokens.color.Neutrals[100],
   marginTop: theme.tokens.spacing.S8,
   padding: theme.tokens.spacing.S12,
+  boxSizing: 'border-box',
 }));
 
 export const StyledTitle = styled(Typography, {

diff --git a/packages/manager/src/features/IAM/Users/UserRoles/AssignNewRoleDrawer.tsx b/packages/manager/src/features/IAM/Users/UserRoles/AssignNewRoleDrawer.tsx
@@ -1,3 +1,8 @@
+import {
+  Button,
+  Drawer,
+  NotificationBanner,
+} from '@akamai/cds-components/react';
 import {
   delegationQueries,
   iamQueries,
@@ -6,22 +11,12 @@ import {
   useUpdateDefaultDelegationAccessQuery,
   useUserRolesMutation,
 } from '@linode/queries';
-import {
-  ActionsPanel,
-  Drawer,
-  LinkButton,
-  Notice,
-  Typography,
-} from '@linode/ui';
 import { useTheme } from '@mui/material';
-import Grid from '@mui/material/Grid';
 import { useParams } from '@tanstack/react-router';
 import { enqueueSnackbar } from 'notistack';
 import React, { useEffect, useState } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 
-import { Link } from 'src/components/Link';
-import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel';
 import { AssignSingleRole } from 'src/features/IAM/Users/UserRoles/AssignSingleRole';
 
 import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDelegationRole';
@@ -131,8 +126,8 @@ export const AssignNewRoleDrawer = ({
       }
       enqueueSnackbar(`Roles added.`, { variant: 'success' });
       handleClose();
-    } catch (error) {
-      setError(error.field ?? 'root', {
+    } catch {
+      setError('root', {
         message: INTERNAL_ERROR_NO_CHANGES_SAVED,
       });
     }
@@ -152,50 +147,51 @@ export const AssignNewRoleDrawer = ({
   }, [open, reset]);
 
   return (
-    <Drawer
-      onClose={handleClose}
-      open={open}
-      title={
-        isDefaultDelegationRolesForChildAccount
+    <Drawer onClose={handleClose} open={open}>
+      <span slot="header">
+        {isDefaultDelegationRolesForChildAccount
           ? 'Add New Default Roles'
-          : 'Assign New Roles'
-      }
-    >
+          : 'Assign New Roles'}
+      </span>
+
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(onSubmit)}>
           {formState.errors.root?.message && (
-            <Notice text={formState.errors.root?.message} variant="error" />
+            <NotificationBanner
+              style={{ marginBottom: theme.tokens.spacing.S16 }}
+              text={formState.errors.root?.message}
+              type="error"
+            />
           )}
-
-          <Typography sx={{ marginBottom: 2.5 }}>
+          <p style={{ marginBottom: theme.tokens.spacing.S20, marginTop: 0 }}>
             {isDefaultDelegationRolesForChildAccount
               ? 'Add a role you want to assign by default to new delegate users. Some roles require selecting entities they should apply to. Configure the first role and continue adding roles or save the assignment.'
               : 'Select a role you want to assign to a user. Some roles require selecting entities they should apply to. Configure the first role and continue adding roles or save the assignment.'}{' '}
-            <Link to={ROLES_LEARN_MORE_LINK}>
+            <a href={ROLES_LEARN_MORE_LINK}>
               Learn more about roles and permissions
-            </Link>
+            </a>
             .
-          </Typography>
-          <Grid
-            container
-            direction="row"
-            spacing={2}
-            sx={() => ({
+          </p>
+          <div
+            style={{
+              display: 'flex',
               justifyContent: 'space-between',
               marginBottom: theme.tokens.spacing.S16,
-            })}
+            }}
           >
-            <Typography variant={'h3'}>Roles</Typography>
+            <h3 style={{ margin: 0, fontSize: theme.tokens.font.FontSize.S }}>
+              Roles
+            </h3>
             {roles.length > 0 && roles.some((field) => field.role) && (
-              <StyledLinkButtonBox sx={{ marginTop: 0 }}>
-                <LinkButton
-                  onClick={() => setAreDetailsHidden(!areDetailsHidden)}
-                >
-                  {areDetailsHidden ? 'Show' : 'Hide'} details
-                </LinkButton>
-              </StyledLinkButtonBox>
+              <Button
+                onClick={() => setAreDetailsHidden(!areDetailsHidden)}
+                style={{ marginTop: 0 }}
+                variant="link"
+              >
+                {areDetailsHidden ? 'Show' : 'Hide'} details
+              </Button>
             )}
-          </Grid>
+          </div>
 
           {!!accountRoles &&
             fields.map((field, index) => (
@@ -211,31 +207,50 @@ export const AssignNewRoleDrawer = ({
 
           {/* If all roles are filled, allow them to add another */}
           {roles.length > 0 && roles.every((field) => field.role?.value) && (
-            <StyledLinkButtonBox sx={{ marginTop: theme.tokens.spacing.S12 }}>
-              <LinkButton onClick={() => append({ role: null })}>
-                Add another role
-              </LinkButton>
-            </StyledLinkButtonBox>
+            <Button
+              onClick={() => append({ role: null })}
+              style={{ marginTop: theme.tokens.spacing.S12 }}
+              variant="link"
+            >
+              Add another role
+            </Button>
           )}
-          <ActionsPanel
-            primaryButtonProps={{
-              'data-testid': 'submit',
-              label: isDefaultDelegationRolesForChildAccount ? 'Add' : 'Assign',
-              type: 'submit',
-              loading:
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: theme.tokens.spacing.S8,
+              marginTop: theme.tokens.spacing.S16,
+              alignItems: 'center',
+            }}
+          >
+            {/* <Button onClick={handleClose} variant="secondary">
+              Cancel
+            </Button> */}
+            <Button
+              onClick={handleClose}
+              style={{ marginRight: theme.tokens.spacing.S8 }}
+              variant="link"
+            >
+              Cancel
+            </Button>
+            <Button
+              data-pendo-id={
+                isDefaultDelegationRolesForChildAccount
+                  ? IAM_ROLES_PENDO_IDS.addNewDefaultRolesDrawer
+                  : undefined
+              }
+              processing={
                 isUserRolesPending ||
                 isDefaultRolesPending ||
-                formState.isSubmitting,
-              'data-pendo-id': isDefaultDelegationRolesForChildAccount
-                ? IAM_ROLES_PENDO_IDS.addNewDefaultRolesDrawer
-                : undefined,
-            }}
-            secondaryButtonProps={{
-              'data-testid': 'cancel',
-              label: 'Cancel',
-              onClick: handleClose,
-            }}
-          />
+                formState.isSubmitting
+              }
+              type="submit"
+              variant="primary"
+            >
+              {isDefaultDelegationRolesForChildAccount ? 'Add' : 'Assign'}
+            </Button>
+          </div>
         </form>
       </FormProvider>
     </Drawer>