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

package/dist/v2/components/NPSScore/NPSScore.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 = ".nps-score{box-sizing:border-box;margin-top:24px;padding:0 1rem;width:100%}.nps-score__container{background:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:16px;padding:24px}.nps-score__question{color:var(--label-primary);font-family:var(--font-family-sans);font-size:18px;font-weight:600;line-height:24px;margin:0 0 16px}.nps-score__labels{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.nps-score__label{align-items:center;display:flex;gap:8px}.nps-score__label span{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;font-weight:500}.nps-score__label--desktop{display:none}@media (min-width:768px){.nps-score__label--desktop{display:flex}}.nps-score__label--mobile{display:flex;justify-content:flex-end;margin-top:12px}@media (min-width:768px){.nps-score__label--mobile{display:none}}.nps-score__label-icon{color:var(--fill-secondary);flex-shrink:0}.nps-score__buttons{display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}@media (min-width:768px){.nps-score__buttons{grid-template-columns:repeat(10,1fr)}}.nps-score__button{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:12px;color:var(--label-primary);cursor:pointer;font-family:var(--font-family-sans);font-size:18px;font-weight:600;height:48px;transition:all .2s ease}.nps-score__button:hover:not(.nps-score__button--selected){background:var(--surface-primary-hover)}.nps-score__button--selected{background:var(--fill-primary);border-color:#0000;color:var(--label-primary-alt)}.nps-score__expanded{animation:nps-fade-in .2s ease;display:flex;flex-direction:column;gap:16px;margin-top:16px}.nps-score__field--roles{padding-top:16px}.nps-score__field-label{color:var(--label-primary);display:block;font-family:var(--font-family-sans);font-size:14px;font-weight:500;margin-bottom:8px}.nps-score__field-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.nps-score__optional{color:var(--label-secondary)}.nps-score__optional,.nps-score__textarea{font-family:var(--font-family-sans);font-size:14px}.nps-score__textarea{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:8px;box-sizing:border-box;color:var(--label-primary);min-height:100px;padding:12px;resize:vertical;width:100%}.nps-score__textarea::placeholder{color:var(--label-secondary)}.nps-score__textarea:focus{border-color:var(--fill-primary);outline:none}.nps-score__textarea--error{border-color:var(--fill-danger)}.nps-score__hint{color:var(--label-secondary)}.nps-score__error,.nps-score__hint{font-family:var(--font-family-sans);font-size:14px;margin:4px 0 0}.nps-score__error{color:var(--fill-danger)}.nps-score__add-comment{background:none;border:none;cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:500;padding:0;text-decoration:underline;transition:color .2s ease}.nps-score__add-comment,.nps-score__add-comment:hover{color:var(--label-action)}.nps-score__roles{display:grid;gap:8px;grid-template-columns:1fr}@media (min-width:640px){.nps-score__roles{gap:4px;grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.nps-score__roles{grid-template-columns:repeat(3,1fr)}}.nps-score__role{align-items:center;cursor:pointer;display:flex;gap:8px;position:relative}.nps-score__role-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surface-primary);border:2px solid var(--border-primary);border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:0;position:relative;transition:border-color .2s ease;width:20px}.nps-score__role-input:before{background:var(--fill-primary);border-radius:50%;content:\"\";height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:10px}.nps-score__role-input:checked{border-color:var(--fill-primary)}.nps-score__role-input:checked:before{transform:translate(-50%,-50%) scale(1)}.nps-score__role-input:focus{box-shadow:0 0 0 2px var(--border-action);outline:none}.nps-score__role-radio{display:none}.nps-score__role-label{color:var(--label-primary);font-family:var(--font-family-sans);font-size:14px}.nps-score__success{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:32px;text-align:center}.nps-score__success-icon{color:var(--fill-status-success);margin-bottom:16px}.nps-score__success-title{color:var(--label-primary);font-family:var(--font-family-sans);font-size:24px;font-weight:600;margin:0 0 8px}.nps-score__success-message{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;margin:0}@keyframes nps-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}";
+var css_248z = ".nps-score{box-sizing:border-box;margin-top:24px;padding:0 1rem;width:100%}@media (max-width:576px){.nps-score{padding:0 16px}}.nps-score__container{background:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:16px;padding:24px}.nps-score__question{color:var(--label-primary);font-family:var(--font-family-sans);font-size:18px;font-weight:600;line-height:24px;margin:0 0 16px}.nps-score__labels{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.nps-score__label{align-items:center;display:flex;gap:8px}.nps-score__label span{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;font-weight:500}.nps-score__label--desktop{display:none}@media (min-width:768px){.nps-score__label--desktop{display:flex}}.nps-score__label--mobile{display:flex;justify-content:flex-end;margin-top:12px}@media (min-width:768px){.nps-score__label--mobile{display:none}}.nps-score__label-icon{color:var(--fill-secondary);flex-shrink:0}.nps-score__buttons{display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}@media (min-width:768px){.nps-score__buttons{grid-template-columns:repeat(10,1fr)}}.nps-score__button{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:12px;color:var(--label-primary);cursor:pointer;font-family:var(--font-family-sans);font-size:18px;font-weight:600;height:48px;transition:all .2s ease}.nps-score__button:hover:not(.nps-score__button--selected){background:var(--surface-primary-hover)}.nps-score__button--selected{background:var(--fill-primary);border-color:#0000;color:var(--label-primary-alt)}.nps-score__expanded{animation:nps-fade-in .2s ease;display:flex;flex-direction:column;gap:16px;margin-top:16px}.nps-score__field--roles{padding-top:16px}.nps-score__field-label{color:var(--label-primary);display:block;font-family:var(--font-family-sans);font-size:14px;font-weight:500;margin-bottom:8px}.nps-score__field-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.nps-score__optional{color:var(--label-secondary)}.nps-score__optional,.nps-score__textarea{font-family:var(--font-family-sans);font-size:14px}.nps-score__textarea{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:8px;box-sizing:border-box;color:var(--label-primary);min-height:100px;padding:12px;resize:vertical;width:100%}.nps-score__textarea::placeholder{color:var(--label-secondary)}.nps-score__textarea:focus{border-color:var(--fill-primary);outline:none}.nps-score__textarea--error{border-color:var(--fill-danger)}.nps-score__hint{color:var(--label-secondary)}.nps-score__error,.nps-score__hint{font-family:var(--font-family-sans);font-size:14px;margin:4px 0 0}.nps-score__error{color:var(--fill-danger)}.nps-score__add-comment{background:none;border:none;cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:500;padding:0;text-decoration:underline;transition:color .2s ease}.nps-score__add-comment,.nps-score__add-comment:hover{color:var(--label-action)}.nps-score__roles{display:grid;gap:8px;grid-template-columns:1fr}@media (min-width:640px){.nps-score__roles{gap:4px;grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.nps-score__roles{grid-template-columns:repeat(3,1fr)}}.nps-score__role{align-items:center;cursor:pointer;display:flex;gap:8px;position:relative}.nps-score__role-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surface-primary);border:2px solid var(--border-primary);border-radius:50%;cursor:pointer;flex-shrink:0;height:20px;margin:0;position:relative;transition:border-color .2s ease;width:20px}.nps-score__role-input:before{background:var(--fill-primary);border-radius:50%;content:\"\";height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:10px}.nps-score__role-input:checked{border-color:var(--fill-primary)}.nps-score__role-input:checked:before{transform:translate(-50%,-50%) scale(1)}.nps-score__role-input:focus{box-shadow:0 0 0 2px var(--border-action);outline:none}.nps-score__role-radio{display:none}.nps-score__role-label{color:var(--label-primary);font-family:var(--font-family-sans);font-size:14px}.nps-score__success{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:32px;text-align:center}.nps-score__success-icon{color:var(--fill-status-success);margin-bottom:16px}.nps-score__success-title{color:var(--label-primary);font-family:var(--font-family-sans);font-size:24px;font-weight:600;margin:0 0 8px}.nps-score__success-message{color:var(--label-secondary);font-family:var(--font-family-sans);font-size:14px;margin:0}@keyframes nps-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -1 +1 @@
-{"version":3,"file":"NewInput.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/NewInput/NewInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,mBAAmB,EAAE,sBAAsB,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AAChG,OAAO,iCAAiC,CAAC;AAEzC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAA;AAED,KAAK,UAAU,GAAG,gBAAgB,GAAG;IACnC,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAEzC,KAAK,aAAa,GAAG,gBAAgB,GAAG;IACtC,EAAE,EAAE,UAAU,CAAC;CAChB,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,aAAa,CAAA;AAEtD,eAAO,MAAM,QAAQ,8GAgFpB,CAAC"}
+{"version":3,"file":"NewInput.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/NewInput/NewInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,mBAAmB,EAAE,sBAAsB,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AAChG,OAAO,iCAAiC,CAAC;AAEzC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAA;AAED,KAAK,UAAU,GAAG,gBAAgB,GAAG;IACnC,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAEzC,KAAK,aAAa,GAAG,gBAAgB,GAAG;IACtC,EAAE,EAAE,UAAU,CAAC;CAChB,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,aAAa,CAAA;AAEtD,eAAO,MAAM,QAAQ,8GA4FpB,CAAC"}

