@licklist/design 0.78.7-stage.78 → 0.78.7-stage.79

package/dist/index.js

@@ -218,7 +218,7 @@ export { FlowsIcon, HomeIcon, InventoryIcon, ProviderSidebar } from './v2/naviga
 export { AdminSidebar } from './v2/navigation/DashboardLayout/AdminSidebar.js';
 export { TopNavigation } from './v2/navigation/DashboardLayout/TopNavigation.js';
 export { DashboardFooter } from './v2/navigation/DashboardLayout/DashboardFooter.js';
-export { AdminIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CircleIcon, ClearIcon, ClockIcon, CloseIcon, CompanyIcon, DashboardIcon, DeleteIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, GripVerticalIcon, InfoIcon, LocationIcon, NoEntryIcon, PadlockIcon, PaymentsIcon, PlusIcon, ProfileIcon, RefreshIcon, SearchIcon, SecurityIcon, SendIcon, SettingsPageDashboardIcon, SettingsPageWaiversIcon, TableHeaderArrowDownIcon, TableHeaderArrowUpIcon, UploadIcon, VenueIcon } from './v2/icons/index.js';
+export { AdminIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CircleIcon, ClearIcon, ClockIcon, CloseIcon, CompanyIcon, DashboardIcon, DeleteIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, GripVerticalIcon, InfoIcon, LocationIcon, NoEntryIcon, PadlockIcon, PaymentsIcon, PlusIcon, ProfileIcon, RefreshIcon, ReorderIcon, SearchIcon, SecurityIcon, SendIcon, SettingsPageDashboardIcon, SettingsPageWaiversIcon, TableHeaderArrowDownIcon, TableHeaderArrowUpIcon, UploadIcon, VenueIcon } from './v2/icons/index.js';
 export { SettingsPage } from './v2/pages/Settings/SettingsPage.js';
 export { SettingsTabs } from './v2/pages/Settings/SettingsTabs.js';
 export { SidebarCustomisation, defaultSidebarItems } from './v2/pages/Settings/components/SidebarCustomisation.js';

