@licklist/design 0.78.31 → 0.78.33

package/dist/v2/pages/Settings/components/SidebarNavItem.js

@@ -1,10 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
-import { FormField } from '../../../components/FormField/FormField.js';
+import '../../../components/Badge/Badge.scss.js';
+import '../../../components/Button/Button.scss.js';
+import '../../../components/Button/GhostButton.scss.js';
+import '../../../components/QuickFilter/QuickFilter.scss.js';
+import '../../../components/NewTable/NewTable.scss.js';
+import '../../../components/ActionMenu/ActionMenu.scss.js';
+import '../../../components/Modal/DeleteModal.scss.js';
 import '../../../components/NewInput/NewInput.js';
+import { FormField } from '../../../components/FormField/FormField.js';
 import '../../../components/Checkbox/Checkbox.js';
 import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
-import '../../../components/Button/Button.scss.js';
 import '../../../components/NewPageHeader/NewPageHeader.scss.js';
 import '../../../components/SectionHeader/SectionHeader.scss.js';
 import '../../../components/Select/Select.scss.js';
@@ -14,6 +20,7 @@ import '../../../components/UserPanel/UserPanel.scss.js';
 import '../../../components/EntityHeader/EntityHeader.scss.js';
 import '../../../components/Alert/Alert.scss.js';
 import '../../../components/NPSScore/NPSScore.scss.js';
+import '../../../components/Pagination/Pagination.scss.js';
 import './SidebarNavItem.scss.js';
 
 var SidebarNavItem = function(param) {

package/dist/v2/styles/form/NewInput.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-xs-size,11px);font-weight:400;line-height:var(--text-xs-line,14px);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--labels-main-label-primary,#121e52);flex:1 0 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{display:block;font-style:normal}.new-form-input__label,.new-form-input__label-optional{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;line-height:20px}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--labels-main-label-primary,#121e52);flex:1 0 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:52px;padding:8px 10px;transition:all .2s ease;width:70%}.new-form-input__input-with-icon:focus-within{border-color:var(--border-selected,#6200ee)}.new-form-input__input-with-icon .icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;order:-1;width:24px}.new-form-input__input-with-icon--right .icon{order:1}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}.new-form-input__input-with-icon input[type=date]::-webkit-inner-spin-button,.new-form-input__input-with-icon input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}.new-form-input.dob-input .new-form-input__label{color:var(--label-secondary,#626a90)}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.31",
+  "version": "0.78.33",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.10",
+    "@licklist/core": "0.36.11",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.10",
     "clsx": "2.1.1",
@@ -64,7 +64,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.10",
+    "@licklist/core": "0.36.11",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.10",
     "@mantine/core": "6.0.22",

package/src/Maintenance/Maintenance.scss