package/dist/v2/components/NewInput/NewInput.js

@@ -106,7 +106,15 @@ var NewInput = /*#__PURE__*/ forwardRef(function(_param, ref) {
                     }, props)),
                     /*#__PURE__*/ jsx("div", {
                         className: "icon",
+                        role: "button",
+                        tabIndex: 0,
                         onClick: handleIconClick,
+                        onKeyDown: function(e) {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                handleIconClick();
+                            }
+                        },
                         style: {
                             cursor: onIconClick || props.type === 'date' ? 'pointer' : 'default'
                         },

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

@@ -7,6 +7,7 @@ export interface NewPageHeaderProps {
     renderRight?: () => React.ReactNode;
     className?: string;
     showDivider?: boolean;
+    dividerClassName?: string;
 }
-export declare const NewPageHeader: ({ title, cancelLabel, onCancel, renderRight, className, showDivider }: NewPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewPageHeader: ({ title, cancelLabel, onCancel, renderRight, className, showDivider, dividerClassName }: NewPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NewPageHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewPageHeader.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/NewPageHeader/NewPageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,GAAI,uEAO3B,kBAAkB,4CAqBpB,CAAC"}
+{"version":3,"file":"NewPageHeader.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/NewPageHeader/NewPageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,GAAI,yFAQ3B,kBAAkB,4CAmBpB,CAAC"}

package/dist/v2/components/NewPageHeader/NewPageHeader.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { Button, ButtonText } from '../Button/Button.js';
+import '../Button/GhostButton.scss.js';
 import './NewPageHeader.scss.js';
 
 var NewPageHeader = function(param) {
-    var title = param.title, _param_cancelLabel = param.cancelLabel, cancelLabel = _param_cancelLabel === void 0 ? 'Cancel' : _param_cancelLabel, onCancel = param.onCancel, renderRight = param.renderRight, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_showDivider = param.showDivider, showDivider = _param_showDivider === void 0 ? true : _param_showDivider;
+    var title = param.title, _param_cancelLabel = param.cancelLabel, cancelLabel = _param_cancelLabel === void 0 ? 'Cancel' : _param_cancelLabel, onCancel = param.onCancel, renderRight = param.renderRight, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_showDivider = param.showDivider, showDivider = _param_showDivider === void 0 ? true : _param_showDivider, _param_dividerClassName = param.dividerClassName, dividerClassName = _param_dividerClassName === void 0 ? '' : _param_dividerClassName;
     return /*#__PURE__*/ jsxs("div", {
         className: "new-page-header-container ".concat(className),
         children: [
@@ -33,7 +34,7 @@ var NewPageHeader = function(param) {
                 ]
             }),
             showDivider && /*#__PURE__*/ jsx("hr", {
-                className: "new-page-header__divider"
+                className: "new-page-header__divider ".concat(dividerClassName)
             })
         ]
     });

package/dist/v2/components/NewPageHeader/NewPageHeader.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 = ".new-page-header-container{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:14px;padding:32px 32px 0}@media (max-width:768px){.new-page-header-container{gap:10px;padding:16px 16px 0}}.new-page-header{align-items:center;align-self:stretch;display:flex;gap:16px;justify-content:space-between;width:100%}@media (max-width:768px){.new-page-header{gap:8px;padding-top:16px}}.new-page-header__title{color:var(--label-primary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:24px;font-style:normal;font-weight:600;line-height:28px;margin:0;padding:0}.new-page-header__actions{align-items:center;display:flex;flex-shrink:0;gap:16px}.new-page-header__divider{background-color:var(--border-primary,#e8e9ef);border:none;height:1px;margin:0;width:100%}";
+var css_248z = ".new-page-header-container{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:0;padding:32px 32px 0}@media (max-width:768px){.new-page-header-container{gap:0;padding:16px 16px 0}}@media (max-width:480px){.new-page-header-container{padding:16px 12px 0}}.new-page-header{align-items:center;align-self:stretch;display:flex;gap:16px;justify-content:space-between;width:100%}@media (max-width:768px){.new-page-header{gap:8px;padding-top:16px}}.new-page-header__title{color:var(--label-primary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:24px;font-style:normal;font-weight:600;line-height:28px;margin:0;padding:0}.new-page-header__actions{align-items:center;display:flex;flex-shrink:0;gap:16px}.new-page-header__divider{background-color:var(--border-primary,#e8e9ef);border:none;height:1px;width:100%}";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -1 +1 @@
-{"version":3,"file":"NewTable.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/NewTable/NewTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;IAC5C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,EAC3D,OAAO,EACP,IAAI,EACJ,SAAc,EACd,YAAiB,EACjB,UAAU,EACV,UAAU,GACX,EAAE,aAAa,CAAC,CAAC,CAAC,2CA+DlB"}
+{"version":3,"file":"NewTable.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/NewTable/NewTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;IAC5C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,EAC3D,OAAO,EACP,IAAI,EACJ,SAAc,EACd,YAAiB,EACjB,UAAU,EACV,UAAU,GACX,EAAE,aAAa,CAAC,CAAC,CAAC,2CAgElB"}

package/dist/v2/components/NewTable/NewTable.js

@@ -36,6 +36,7 @@ function NewTable(param) {
                                 var content = typeof column.accessor === 'function' ? column.accessor(row) : row[column.accessor];
                                 return /*#__PURE__*/ jsx("td", {
                                     className: "new-table__cell ".concat(column.className || ''),
+                                    role: "presentation",
                                     onClick: function(e) {
                                         if (column.disableRowClick) {
                                             e.stopPropagation();

package/dist/v2/components/NewTable/NewTable.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 = ".new-table-wrapper{overflow-x:auto;width:100%}.new-table{border-collapse:collapse;text-align:left;width:100%}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:16px 24px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);transition:background-color .2s ease}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);padding:16px 24px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:12px 16px}.new-table__cell{font-size:13px;padding:12px 16px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
+var css_248z = ".new-table-wrapper{overflow-x:auto;overflow-y:visible;width:100%}.new-table-wrapper.action-menu-open{overflow:visible!important}.new-table{border-collapse:collapse;text-align:left;width:100%}.new-table__head{background-color:var(--surface-secondary,#f8f8fa)}.new-table__header-cell{border-bottom:1px solid var(--border-primary,#e8e9ef);color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;padding:16px 24px;white-space:nowrap}.new-table__body{background-color:var(--neutral-white,#fff)}.new-table__row{border-bottom:1px solid var(--border-primary,#e8e9ef);overflow:visible;transition:background-color .2s ease}.new-table__row.action-menu-open{overflow:visible!important;position:relative;z-index:20}.new-table__row.action-menu-open .new-table__cell{overflow:visible!important}.new-table__row:last-child{border-bottom:none}.new-table__row--clickable{cursor:pointer}.new-table__row--clickable:hover{background-color:var(--surface-primary-hover,#f8f8fa)}.new-table__cell{color:var(--label-primary,#121e52);font-size:var(--text-base-size,14px);overflow:visible;padding:16px 24px;vertical-align:middle}.new-table__no-data-cell{color:#9399b3;font-size:16px;font-weight:500;padding:64px 24px;text-align:center}@media (max-width:768px){.new-table-wrapper{-webkit-overflow-scrolling:touch}.new-table{min-width:600px}.new-table__header-cell{font-size:12px;padding:12px 16px}.new-table__cell{font-size:13px;padding:12px 16px}.new-table__no-data-cell{font-size:14px;padding:48px 16px}}@media (max-width:480px){.new-table{min-width:500px}.new-table__cell,.new-table__header-cell{padding:10px 12px}.new-table__header-cell{font-size:11px}.new-table__cell{font-size:12px}.new-table__no-data-cell{font-size:13px;padding:32px 12px}}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/components/Pagination/Pagination.js

@@ -45,10 +45,7 @@ var Pagination = function(param) {
                         "aria-label": t('App:next', {
                             defaultValue: 'Next'
                         }),
-                        children: /*#__PURE__*/ jsx(ArrowRightIcon, {
-                            width: 32,
-                            height: 32
-                        })
+                        children: /*#__PURE__*/ jsx(ArrowRightIcon, {})
                     })
                 ]
             }),

package/dist/v2/components/Pagination/Pagination.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 = ".v2-pagination{align-items:center;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;gap:16px}.v2-pagination__controls{display:flex;gap:8px}.v2-pagination__button{align-items:center;background-color:#efeffe;border:none;border-radius:50%;color:#6200ee;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:background-color .2s ease,color .2s ease;width:40px}.v2-pagination__button:hover:not(:disabled){background-color:#cdccfc}.v2-pagination__button:active:not(:disabled){background-color:#b4b4fa}.v2-pagination__button:focus-visible{outline:2px solid #6200ee;outline-offset:2px}.v2-pagination__button:disabled{background-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}.v2-pagination__button svg{flex-shrink:0;height:20px;width:20px}.v2-pagination__info{display:flex;flex-direction:column;gap:2px}.v2-pagination__page-number{color:#14215a;font-size:14px;font-weight:600}.v2-pagination__showing{color:#626a90;font-size:12px;font-weight:500}@media (max-width:768px){.v2-pagination{gap:12px}.v2-pagination__controls{gap:6px}.v2-pagination__button{height:36px;width:36px}.v2-pagination__button svg{height:18px;width:18px}.v2-pagination__info{gap:2px}.v2-pagination__page-number{font-size:13px}.v2-pagination__showing{font-size:11px}}@media (max-width:480px){.v2-pagination{align-items:flex-start;flex-direction:column;gap:10px}.v2-pagination__controls{justify-content:center;order:2;width:100%}.v2-pagination__button{height:32px;width:32px}.v2-pagination__button svg{height:16px;width:16px}.v2-pagination__info{align-items:center;order:1;text-align:center;width:100%}.v2-pagination__page-number{font-size:12px}.v2-pagination__showing{font-size:10px}}";
+var css_248z = ".v2-pagination{align-items:center;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;gap:16px}.v2-pagination__controls{display:flex;gap:8px}.v2-pagination__button{align-items:center;background-color:#efeffe;border:none;border-radius:50%;color:#6200ee;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;transition:background-color .2s ease,color .2s ease;width:44px}.v2-pagination__button:hover:not(:disabled){background-color:#cdccfc}.v2-pagination__button:active:not(:disabled){background-color:#b4b4fa}.v2-pagination__button:focus-visible{outline:2px solid #6200ee;outline-offset:2px}.v2-pagination__button:disabled{background-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}.v2-pagination__button svg{flex-shrink:0;height:24px;width:24px}.v2-pagination__info{display:flex;flex-direction:column;gap:2px}.v2-pagination__page-number{color:#14215a;font-size:15px;font-weight:600}.v2-pagination__showing{color:#626a90;font-size:13px;font-weight:500}@media (max-width:768px){.v2-pagination{gap:12px}.v2-pagination__controls{gap:6px}.v2-pagination__button{height:40px;width:40px}.v2-pagination__button svg{height:20px;width:20px}.v2-pagination__info{gap:2px}.v2-pagination__page-number{font-size:14px}.v2-pagination__showing{font-size:12px}}@media (max-width:480px){.v2-pagination{align-items:flex-start;flex-direction:column;gap:10px}.v2-pagination__controls{justify-content:center;order:2;width:100%}.v2-pagination__button{height:36px;width:36px}.v2-pagination__button svg{height:18px;width:18px}.v2-pagination__info{align-items:center;order:1;text-align:center;width:100%}.v2-pagination__page-number{font-size:13px}.v2-pagination__showing{font-size:11px}}";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/QuickFilter/QuickFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAE3B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiClD,CAAA"}
+{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/QuickFilter/QuickFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,oBAAoB,CAAA;AAE3B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkClD,CAAA"}

package/dist/v2/components/QuickFilter/QuickFilter.js

@@ -1,5 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
+import '../Button/Button.scss.js';
+import { GhostButton } from '../Button/GhostButton.js';
 import './QuickFilter.scss.js';
 
 function _array_like_to_array(arr, len) {
@@ -50,9 +52,10 @@ var QuickFilter = function(param) {
             /*#__PURE__*/ jsx("div", {
                 className: "quick-filter__options",
                 children: options.map(function(option) {
-                    return /*#__PURE__*/ jsx("button", {
+                    return /*#__PURE__*/ jsx(GhostButton, {
                         type: "button",
-                        className: "quick-filter__option ".concat((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value)) ? 'quick-filter__option--active' : ''),
+                        size: "sm",
+                        className: (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value)) ? 'active' : '',
                         onClick: function() {
                             return toggleOption(option.value);
                         },

package/dist/v2/components/QuickFilter/QuickFilter.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 = ".quick-filter{align-items:center;display:flex;gap:12px}.quick-filter__label{color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;white-space:nowrap}.quick-filter__options{display:flex;flex-wrap:wrap;gap:8px}.quick-filter__option{background-color:var(--neutral-white,#fff);border:1px solid var(--border-primary,#e8e9ef);border-radius:100px;color:var(--label-primary,#121e52);cursor:pointer;font-size:var(--text-small-size,13px);font-weight:500;padding:4px 16px;transition:all .2s ease}.quick-filter__option:hover:not(.quick-filter__option--active){background-color:var(--surface-primary-hover,#f8f8fa)}.quick-filter__option--active{background-color:var(--fill-primary);border-color:var(--border-selected,#121e52);color:var(--neutral-white,#fff);font-weight:600}@media (max-width:768px){.quick-filter{align-items:flex-start;flex-direction:column;gap:8px}.quick-filter__label{font-size:12px}.quick-filter__options{gap:6px;width:100%}.quick-filter__option{font-size:12px;padding:3px 12px}}@media (max-width:480px){.quick-filter{gap:6px}.quick-filter__label{font-size:11px}.quick-filter__options{gap:4px}.quick-filter__option{font-size:11px;padding:2px 10px}}";
+var css_248z = ".quick-filter{align-items:center;display:flex;gap:12px}.quick-filter__label{color:var(--label-secondary,#9399b3);font-size:var(--text-small-size,13px);font-weight:500;white-space:nowrap}.quick-filter__options{display:flex;flex-wrap:wrap;gap:8px}.quick-filter__options .ghost-button{border-radius:100px}@media (max-width:768px){.quick-filter{align-items:flex-start;display:flex;flex-direction:row;gap:12px;width:100%}.quick-filter__label{font-size:12px}.quick-filter__options{display:flex;flex:1;flex-wrap:wrap;gap:6px;margin:0;min-width:0;padding:0}.quick-filter__options .ghost-button{border-radius:100px;flex-shrink:0}}@media (max-width:480px){.quick-filter{gap:8px}.quick-filter__label{font-size:11px}.quick-filter__options{gap:4px}}";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAC"}
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAItD,CAAC"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface TableSortIconProps {
+    active?: boolean;
+    direction: SortDirection;
+    className?: string;
+}
+export declare const TableSortIcon: React.FC<TableSortIconProps>;
+//# sourceMappingURL=TableSortIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSortIcon.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/TableSortIcon/TableSortIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;AAEjD,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,aAAa,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAQtD,CAAA"}

package/dist/v2/components/TableSortIcon/TableSortIcon.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { ArrowUpIcon, ArrowDownIcon } from '../../icons/index.js';
+
+var TableSortIcon = function(param) {
+    var _param_active = param.active, active = _param_active === void 0 ? false : _param_active, direction = param.direction, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    if (!active || !direction) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: direction === 'asc' ? /*#__PURE__*/ jsx(ArrowUpIcon, {}) : /*#__PURE__*/ jsx(ArrowDownIcon, {})
+    });
+};
+
+export { TableSortIcon };

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

@@ -0,0 +1,2 @@
+export * from './TableSortIcon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/TableSortIcon/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

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":"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;AAED,eAAO,MAAM,YAAY,GAAI,oCAAuD,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAO,4CAM1K,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,+CAA4F,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAO,4CAI7M,CAAA"}

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.57",
+  "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()