package/dist/v2/components/InputCheckbox/InputCheckbox.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 = ".input-checkbox{align-items:center;cursor:pointer;display:flex;gap:6px;-webkit-user-select:none;user-select:none}.input-checkbox__input{height:0;opacity:0;position:absolute;width:0}.input-checkbox__box{background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e2e2e2);border-radius:3px;height:16px;min-width:16px;position:relative;transition:all .15s ease;width:16px}.input-checkbox__box:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:9px;left:4.5px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);width:5px}.input-checkbox__input:checked+.input-checkbox__box{background:var(--fill-selected,#14215a);border-color:var(--fill-selected,#14215a)}.input-checkbox__input:checked+.input-checkbox__box:after{opacity:1}.input-checkbox__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px}";
+var css_248z = ".input-checkbox{align-items:center;cursor:pointer;display:flex;gap:6px;-webkit-user-select:none;user-select:none}.input-checkbox__input{height:0;opacity:0;position:absolute;width:0}.input-checkbox__box{background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e8e9ef);border-radius:3px;height:16px;min-width:16px;position:relative;transition:all .15s ease;width:16px}.input-checkbox__box:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:9px;left:4.5px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);width:5px}.input-checkbox__input:checked+.input-checkbox__box{background:var(--fill-selected,#14215a);border-color:var(--fill-selected,#14215a)}.input-checkbox__input:checked+.input-checkbox__box:after{opacity:1}.input-checkbox__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/components/ZoneCard/ZoneCard.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 = ".zone-card{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:8px;overflow:visible}.zone-card__header{align-items:center;background:var(--surface-secondary);display:flex;gap:16px;padding:12px 16px}.zone-card__drag-handle{align-items:center;border-radius:6px;color:var(--label-tertiary,var(--label-secondary));cursor:grab;display:flex;flex-shrink:0;padding:6px;transition:all .2s ease}.zone-card__drag-handle:hover{background:var(--surface-primary);color:var(--label-secondary)}.zone-card__drag-handle:active{cursor:grabbing}.zone-card__drag-handle--resource{color:var(--label-tertiary,var(--label-secondary))}.zone-card__reorder-arrows{display:flex;flex-direction:column;flex-shrink:0;gap:2px}.zone-card__reorder-arrows--resource{margin-right:0}.zone-card__arrow-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--label-tertiary,var(--label-secondary));cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all .2s ease;width:28px}.zone-card__arrow-btn:hover:not(:disabled){background:var(--surface-primary);color:var(--label-secondary)}.zone-card__arrow-btn:disabled{opacity:.25;pointer-events:none}.zone-card__name{color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;line-height:20px;min-width:0}.zone-card__header-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.zone-card__header-info .zone-card__total{min-width:auto;text-align:left}.zone-card__header-right{align-items:center;display:flex;flex-shrink:0;gap:16px}.zone-card__total{color:var(--label-secondary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;font-weight:400;line-height:16px;min-width:72px;text-align:right;white-space:nowrap}.zone-card__resource{align-items:center;border-top:1px solid var(--border-primary);display:flex;gap:16px;padding:10px 16px 10px 32px;transition:background .2s ease}.zone-card__resource--clickable{cursor:pointer}.zone-card__resource--clickable:hover{background:var(--surface-secondary)}.zone-card__resource--mobile{padding-left:16px}.zone-card__resource-name{color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:400;line-height:20px;min-width:0}.zone-card__resource-stats{align-items:center;display:flex;flex-shrink:0;gap:32px}.zone-card__resource-stat{color:var(--label-secondary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;font-weight:400;line-height:16px;min-width:72px;white-space:nowrap}.zone-card__resource-stat--total{min-width:72px;text-align:right}.zone-card__resource-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.zone-card__resource-stats-mobile{color:var(--label-secondary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:12px;font-weight:400;line-height:16px;white-space:nowrap}.zone-card__resource-actions{display:flex;flex-shrink:0;justify-content:flex-end;width:32px}.zone-card__add-resource-wrapper{border-top:1px solid var(--border-primary);padding:12px 16px}@media (max-width:768px){.zone-card__header{padding:10px 12px}.zone-card__resource{gap:12px;padding:10px 12px}.zone-card__resource-stats{gap:16px}.zone-card__resource-stat{min-width:auto}.zone-card__add-resource-wrapper{padding:10px 12px}}";
+var css_248z = ".zone-card{background:var(--surface-primary);border:1px solid var(--border-primary);border-radius:8px;overflow:visible}.zone-card__header{align-items:center;background:var(--surface-secondary);display:flex;gap:16px;padding:12px 16px}.zone-card__drag-handle{align-items:center;border-radius:6px;color:var(--label-tertiary,var(--label-secondary));cursor:grab;display:flex;flex-shrink:0;padding:6px;transition:all .2s ease}.zone-card__drag-handle:hover{background:var(--surface-primary);color:var(--label-secondary)}.zone-card__drag-handle:active{cursor:grabbing}.zone-card__drag-handle--resource{color:var(--label-tertiary,var(--label-secondary))}.zone-card__reorder-arrows{display:flex;flex-direction:column;flex-shrink:0;gap:2px}.zone-card__reorder-arrows--resource{margin-right:0}.zone-card__arrow-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--label-tertiary,var(--label-secondary));cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all .2s ease;width:28px}.zone-card__arrow-btn:hover:not(:disabled){background:var(--surface-primary);color:var(--label-secondary)}.zone-card__arrow-btn:disabled{opacity:.25;pointer-events:none}.zone-card__name{color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;line-height:20px;min-width:0}.zone-card__header-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.zone-card__header-info .zone-card__total{min-width:auto;text-align:left}.zone-card__header-right{align-items:center;display:flex;flex-shrink:0;gap:16px}.zone-card__total{color:var(--label-secondary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;font-weight:400;line-height:16px;min-width:72px;text-align:right;white-space:nowrap}.zone-card__resource{align-items:center;border-top:1px solid var(--border-primary);display:flex;gap:16px;padding:10px 16px 10px 32px;transition:background .2s ease}.zone-card__resource--clickable{cursor:pointer}.zone-card__resource--clickable:hover{background:var(--surface-secondary)}.zone-card__resource--mobile{padding-left:16px}.zone-card__resource-name{color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:400;line-height:20px;min-width:0}.zone-card__resource-stats{align-items:center;display:flex;flex-shrink:0;gap:32px}.zone-card__resource-stat{color:var(--label-secondary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;font-weight:400;line-height:16px;min-width:72px;white-space:nowrap}.zone-card__resource-stat--total{min-width:72px;text-align:right}.zone-card__resource-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.zone-card__resource-stats-mobile{color:var(--label-secondary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:12px;font-weight:400;line-height:16px;white-space:nowrap}.zone-card__resource-actions{display:flex;flex-shrink:0;justify-content:flex-end;width:32px}.zone-card__add-resource-wrapper{border-top:1px solid var(--border-primary);padding:12px 16px}.zone-card__subtitle{color:var(--label-secondary);display:block;font-family:var(--font-family-sans,\"Geist\",system-ui,sans-serif);font-size:13px;font-weight:400;line-height:16px;margin-top:2px}.reorder-screen{color:var(--label-primary)}.reorder-screen__header{border-bottom:1px solid var(--border-primary);height:72px;justify-content:space-between;padding:24px 0 8px 8px}.reorder-screen__content,.reorder-screen__header{align-items:center;align-self:stretch;display:flex}.reorder-screen__content{flex-direction:column;padding-bottom:48px;padding-top:24px}.reorder-screen__body{display:flex;flex-direction:column;gap:24px;max-width:672px;width:100%}.reorder-screen__intro{display:flex;flex-direction:column;gap:4px}.reorder-screen__intro p{color:var(--label-secondary)}.reorder-screen__list{display:flex;flex-direction:column;gap:12px}.reorder-screen__actions{display:flex;gap:12px;padding-top:16px}@media (max-width:640px){.reorder-screen__header{height:auto;padding:16px 0 8px}.reorder-screen__content{padding-top:32px}}@media (max-width:768px){.zone-card__header{padding:10px 12px}.zone-card__resource{gap:12px;padding:10px 12px}.zone-card__resource-stats{gap:16px}.zone-card__resource-stat{min-width:auto}.zone-card__add-resource-wrapper{padding:10px 12px}}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/icons/index.js

@@ -517,6 +517,52 @@ var GripVerticalIcon = function() {
         })
     });
 };