@@ -60,7 +60,7 @@
     }
 
     &__label-text {
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: var(--font-family-sans);
         font-weight: 500;
         font-size: 13px;
         line-height: 16px;
@@ -124,7 +124,7 @@
     gap: 8px;
     opacity: var(--opacity-80, 0.8);
     color: var(--labels-main-label-secondary, #626A90);
-    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-family: var(--font-family-sans);
     font-size: 11px;
     font-style: normal;
     font-weight: 500;
@@ -149,7 +149,7 @@
 .maintenance-page-title {
     align-self: stretch;
     color: var(--labels-main-label-primary, #121E52);
-    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-family: var(--font-family-sans);
     font-size: 32px;
     font-style: normal;
     font-weight: 700;
@@ -162,7 +162,7 @@
 
 .maintenance-page-subheading {
     color: var(--labels-main-label-primary, #121E52);
-    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-family: var(--font-family-sans);
     font-size: 20px;
     font-style: normal;
     font-weight: 600;
@@ -175,7 +175,7 @@
 
 .maintenance-page-body {
     color: var(--labels-main-label-primary, #121E52);
-    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-family: var(--font-family-sans);
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
@@ -200,7 +200,7 @@
     justify-content: center;
     align-items: center;
     gap: 8px;
-    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-family: var(--font-family-sans);
     font-size: 15px;
     font-style: normal;
     font-weight: 600;
@@ -222,7 +222,7 @@
     gap: 8px;
     border-color: none;
     color: var(--labels-main-label-white, #FFF);
-    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-family: var(--font-family-sans);
     font-size: 15px;
     font-style: normal;
     font-weight: 600;

package/src/Maintenance/MaintenancePage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "../v2/components/Button";
 
 interface MaintenancePageProps {
   svg: React.ReactNode;
@@ -32,12 +33,12 @@ export const MaintenancePage: React.FC<MaintenancePageProps> = ({
           <h6 className="maintenance-page-body">{body}</h6>
 
           {buttonLabel && (
-            <button
-              className="back-button"
+            <Button
+              variant="primary"
               onClick={onButtonClick}
             >
               {buttonLabel}
-            </button>
+            </Button>
           )}  
 
           <div className="maintenance-page-footer-logo">

package/src/PageNotFound/PageNotFound.tsx

@@ -29,7 +29,7 @@ export const PageNotFound: React.FC<PageNotFoundProps> = ({ app, buttonLabel, on
 */}
         <MaintenancePage
           svg={<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
-            <path d="M18 50H22V48H40V44H44V48H48V52H22V54H18V52H15.9863C14.8893 51.9997 14.0001 51.0894 14 50.0166V44H18V50ZM22 44H18V40H22V44ZM49.999 44H46V38H49.999V44ZM18 40H14V30H18V40ZM54 38H50V34H54V38ZM46 34H42V30H46V34ZM14 30H10V26H14V30ZM49.999 22V30H46V24H38V22H40V18H38V16H36V12H40L49.999 22ZM22 14H26V12H32V16H26V18H22V16H16V20H18V26H14V20H12V16H14V13.9834C14.0001 12.888 14.8951 12 15.9971 12H22V14ZM38 22H34V18H38V22Z" fill="#626A90" />
+            <path d="M18 50H22V48H40V44H44V48H48V52H22V54H18V52H15.9863C14.8893 51.9997 14.0001 51.0894 14 50.0166V44H18V50ZM22 44H18V40H22V44ZM49.999 44H46V38H49.999V44ZM18 40H14V30H18V40ZM54 38H50V34H54V38ZM46 34H42V30H46V34ZM14 30H10V26H14V30ZM49.999 22V30H46V24H38V22H40V18H38V16H36V12H40L49.999 22ZM22 14H26V12H32V16H26V18H22V16H16V20H18V26H14V20H12V16H14V13.9834C14.0001 12.888 14.8951 12 15.9971 12H22V14ZM38 22H34V18H38V22Z" fill="var(--fills-main-fill-secondary, #626A90)" />
           </svg>}
           title="Page not found."
           subheading="It looks like that page doesn’t exist."

package/src/v2/components/ActionMenu/ActionMenu.scss

@@ -0,0 +1,106 @@
+@import '../../styles/tokens/typography';
+@import '../../styles/tokens/colors';
+
+.action-menu {
+  position: relative;
+  display: inline-block;
+
+  &__trigger {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid var(--border-primary, #E8E9EF);
+    background: var(--surface-action-soft);
+    color: var(--actions-regular, #5D5BF4);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--surface-action-soft);
+    }
+
+    &--close {
+      border-radius: 50%;
+      background: #F4F4FE;
+      border: 1px solid #F4F4FE;
+
+      &:hover {
+        background: #E8E8FD;
+      }
+    }
+
+    svg {
+      width: 28px;
+      height: 28px;
+    }
+
+    .action-menu__circle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px;
+      height: 32px;
+      z-index: -1;
+    }
+  }
+
+  &__dropdown {
+    position: absolute;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    min-width: 180px;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 12px;
+    background: var(--surface-primary, #FFF);
+    box-shadow: 0 4px 20px 0 rgba(18, 30, 82, 0.15);
+    overflow: hidden;
+    border: 1px solid var(--border-primary, #E8E9EF);
+
+    &--bottom {
+      top: calc(100% + 4px);
+    }
+
+    &--top {
+      bottom: calc(100% + 4px);
+    }
+  }
+
+
+  &__item {
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border: none;
+    background: none;
+    cursor: pointer;
+    @include typography('text.small.emphasis');
+    text-align: left;
+    transition: background 0.2s ease;
+    white-space: nowrap;
+
+    &--default {
+      color: var(--label-primary, #121E52);
+
+      &:hover {
+        background: var(--surface-primary-hover, #F8F8FA);
+      }
+    }
+
+    &--danger {
+      color: var(--label-danger, #E0423A);
+
+      &:hover {
+        background: var(--surface-danger-soft, #FCECEB);
+      }
+    }
+  }
+}

package/src/v2/components/ActionMenu/ActionMenu.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
+import { CloseIcon, EllipsisIcon, CircleIcon } from '../../icons'
+import './ActionMenu.scss'
+
+export interface ActionMenuItem {
+  label: string
+  onClick: () => void
+  variant?: 'default' | 'danger'
+}
+
+export interface ActionMenuProps {
+  items: ActionMenuItem[]
+  className?: string
+  iconColour?: string
+}
+
+export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', iconColour = '' }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [placement, setPlacement] = useState<'top' | 'bottom'>('bottom')
+  const menuRef = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (isOpen && menuRef.current && dropdownRef.current) {
+      const menuRect = menuRef.current.getBoundingClientRect()
+      const dropdownRect = dropdownRef.current.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+
+      const spaceBelow = viewportHeight - menuRect.bottom
+      const spaceAbove = menuRect.top
+
+      if (spaceBelow < dropdownRect.height && spaceAbove > spaceBelow) {
+        setPlacement('top')
+      } else {
+        setPlacement('bottom')
+      }
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const parentRow = menuRef.current?.closest('tr')
+    const tableWrapper = menuRef.current?.closest('.new-table-wrapper')
+
+    if (isOpen) {
+      parentRow?.classList.add('action-menu-open')
+      tableWrapper?.classList.add('action-menu-open')
+    } else {
+      parentRow?.classList.remove('action-menu-open')
+      tableWrapper?.classList.remove('action-menu-open')
+    }
+
+    return () => {
+      parentRow?.classList.remove('action-menu-open')
+      tableWrapper?.classList.remove('action-menu-open')
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  return (
+    <div className={`action-menu ${className}`} ref={menuRef}>
+      <button
+        type="button"
+        className={`action-menu__trigger ${isOpen ? 'action-menu__trigger--close' : ''}`}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        style={{ color: iconColour }}
+      >
+        {isOpen ? (
+          <CloseIcon width={18} height={18} />
+        ) : (
+          <>
+            <CircleIcon width={32} height={32} className="action-menu__circle" fill="var(--surface-action-soft)" />
+            <EllipsisIcon width={18} height={18} fill="var(--fill-action)" />
+          </>
+        )}
+      </button>
+
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className={`action-menu__dropdown action-menu__dropdown--${placement}`}
+        >
+          {items.map((item, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`action-menu__item action-menu__item--${item.variant || 'default'}`}
+              onClick={() => {
+                item.onClick()
+                setIsOpen(false)
+              }}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/v2/components/ActionMenu/index.ts

@@ -0,0 +1 @@
+export * from './ActionMenu'

package/src/v2/components/Badge/Badge.scss

@@ -0,0 +1,82 @@
+.new-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 12px;
+  border-radius: 100px;
+
+  &--with-icon {
+    padding-left: 8px;
+  }
+  font-family: var(--font-family-mono, 'Geist Mono', monospace);
+  font-size: var(--text-small-size, 13px);
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  gap: 4px;
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &--success {
+    background-color: var(--surface-status-success, #EEF9EA);
+    color: var(--label-status-success, #3A8A1F);
+    border: 1px solid var(--border-status-success, #C9ECBD);
+  }
+
+  &--danger {
+    background-color: var(--surface-status-error, #FCECEB);
+    color: var(--label-status-error, #CC3C35);
+    border: 1px solid var(--border-status-error, #F5C4C2);
+  }
+
+  &--warning {
+    background-color: var(--surface-status-alert, #FCF6E7);
+    color: var(--label-status-alert, #FD7E14);
+    border: 1px solid var(--border-status-alert, #FED7B6);
+  }
+
+  &--info {
+    background-color: var(--surface-status-info, #E7F4FC);
+    color: var(--label-status-info, #0D7FCE);
+    border: 1px solid var(--border-status-info, #B4DBF6);
+  }
+
+  &--neutral {
+    background-color: var(--surface-secondary, #F8F8FA);
+    color: var(--label-secondary, #9399B3);
+    border: 1px solid var(--border-primary, #E8E9EF);
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .new-badge {
+    padding: 1px 10px;
+    font-size: 12px;
+
+    &--with-icon {
+      padding-left: 6px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .new-badge {
+    padding: 1px 8px;
+    font-size: 11px;
+
+    &--with-icon {
+      padding-left: 4px;
+    }
+  }
+}
+

package/src/v2/components/Badge/Badge.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import './Badge.scss'
+
+export interface BadgeProps {
+  children: React.ReactNode
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'neutral'
+  className?: string
+  icon?: React.ReactNode
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'neutral',
+  className = '',
+  icon,
+}) => (
+  <span
+    className={`new-badge new-badge--${variant} ${
+      icon ? 'new-badge--with-icon' : ''
+    } ${className}`}
+  >
+    {icon && <span className="new-badge__icon">{icon}</span>}
+    {children}
+  </span>
+)

package/src/v2/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge'

package/src/v2/components/Button/Button.tsx

@@ -2,14 +2,26 @@ import { ButtonHTMLAttributes } from 'react'
 import './Button.scss'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'primary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled'
+  variant?:
+    | 'primary'
+    | 'primary-soft'
+    | 'secondary-soft'
+    | 'tertiary-soft'
+    | 'primary-outline'
+    | 'secondary'
+    | 'destructive-soft'
+    | 'destructive-strong'
+    | 'info'
+    | 'disabled'
   size?: 'sm' | 'md' | 'lg'
+  isLoading?: boolean
 }
 
 export function Button({
   variant = 'primary',
-  size = 'md',
+  size: _size = 'md',
   disabled = false,
+  isLoading = false,
   className = '',
   children,
   ...props
@@ -17,7 +29,7 @@ export function Button({
   const classes = [
     'new-button',
     `new-button--${variant}`,
-    disabled ? 'new-button--disabled' : '',
+    disabled || isLoading ? 'new-button--disabled' : '',
     className
   ].filter(Boolean).join(' ')
 
@@ -27,10 +39,12 @@ export function Button({
 
   return (
     <button
+      type="button"
       className={classes}
-      disabled={disabled}
+      disabled={disabled || isLoading}
       {...props}
     >
+      {isLoading && <div className="new-button__spinner" />}
       {content}
     </button>
   )

package/src/v2/components/Button/GhostButton.scss

@@ -0,0 +1,63 @@
+.ghost-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+  background: transparent;
+  color: var(--labels-main-label-primary, #121E52);
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:not(.active):hover:not(:disabled) {
+    background-color: var(--surfaces-main-background-tertiary, #E8E9EF);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--fills-main-fill-action, #6200EE);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    background-color: var(--fill-primary, #6200EE);
+    border-color: var(--border-selected, #121E52);
+    color: var(--neutral-white, #FFFFFF);
+
+    .ghost-button__text {
+      color: var(--neutral-white, #FFFFFF);
+    }
+  }
+
+  &--sm {
+    height: 28px;
+    padding: 0 8px 0 8px;
+    font-size: 13px;
+  }
+
+  &--md {
+    height: 36px;
+    padding: 0 12px 0 8px;
+    font-size: 14px;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/src/v2/components/Button/GhostButton.tsx

@@ -0,0 +1,28 @@
+import { ButtonHTMLAttributes } from 'react'
+import './GhostButton.scss'
+
+export interface GhostButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  size?: 'sm' | 'md'
+}
+
+export function GhostButton({
+  icon,
+  size = 'md',
+  className = '',
+  children,
+  ...props
+}: GhostButtonProps) {
+  const classes = [
+    'ghost-button',
+    `ghost-button--${size}`,
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button className={classes} {...props}>
+      {icon && <span className="ghost-button__icon">{icon}</span>}
+      {children && <span className="ghost-button__text">{children}</span>}
+    </button>
+  )
+}

package/src/v2/components/Button/index.ts

@@ -1,3 +1,5 @@
 export { Button, ButtonText } from './Button'
 export type { ButtonProps, ButtonTextProps } from './Button'
+export { GhostButton } from './GhostButton'
+export type { GhostButtonProps } from './GhostButton'