update DS

www/package.json

@@ -44,7 +44,7 @@
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@octokit/core": "4.2.1",
-    "@pluralsh/design-system": "3.69.2",
+    "@pluralsh/design-system": "3.74.2",
     "@react-spring/web": "9.7.3",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",

www/src/_deprecated/components/incidents/Severity.tsx

@@ -43,7 +43,7 @@ function dot(color, theme) {
     alignItems: 'center',
     display: 'flex',
 
-    ':before': {
+    '&:before': {
       backgroundColor: clr,
       borderRadius: 10,
       content: '" "',

www/src/components/account/Account.tsx

@@ -5,10 +5,8 @@ import { Outlet, useParams } from 'react-router-dom'
 import { Flex } from 'honorable'
 
 import { ResponsiveLayoutContentContainer } from '../utils/layout/ResponsiveLayoutContentContainer'
-import { ResponsiveLayoutSidecarContainer } from '../utils/layout/ResponsiveLayoutSidecarContainer'
-import { ResponsiveLayoutSpacer } from '../utils/layout/ResponsiveLayoutSpacer'
-import { ResponsiveLayoutSidenavContainer } from '../utils/layout/ResponsiveLayoutSidenavContainer'
 import { ResponsiveLayoutPage } from '../utils/layout/ResponsiveLayoutPage'
+import { ResponsiveLayoutSidenavContainer } from '../utils/layout/ResponsiveLayoutSidenavContainer'
 
 import AccountSideNav from './AccountSidenav'
 
@@ -67,15 +65,12 @@ export function Account() {
         overflowY="auto"
         padding="large"
       >
-        <ResponsiveLayoutSpacer />
         <TabPanel
           as={<ResponsiveLayoutContentContainer overflow="visible" />}
           stateRef={tabStateRef}
         >
           <Outlet />
         </TabPanel>
-        <ResponsiveLayoutSpacer />
-        <ResponsiveLayoutSidecarContainer />
       </Flex>
     </ResponsiveLayoutPage>
   )

www/src/components/account/AccountSidenav.tsx

@@ -31,6 +31,7 @@ function AccountTabList({ tabStateRef }: any) {
     >
       {DIRECTORY.map(({ label, path }) => (
         <LinkTabWrap
+          vertical
           key={path}
           textValue={label}
           to={path}

www/src/components/account/billing/BillingPricingTable.tsx

@@ -4,7 +4,7 @@ import { Div } from 'honorable'
 const columnStyles = {
   position: 'relative',
   boxShadow: '-12px 0 12px 0px rgb(14 16 21 / 20%)',
-  ':first-child': {
+  '&:first-child': {
     boxShadow: 'none',
     '> div': {
       display: 'flex',

www/src/components/audits/AuditDirectory.tsx

@@ -57,6 +57,7 @@ export function AuditDirectory() {
           >
             {DIRECTORY.map(({ label, path }) => (
               <LinkTabWrap
+                vertical
                 key={path}
                 textValue={label}
                 to={path}

www/src/components/create-cluster/CreateCluster.tsx

@@ -187,7 +187,9 @@ const MainWrapperSC = styled.div(({ theme }) => ({
   justifyContent: 'space-between',
   gap: theme.spacing.xlarge,
   padding: theme.spacing.large,
-  '::after': {
+  height: '100%',
+  overflow: 'auto',
+  '&::after': {
     // makes the spacing look a little nicer
     content: '""',
     flex: 0.35,
@@ -197,6 +199,7 @@ const MainWrapperSC = styled.div(({ theme }) => ({
 const SidebarWrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
   width: 300,
+  height: 'min-content',
   flexDirection: 'column',
   gap: theme.spacing.xlarge,
 }))

www/src/components/marketplace/MarketplaceRepositories.tsx

@@ -207,13 +207,9 @@ function MarketplaceRepositories({ publisher }: { publisher?: any }) {
       padding={0}
       overflow="auto"
     >
-      {!publisher && <ResponsiveLayoutSpacer />}
       <Flex
         direction="column"
         overflow="hidden"
-        maxWidth-desktopLarge-up={publisher ? null : 1640}
-        width-desktopLarge-up={publisher ? null : 1640}
-        width-desktopLarge-down="100%"
         flexGrow={publisher ? 1 : 0}
       >
         <Flex