+var ReorderIcon = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_width = _ref.width, width = _ref_width === void 0 ? 16 : _ref_width, _ref_height = _ref.height, height = _ref_height === void 0 ? 16 : _ref_height;
+    return /*#__PURE__*/ jsxs("svg", {
+        width: width,
+        height: height,
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("rect", {
+                x: "7",
+                y: "11",
+                width: "18",
+                height: "2",
+                rx: "1",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "7",
+                y: "15",
+                width: "18",
+                height: "2",
+                rx: "1",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("rect", {
+                x: "7",
+                y: "19",
+                width: "18",
+                height: "2",
+                rx: "1",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M19.9325 8H12.0675C11.6436 8 11.412 7.50557 11.6834 7.17991L15.6159 2.46093C15.8158 2.22106 16.1842 2.22106 16.3841 2.46093L20.3166 7.17991C20.588 7.50557 20.3564 8 19.9325 8Z",
+                fill: "currentColor",
+                fillOpacity: "0.5"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M12.0675 24L19.9325 24C20.3564 24 20.588 24.4944 20.3166 24.8201L16.3841 29.5391C16.1842 29.7789 15.8158 29.7789 15.6159 29.5391L11.6834 24.8201C11.412 24.4944 11.6436 24 12.0675 24Z",
+                fill: "currentColor",
+                fillOpacity: "0.5"
+            })
+        ]
+    });
+};
 var PlusIcon = function() {
     var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_width = _ref.width, width = _ref_width === void 0 ? 16 : _ref_width, _ref_height = _ref.height, height = _ref_height === void 0 ? 16 : _ref_height;
     return /*#__PURE__*/ jsx("svg", {
@@ -768,4 +814,4 @@ var SettingsPageWaiversIcon = function() {
     }));
 };
 
