@licklist/design 0.78.5-dev.58 → 0.78.5-dev.59

package/dist/v2/components/WYSIWYGEditor/Icons.js

@@ -150,14 +150,14 @@ var DividerIcon = function() {
                 cy: "12",
                 r: "0.75",
                 fill: "#626A90",
-                "fill-opacity": "0.5"
+                fillOpacity: "0.5"
             }),
             /*#__PURE__*/ jsx("circle", {
                 cx: "2.25",
                 cy: "12",
                 r: "0.75",
                 fill: "#626A90",
-                "fill-opacity": "0.5"
+                fillOpacity: "0.5"
             })
         ]
     });

package/dist/v2/components/index.d.ts

@@ -4,6 +4,8 @@ export { QuickFilter } from './QuickFilter';
 export type { QuickFilterProps, QuickFilterOption } from './QuickFilter';
 export { NewTable } from './NewTable';
 export type { NewTableProps, NewTableColumn } from './NewTable';
+export { TableSortIcon } from './TableSortIcon';
+export type { TableSortIconProps } from './TableSortIcon';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps, ActionMenuItem } from './ActionMenu';
 export { DeleteModal } from './Modal';
@@ -20,8 +22,8 @@ export { NewPageHeader } from './NewPageHeader';
 export type { NewPageHeaderProps } from './NewPageHeader';
 export { SectionHeader } from './SectionHeader';
 export type { SectionHeaderProps } from './SectionHeader';
-export { Button, ButtonText } from './Button';
-export type { ButtonProps, ButtonTextProps } from './Button';
+export { Button, ButtonText, GhostButton } from './Button';
+export type { ButtonProps, ButtonTextProps, GhostButtonProps } from './Button';
 export { Select } from './Select';
 export { Tooltip } from './Tooltip';
 export { UserAvatar } from './UserAvatar';
@@ -31,5 +33,5 @@ export { Alert } from './Alert';
 export { NPSScore } from './NPSScore';
 export { Pagination } from './Pagination';
 export type { PaginationProps } from './Pagination';
-export { InfoIcon, ArrowUpIcon, ArrowDownIcon, EditIcon, ArrowLeftIcon, ArrowRightIcon, SearchIcon, RefreshIcon, SendIcon, ExternalLinkIcon, ExportIcon, ClearIcon, CloseIcon } from '../icons';
+export { InfoIcon, ArrowUpIcon, ArrowDownIcon, EditIcon, ArrowLeftIcon, ArrowRightIcon, SearchIcon, RefreshIcon, SendIcon, ExternalLinkIcon, ExportIcon, ClearIcon, CloseIcon, EllipsisIcon, CircleIcon } from '../icons';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC7C,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAGnD,OAAO,EACL,QAAQ,EACR,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC1D,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE9E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAGnD,OAAO,EACL,QAAQ,EACR,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACX,MAAM,UAAU,CAAA"}

package/dist/v2/icons/index.d.ts