-export { AdminIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CircleIcon, ClearIcon, ClockIcon, CloseIcon, CompanyIcon, CustomersIcon, DashboardIcon, DeleteIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, GripVerticalIcon, InfoIcon, LocationIcon, LoyaltyIcon, MarketingIcon, NoEntryIcon, PadlockIcon, PaymentsIcon, PlusIcon, ProfileIcon, RefreshIcon, SearchIcon, SecurityIcon, SendIcon, SettingsIcon, SettingsPageDashboardIcon, SettingsPageWaiversIcon, TableHeaderArrowDownIcon, TableHeaderArrowUpIcon, UploadIcon, VenueIcon, WaiversIcon };
+export { AdminIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CircleIcon, ClearIcon, ClockIcon, CloseIcon, CompanyIcon, CustomersIcon, DashboardIcon, DeleteIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, GripVerticalIcon, InfoIcon, LocationIcon, LoyaltyIcon, MarketingIcon, NoEntryIcon, PadlockIcon, PaymentsIcon, PlusIcon, ProfileIcon, RefreshIcon, ReorderIcon, SearchIcon, SecurityIcon, SendIcon, SettingsIcon, SettingsPageDashboardIcon, SettingsPageWaiversIcon, TableHeaderArrowDownIcon, TableHeaderArrowUpIcon, UploadIcon, VenueIcon, WaiversIcon };

package/dist/v2/pages/SettingsSubPage/SettingsSubPage.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 = ".settings-sub-page{align-self:stretch;display:flex;flex-direction:column}.settings-sub-page__back{align-self:flex-start;padding:24px 32px 0}.settings-sub-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.settings-sub-page__back{padding:16px 16px 0}}.settings-sub-page__content{padding:24px 32px}@media (max-width:768px){.settings-sub-page__content{padding:0}}.settings-sub-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
+var css_248z = ".settings-sub-page{align-self:stretch;display:flex;flex-direction:column}.settings-sub-page__back{align-self:flex-start;padding:24px 32px 0 0}.settings-sub-page__back .ghost-button{border-color:var(--borders-main-border-primary,#e8e9ef);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button:not(.active):hover:not(:disabled){background-color:var(--surface-action-soft,#f4f4fe);color:var(--fill-action,#5d5bf4)}.settings-sub-page__back .ghost-button .ghost-button__icon svg{height:24px;width:24px}@media (max-width:768px){.settings-sub-page__back{padding:16px 16px 0 0}}.settings-sub-page__content{padding:24px 0}@media (max-width:768px){.settings-sub-page__content{padding:0}}.settings-sub-page__action{display:flex;justify-content:flex-end;margin-bottom:16px}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.7-stage.78",
+  "version": "0.78.7-stage.79",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.3-stage.23",
+    "@licklist/core": "0.36.3-stage.26",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-stage.28",
     "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.3-stage.23",
+    "@licklist/core": "0.36.3-stage.26",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-stage.28",
     "@mantine/core": "6.0.22",

package/src/v2/components/InputCheckbox/InputCheckbox.scss

@@ -16,7 +16,7 @@
     width: 16px;
     height: 16px;
     min-width: 16px;
-    border: 1px solid var(--border-primary, #e2e2e2);
+    border: 1px solid var(--border-primary, #e8e9ef);
     border-radius: 3px;
     background: var(--surface-primary, #fff);
     transition: all 0.15s ease;
@@ -37,8 +37,8 @@
   }
 
   &__input:checked + &__box {
-    background: var(--fill-selected, #14215a);
-    border-color: var(--fill-selected, #14215a);
+    background: var(--fill-selected, #14215A);
+    border-color: var(--fill-selected, #14215A);
 
     &::after {
       opacity: 1;

package/src/v2/components/ZoneCard/ZoneCard.scss

@@ -200,6 +200,84 @@
   }
 }
 
+// Reorder row subtitle
+.zone-card__subtitle {
+  display: block;
+  font-family: var(--font-family-sans, 'Geist', system-ui, sans-serif);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--label-secondary);
+  margin-top: 2px;
+}
+
+// Reorder screen styles
+.reorder-screen {
+  color: var(--label-primary);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    height: 72px;
+    padding: 24px 0 8px 8px;
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    padding-top: 24px;
+    padding-bottom: 48px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    max-width: 672px;
+  }
+
+  &__intro {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    p {
+      color: var(--label-secondary);
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+    padding-top: 16px;
+  }
+}
+
+@media (max-width: 640px) {
+  .reorder-screen {
+    &__header {
+      height: auto;
+      padding: 16px 0 8px;
+    }
+
+    &__content {
+      padding-top: 32px;
+    }
+  }
+}
+
 @media (max-width: 768px) {
   .zone-card {
     &__header {

package/src/v2/components/index.ts

@@ -88,6 +88,7 @@ export {
   EllipsisIcon,
   CircleIcon,
   GripVerticalIcon,
+  ReorderIcon,
   PlusIcon,
   DeleteIcon,
   ClockIcon,

package/src/v2/icons/index.tsx

@@ -211,6 +211,16 @@ export const GripVerticalIcon = ({ width = 16, height = 16 }: { width?: number;
     </svg>
 )
 
+export const ReorderIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="7" y="11" width="18" height="2" rx="1" fill="currentColor"/>
+        <rect x="7" y="15" width="18" height="2" rx="1" fill="currentColor"/>
+        <rect x="7" y="19" width="18" height="2" rx="1" fill="currentColor"/>
+        <path d="M19.9325 8H12.0675C11.6436 8 11.412 7.50557 11.6834 7.17991L15.6159 2.46093C15.8158 2.22106 16.1842 2.22106 16.3841 2.46093L20.3166 7.17991C20.588 7.50557 20.3564 8 19.9325 8Z" fill="currentColor" fillOpacity="0.5"/>
+        <path d="M12.0675 24L19.9325 24C20.3564 24 20.588 24.4944 20.3166 24.8201L16.3841 29.5391C16.1842 29.7789 15.8158 29.7789 15.6159 29.5391L11.6834 24.8201C11.412 24.4944 11.6436 24 12.0675 24Z" fill="currentColor" fillOpacity="0.5"/>
+    </svg>
+)
+
 export const PlusIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
     <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M17 14.5H24.5V17.5H17V25H14V17.5H6.5V14.5H14V7H17V14.5Z" fill="currentColor"/>

package/src/v2/pages/SettingsSubPage/SettingsSubPage.scss

@@ -4,7 +4,7 @@
   align-self: stretch;
 
   &__back {
-    padding: 24px 32px 0 32px;
+    padding: 24px 32px 0 0;
     align-self: flex-start;
 
     .ghost-button {
@@ -23,12 +23,12 @@
     }
 
     @media (max-width: 768px) {
-      padding: 16px 16px 0 16px;
+      padding: 16px 16px 0 0;
     }
   }
 
   &__content {
-    padding: 24px 32px;
+    padding: 24px 0;
 
     @media (max-width: 768px) {
       padding: 0;