@@ -51,4 +51,14 @@ export declare const CloseIcon: ({ width, height, ...props }: React.SVGProps<SVG
     width?: number;
     height?: number;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const EllipsisIcon: ({ width, height, fill, ...props }?: React.SVGProps<SVGSVGElement> & {
+    width?: number;
+    height?: number;
+    fill?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleIcon: ({ width, height, fill, className, ...props }?: React.SVGProps<SVGSVGElement> & {
+    width?: number;
+    height?: number;
+    fill?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/icons/index.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+CAOzB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,SAAS,+CAKrB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,SAAS,+CAIrB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,YAAY,+CAIxB,CAAA;AAED,eAAO,MAAM,YAAY,+CAIxB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,YAAY,+CAIxB,CAAA;AAED,eAAO,MAAM,YAAY,+CAIxB,CAAA;AAED,eAAO,MAAM,gBAAgB,+CAI5B,CAAA;AAED,eAAO,MAAM,QAAQ,+CAMpB,CAAA;AAED,eAAO,MAAM,iBAAiB,+CAI7B,CAAA;AAED,eAAO,MAAM,UAAU,+CAItB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,oBAA6B,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,4CAIhI,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,oBAA6B,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,4CAI7H,CAAA;AAED,eAAO,MAAM,gBAAgB,+CAI5B,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,oBAA6B,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,4CAI/H,CAAA;AAED,eAAO,MAAM,SAAS,+CAKrB,CAAA;AAED,eAAO,MAAM,eAAe,+CAK3B,CAAA;AAED,eAAO,MAAM,gBAAgB,+CAK5B,CAAA;AAED,eAAO,MAAM,cAAc,GAAM,oBAA6B;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,4CAIrG,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,oBAA6B;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,4CAIlG,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,oBAA6B;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,4CAI7F,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,6BACvB,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAWrE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/icons/index.tsx"],"names":[],"mappings":"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"}

package/dist/v2/icons/index.js

@@ -403,5 +403,65 @@ var CloseIcon = function(_param) {
         ]
     }));
 };
+var EllipsisIcon = function() {
+    var _param = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _param_width = _param.width, width = _param_width === void 0 ? 32 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 32 : _param_height, _param_fill = _param.fill, fill = _param_fill === void 0 ? 'black' : _param_fill, props = _object_without_properties(_param, [
+        "width",
+        "height",
+        "fill"
+    ]);
+    return /*#__PURE__*/ jsxs("svg", _object_spread_props(_object_spread({
+        width: width,
+        height: height,
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: "8",
+                cy: "16",
+                r: "3",
+                fill: fill
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "16",
+                cy: "16",
+                r: "3",
+                fill: fill
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                cx: "24",
+                cy: "16",
+                r: "3",
+                fill: fill
+            })
+        ]
+    }));
+};
+var CircleIcon = function() {
+    var _param = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _param_width = _param.width, width = _param_width === void 0 ? 32 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 32 : _param_height, _param_fill = _param.fill, fill = _param_fill === void 0 ? 'var(--surface-action-soft)' : _param_fill, _param_className = _param.className, className = _param_className === void 0 ? '' : _param_className, props = _object_without_properties(_param, [
+        "width",
+        "height",
+        "fill",
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("svg", _object_spread_props(_object_spread({
+        width: width,
+        height: height,
+        viewBox: "0 0 32 32",
+        fill: "none",
+        className: className,
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+        children: /*#__PURE__*/ jsx("circle", {
+            cx: "16",
+            cy: "16",
+            r: "16",
+            fill: fill
+        })
+    }));
+};
 
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, ClearIcon, CloseIcon, CustomersIcon, EditIcon, ExportIcon, ExternalLinkIcon, InfoIcon, LoyaltyIcon, MarketingIcon, RefreshIcon, SearchIcon, SendIcon, SettingsIcon, WaiversIcon };
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CircleIcon, ClearIcon, CloseIcon, CustomersIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, InfoIcon, LoyaltyIcon, MarketingIcon, RefreshIcon, SearchIcon, SendIcon, SettingsIcon, WaiversIcon };

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

@@ -4,16 +4,16 @@ import { SidebarNavItem } from './SidebarNavItem.js';
 import './SidebarCustomisation.scss.js';
 import { CalendarIcon, BookingsIcon, BookingTypesIcon, LoyaltyIcon, CustomersIcon, MarketingIcon, WaiversIcon, SettingsIcon, EditIcon } from '../../../icons/index.js';
 import '../../../components/Badge/Badge.scss.js';
+import { Button } from '../../../components/Button/Button.js';
+import { GhostButton } from '../../../components/Button/GhostButton.js';
 import '../../../components/QuickFilter/QuickFilter.scss.js';
 import '../../../components/NewTable/NewTable.scss.js';
-import 'react-icons/fa';
 import '../../../components/ActionMenu/ActionMenu.scss.js';
 import '../../../components/Modal/DeleteModal.scss.js';
 import '../../../components/NewInput/NewInput.js';
 import '../../../components/FormField/FormField.js';
 import '../../../components/Checkbox/Checkbox.js';
 import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
-import { Button } from '../../../components/Button/Button.js';
 import '../../../components/NewPageHeader/NewPageHeader.scss.js';
 import '../../../components/SectionHeader/SectionHeader.scss.js';
 import '../../../components/Select/Select.scss.js';
@@ -24,7 +24,6 @@ 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 { GhostButton } from '../../../components/Button/GhostButton.js';
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;

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

@@ -1,16 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 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 'react-icons/fa';
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.58",
+  "version": "0.78.5-dev.59",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

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

@@ -7,8 +7,8 @@
 
   &__trigger {
     display: flex;
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
     padding: 8px;
     justify-content: center;
     align-items: center;
@@ -34,14 +34,23 @@
     }
 
     svg {
-      width: 16px;
-      height: 16px;
+      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;
-    bottom: calc(100% + 4px);
     right: 0;
     z-index: 1000;
     display: flex;
@@ -53,6 +62,14 @@
     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);
+    }
   }
 
 

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

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { FaEllipsisH } from 'react-icons/fa'
-import { CloseIcon } from '../../icons'
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
+import { CloseIcon, EllipsisIcon, CircleIcon } from '../../icons'
 import './ActionMenu.scss'
 
 export interface ActionMenuItem {
@@ -17,7 +16,44 @@ export interface ActionMenuProps {
 
 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) => {
@@ -38,19 +74,31 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
   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={16} height={16} /> : <FaEllipsisH />}
+        {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 className="action-menu__dropdown">
+        <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()

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

@@ -4,6 +4,11 @@
   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;
@@ -57,6 +62,10 @@
   .new-badge {
     padding: 1px 10px;
     font-size: 12px;
+
+    &--with-icon {
+      padding-left: 6px;
+    }
   }
 }
 
@@ -64,6 +73,10 @@
   .new-badge {
     padding: 1px 8px;
     font-size: 11px;
+
+    &--with-icon {
+      padding-left: 4px;
+    }
   }
 }
 

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

@@ -13,11 +13,13 @@ export const Badge: React.FC<BadgeProps> = ({
   variant = 'neutral',
   className = '',
   icon,
-}) => {
-  return (
-    <span className={`new-badge new-badge--${variant} ${className}`}>
-      {icon && <span className="new-badge__icon">{icon}</span>}
-      {children}
-    </span>
-  )
-}
+}) => (
+  <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/Button/Button.tsx

@@ -2,14 +2,24 @@ import { ButtonHTMLAttributes } from 'react'
 import './Button.scss'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-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 = '',
@@ -29,6 +39,7 @@ export function Button({
 
   return (
     <button
+      type="button"
       className={classes}
       disabled={disabled || isLoading}
       {...props}

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

@@ -13,7 +13,7 @@
   cursor: pointer;
   transition: background-color 0.2s ease;
 
-  &:hover:not(:disabled) {
+  &:not(.active):hover:not(:disabled) {
     background-color: var(--surfaces-main-background-tertiary, #E8E9EF);
   }
 
@@ -27,6 +27,16 @@
     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;

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'