@licklist/design 0.78.5-dev.45 → 0.78.5-dev.46

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

@@ -0,0 +1,276 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { SidebarNavItem } from './SidebarNavItem.js';
+import './SidebarCustomisation.scss.js';
+import { CalendarIcon, BookingsIcon, BookingTypesIcon, LoyaltyIcon, CustomersIcon, MarketingIcon, WaiversIcon, SettingsIcon, EditIcon } from '../../../icons/index.js';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+// Default sidebar items - IDs must match useProviderNavigation.tsx
+var defaultSidebarItems = [
+    {
+        id: 'events',
+        label: 'Dates & Events',
+        icon: /*#__PURE__*/ jsx(CalendarIcon, {}),
+        visible: true
+    },
+    {
+        id: 'sales',
+        label: 'Bookings & Enquiries',
+        icon: /*#__PURE__*/ jsx(BookingsIcon, {}),
+        visible: true
+    },
+    {
+        id: 'product-sets',
+        label: 'Booking Types',
+        icon: /*#__PURE__*/ jsx(BookingTypesIcon, {}),
+        visible: true
+    },
+    {
+        id: 'loyalty',
+        label: 'Loyalty',
+        icon: /*#__PURE__*/ jsx(LoyaltyIcon, {}),
+        visible: true
+    },
+    {
+        id: 'customers',
+        label: 'Customers',
+        icon: /*#__PURE__*/ jsx(CustomersIcon, {}),
+        visible: true
+    },
+    {
+        id: 'emails',
+        label: 'Email & SMS',
+        icon: /*#__PURE__*/ jsx(MarketingIcon, {}),
+        visible: true
+    },
+    {
+        id: 'waivers',
+        label: 'Waivers',
+        icon: /*#__PURE__*/ jsx(WaiversIcon, {}),
+        visible: true
+    },
+    {
+        id: 'settings',
+        label: 'Settings',
+        icon: /*#__PURE__*/ jsx(SettingsIcon, {}),
+        visible: true,
+        locked: true
+    }
+];
+var SidebarCustomisation = function(param) {
+    var initialItems = param.items, onItemsChange = param.onItemsChange, onSave = param.onSave, onReset = param.onReset, onCancel = param.onCancel;
+    var _useState = _sliced_to_array(useState(initialItems), 2), items = _useState[0], setItems = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), isEditing = _useState1[0], setIsEditing = _useState1[1];
+    useEffect(function() {
+        setItems(initialItems);
+    }, [
+        initialItems
+    ]);
+    var handleLabelChange = function(id, newLabel) {
+        var updatedItems = items.map(function(item) {
+            return item.id === id ? _object_spread_props(_object_spread({}, item), {
+                label: newLabel
+            }) : item;
+        });
+        setItems(updatedItems);
+        onItemsChange === null || onItemsChange === void 0 ? void 0 : onItemsChange(updatedItems);
+    };
+    var handleSave = function() {
+        onSave === null || onSave === void 0 ? void 0 : onSave(items);
+        setIsEditing(false);
+    };
+    var handleReset = function() {
+        setItems(defaultSidebarItems);
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    };
+    var handleCancel = function() {
+        setItems(initialItems);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        setIsEditing(false);
+    };
+    var handleEdit = function() {
+        setIsEditing(true);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "sidebar-customisation",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "sidebar-customisation__header",
+                children: [
+                    /*#__PURE__*/ jsx("h3", {
+                        className: "sidebar-customisation__title",
+                        children: "Sidebar Customisation"
+                    }),
+                    isEditing ? /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "sidebar-customisation__cancel-btn",
+                        onClick: handleCancel,
+                        children: "Cancel"
+                    }) : /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        className: "sidebar-customisation__edit-btn",
+                        onClick: handleEdit,
+                        children: [
+                            /*#__PURE__*/ jsx(EditIcon, {}),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "Edit Side Bar"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isEditing ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "sidebar-customisation__grid",
+                        children: items.map(function(item) {
+                            var defaultItem = defaultSidebarItems.find(function(d) {
+                                return d.id === item.id;
+                            });
+                            return /*#__PURE__*/ jsx(SidebarNavItem, {
+                                id: item.id,
+                                label: item.label,
+                                defaultLabel: (defaultItem === null || defaultItem === void 0 ? void 0 : defaultItem.label) || item.label,
+                                icon: item.icon,
+                                onLabelChange: handleLabelChange
+                            }, item.id);
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "sidebar-customisation__actions",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "sidebar-customisation__save-btn",
+                                onClick: handleSave,
+                                children: "Save Changes"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "sidebar-customisation__reset-btn",
+                                onClick: handleReset,
+                                children: "Reset to defaults"
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ jsx("div", {
+                className: "sidebar-customisation__view-grid",
+                children: items.map(function(item) {
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "sidebar-customisation__view-item ".concat(!item.visible ? 'sidebar-customisation__view-item--hidden' : ''),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "sidebar-customisation__view-icon",
+                                children: item.icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "sidebar-customisation__view-label",
+                                children: item.label
+                            })
+                        ]
+                    }, item.id);
+                })
+            })
+        ]
+    });
+};
+
+export { SidebarCustomisation, SidebarCustomisation as default, defaultSidebarItems };

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

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600;--blue-50:#e7f4fc;--blue-100:#b4dbf6;--blue-200:#90caf2;--blue-300:#5eb2ec;--blue-400:#3ea3e8;--blue-500:#0e8ce2;--blue-600:#0d7fce;--blue-700:#0a63a0;--blue-800:#084d7c;--blue-900:#063b5f;--cyan-50:#eafbff;--cyan-75:#bdf3ff;--cyan-100:#aff1ff;--cyan-200:#9deeff;--cyan-300:#71e6ff;--cyan-400:#55e1ff;--cyan-500:#2bd9ff;--cyan-600:#27c5e8;--cyan-700:#1f9ab5;--cyan-800:#18778c;--cyan-900:#125b6b;--indigo-50:#efeffe;--indigo-100:#cdccfc;--indigo-200:#b4b4fa;--indigo-300:#9291f8;--indigo-400:#7c74ff;--indigo-500:#5d5bf4;--indigo-600:#5553de;--indigo-700:#4241ad;--indigo-800:#333286;--indigo-900:#272666;--green-50:#eef9ea;--green-100:#c9ecbd;--green-200:#afe39d;--green-300:#8bd671;--green-400:#75ce55;--green-500:#52c22b;--green-600:#4bb127;--green-700:#3a8a1f;--green-800:#2d6b18;--green-900:#225112;--red-50:#fceceb;--red-100:#f5c4c2;--red-200:#f1a8a4;--red-300:#ea807b;--red-400:#e66861;--red-500:#e0423a;--red-600:#cc3c35;--red-700:#9f2f29;--red-800:#7b2420;--red-900:#5e1c18;--purple-50:#efe6fd;--purple-100:#ceb0fa;--purple-200:#b78af7;--purple-300:#965ff4;--purple-400:#8133f1;--purple-500:#6200ee;--purple-600:#5900d9;--purple-700:#4600a9;--purple-800:#360083;--purple-900:#290064;--orange-50:#fff2e8;--orange-100:#fed7b6;--orange-200:#fec493;--orange-300:#fea962;--orange-400:#fd9843;--orange-500:#fd7e14;--orange-600:#e67312;--orange-700:#b4590e;--orange-800:#8b450b;--orange-900:#6a3508;--yellow-50:#fcf6e7;--yellow-100:#f6e3b4;--yellow-200:#f2d68f;--yellow-300:#ecc35c;--yellow-400:#fcc741;--yellow-500:#fbb912;--yellow-600:#e4a810;--yellow-700:#a07509;--yellow-800:#7c5b07;--yellow-900:#5f4505;--pink-50:#fdecf4;--pink-100:#f8c3db;--pink-200:#f4a6ca;--pink-300:#f07eb2;--pink-400:#ed65a3;--pink-500:#e83e8c;--pink-600:#d33874;--pink-700:#a52c63;--pink-800:#80224d;--pink-900:#611a3b;--teal-50:#e9faf7;--teal-100:#baf0e7;--teal-200:#99e8db;--teal-300:#6bdecb;--teal-400:#4ed8c1;--teal-500:#22ceb1;--teal-600:#1fbba1;--teal-700:#18927e;--teal-800:#137161;--teal-900:#0e574a;--neutral-white:#fff;--neutral-25:#f8f8fa;--neutral-50:#e8e9ef;--neutral-75:#d2d5e3;--neutral-100:#b6bacc;--neutral-200:#9399b3;--neutral-300:#626a90;--neutral-400:#433d7b;--neutral-500:#14215a;--neutral-600:#121e52;--neutral-700:#0e1740;--neutral-800:#0b1232;--neutral-900:#080e26;--neutral-black:#000;--purple-lightest:var(--purple-50);--purple-lighter:var(--purple-100);--purple-light:var(--purple-300);--purple-regular:var(--purple-500);--purple-dark:var(--purple-600);--purple-darker:var(--purple-800);--purple-darkest:var(--purple-900);--blue-lightest:var(--blue-50);--blue-lighter:var(--blue-100);--blue-light:var(--blue-300);--blue-regular:var(--blue-500);--blue-dark:var(--blue-600);--blue-darker:var(--blue-800);--blue-darkest:var(--blue-900);--indigo-lightest:var(--indigo-50);--indigo-lighter:var(--indigo-100);--indigo-light:var(--indigo-300);--indigo-regular:var(--indigo-500);--indigo-dark:var(--indigo-600);--indigo-darker:var(--indigo-800);--indigo-darkest:var(--indigo-900);--cyan-lightest:var(--cyan-50);--cyan-lighter:var(--cyan-100);--cyan-light:var(--cyan-300);--cyan-regular:var(--cyan-500);--cyan-dark:var(--cyan-700);--cyan-darker:var(--cyan-800);--cyan-darkest:var(--cyan-900);--red-lightest:var(--red-50);--red-lighter:var(--red-100);--red-light:var(--red-400);--red-regular:var(--red-500);--red-dark:var(--red-600);--red-darker:var(--red-800);--red-darkest:var(--red-900);--orange-lightest:var(--orange-50);--orange-lighter:var(--orange-100);--orange-light:var(--orange-300);--orange-regular:var(--orange-500);--orange-dark:var(--orange-600);--orange-darker:var(--orange-700);--orange-darkest:var(--orange-800);--yellow-lightest:var(--yellow-50);--yellow-lighter:var(--yellow-100);--yellow-light:var(--yellow-300);--yellow-regular:var(--yellow-500);--yellow-dark:var(--yellow-600);--yellow-darker:var(--yellow-800);--yellow-darkest:var(--yellow-900);--pink-lightest:var(--pink-50);--pink-lighter:var(--pink-100);--pink-light:var(--pink-300);--pink-regular:var(--pink-500);--pink-dark:var(--pink-600);--pink-darker:var(--pink-700);--pink-darkest:var(--pink-800);--green-lightest:var(--green-50);--green-lighter:var(--green-100);--green-light:var(--green-300);--green-regular:var(--green-500);--green-dark:var(--green-600);--green-darker:var(--green-800);--green-darkest:var(--green-900);--teal-lightest:var(--teal-50);--teal-lighter:var(--teal-100);--teal-light:var(--teal-300);--teal-regular:var(--teal-500);--teal-dark:var(--teal-600);--teal-darker:var(--teal-700);--teal-darkest:var(--teal-800);--tone-lightest:var(--neutral-white);--tone-lighter:var(--neutral-25);--tone-light:var(--neutral-50);--tone-regular:var(--neutral-75);--tone-dark:var(--neutral-100);--tone-darker:var(--neutral-200);--tone-darkest:var(--neutral-300);--shade-lightest:var(--neutral-400);--shade-lighter:var(--neutral-500);--shade-light:var(--neutral-600);--shade-regular:var(--neutral-700);--shade-dark:var(--neutral-800);--shade-darker:var(--neutral-900);--shade-darkest:var(--neutral-black);--highlight-lightest:var(--cyan-lightest);--highlight-lighter:var(--cyan-lighter);--highlight-light:var(--cyan-light);--highlight-regular:var(--blue-regular);--highlight-dark:var(--blue-dark);--highlight-darker:var(--blue-darker);--highlight-darkest:var(--blue-darkest);--success-lightest:var(--green-lightest);--success-lighter:var(--green-lighter);--success-light:var(--green-light);--success-regular:var(--green-regular);--success-dark:var(--green-dark);--success-darker:var(--green-darker);--success-darkest:var(--green-darkest);--errors-lightest:var(--red-lightest);--errors-lighter:var(--red-lighter);--errors-light:var(--red-light);--errors-regular:var(--red-regular);--errors-dark:var(--red-dark);--errors-darker:var(--red-darker);--errors-darkest:var(--red-darkest);--actions-lightest:var(--purple-50);--actions-lighter:var(--purple-lighter);--actions-light:var(--purple-light);--actions-regular:var(--purple-regular);--actions-dark:var(--purple-dark);--actions-darker:var(--purple-darker);--actions-darkest:var(--purple-darkest);--information-lightest:var(--blue-lightest);--information-lighter:var(--blue-lighter);--information-light:var(--blue-light);--information-regular:var(--blue-regular);--information-dark:var(--blue-dark);--information-darker:var(--blue-darker);--information-darkest:var(--blue-darkest);--alert-lightest:var(--yellow-lightest);--alert-lighter:var(--yellow-lighter);--alert-light:var(--orange-light);--alert-regular:var(--orange-regular);--alert-darker:var(--yellow-darker);--alert-darkest:var(--yellow-darkest);--danger-lightest:var(--red-lightest);--danger-lighter:var(--red-lighter);--danger-light:var(--red-light);--danger-regular:var(--red-regular);--danger-dark:var(--red-dark);--danger-darker:var(--red-darker);--danger-darkest:var(--red-darkest);--disabled-lightest:var(--tone-light);--disabled-lighter:var(--tone-regular);--disabled-light:var(--tone-dark);--disabled-regular:var(--tone-darker);--disabled-dark:var(--shade-lighter);--disabled-darker:var(--shade-light);--disabled-darkest:var(--shade-regular);--label-primary:var(--shade-light);--label-secondary:var(--tone-darkest);--label-secondary-hover:var(--shade-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-dark);--label-action:var(--actions-regular);--label-danger:var(--danger-dark);--label-status-error:var(--errors-dark);--label-status-success:var(--success-darker);--label-status-info:var(--information-dark);--label-status-alert:var(--alert-regular);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--tone-lightest);--surface-primary-hover:var(--tone-lighter);--surface-primary-pressed:var(--tone-light);--surface-secondary:var(--neutral-25);--surface-secondary-hover:var(--tone-light);--surface-secondary-pressed:var(--tone-regular);--surface-tertiary:var(--tone-light);--surface-tertiary-hover:var(--tone-lighter);--surface-tertiary-pressed:var(--tone-lightest);--surface-status-success:var(--success-lightest);--surface-status-error:var(--errors-lightest);--surface-status-alert:var(--alert-lightest);--surface-status-info:var(--information-lightest);--surface-status-disabled:var(--disabled-lighter);--surface-action-soft:var(--actions-lightest);--surface-action-soft-hover:var(--actions-lighter);--surface-action-soft-pressed:var(--actions-light);--surface-danger-soft:var(--danger-lightest);--surface-danger-soft-hover:var(--danger-lighter);--surface-danger-soft-pressed:var(--danger-light);--surface-highlight-soft:var(--highlight-lightest);--surface-colour-red-soft:var(--red-lightest);--surface-colour-green-soft:var(--green-lightest);--surface-colour-blue-soft:var(--blue-lightest);--surface-colour-orange-soft:var(--orange-lightest);--surface-colour-yellow-soft:var(--yellow-lightest);--surface-colour-purple-soft:var(--purple-lightest);--surface-colour-indigo-soft:var(--indigo-lightest);--surface-colour-cyan-soft:var(--cyan-lightest);--surface-colour-pink-soft:var(--pink-lightest);--surface-colour-teal-soft:var(--teal-lightest);--border-primary:var(--tone-light);--border-secondary:var(--tone-regular);--border-selected:var(--neutral-600);--border-action:var(--actions-regular);--border-status-error:var(--errors-lighter);--border-status-success:var(--success-lighter);--border-status-alert:var(--alert-lighter);--border-status-info:var(--information-lighter);--border-status-disabled:var(--disabled-lightest);--border-colour-overlay:#121e521a;--fill-primary:var(--shade-lighter);--fill-secondary:var(--tone-darkest);--fill-white:var(--tone-lightest);--fill-action:var(--actions-regular);--fill-highlight:var(--highlight-dark);--fill-danger:var(--danger-dark);--fill-status-success:var(--success-darker);--fill-status-error:var(--errors-dark);--fill-status-alert:var(--alert-regular);--fill-status-info:var(--information-regular);--fill-status-disabled:var(--disabled-light);--gradient-stop1:var(--purple-500);--gradient-stop2:var(--indigo-500);--gradient-stop3:var(--blue-500)}[data-theme=dark]{--label-primary:var(--tone-lighter);--label-secondary:var(--tone-darker);--label-secondary-hover:var(--tone-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-light);--label-action:var(--actions-lighter);--label-danger:var(--danger-light);--label-status-error:var(--errors-light);--label-status-success:var(--success-light);--label-status-info:var(--information-light);--label-status-alert:var(--alert-light);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--shade-darker);--surface-primary-hover:var(--shade-dark);--surface-primary-pressed:var(--shade-regular);--surface-secondary:var(--shade-dark);--surface-secondary-hover:var(--shade-darker);--surface-secondary-pressed:var(--shade-darkest);--surface-tertiary:var(--shade-regular);--surface-tertiary-hover:var(--shade-dark);--surface-tertiary-pressed:var(--shade-darker);--surface-status-success:var(--success-darkest);--surface-status-error:var(--errors-darkest);--surface-status-alert:var(--alert-darkest);--surface-status-info:var(--information-darkest);--surface-status-disabled:var(--disabled-darkest);--surface-action-soft:var(--actions-darkest);--surface-action-soft-hover:var(--actions-darker);--surface-action-soft-pressed:var(--actions-dark);--surface-danger-soft:var(--danger-darkest);--surface-danger-soft-hover:var(--danger-darker);--surface-danger-soft-pressed:var(--danger-dark);--surface-highlight-soft:var(--highlight-darkest);--surface-colour-red-soft:var(--red-darkest);--surface-colour-green-soft:var(--green-darkest);--surface-colour-blue-soft:var(--blue-darkest);--surface-colour-orange-soft:var(--orange-darkest);--surface-colour-yellow-soft:var(--yellow-darkest);--surface-colour-purple-soft:var(--purple-darkest);--surface-colour-indigo-soft:var(--indigo-darkest);--surface-colour-cyan-soft:var(--cyan-darkest);--surface-colour-pink-soft:var(--pink-darkest);--surface-colour-teal-soft:var(--teal-darkest);--border-primary:var(--shade-light);--border-secondary:var(--shade-dark);--border-selected:var(--tone-light);--border-action:var(--actions-light);--border-status-error:var(--errors-darker);--border-status-success:var(--success-darker);--border-status-alert:var(--alert-darker);--border-status-info:var(--information-darker);--border-status-disabled:var(--disabled-dark);--border-colour-overlay:#ffffff1a;--fill-primary:var(--tone-lighter);--fill-secondary:var(--tone-darker);--fill-white:var(--tone-lightest);--fill-action:var(--actions-lighter);--fill-highlight:var(--highlight-light);--fill-danger:var(--danger-light);--fill-status-success:var(--success-light);--fill-status-error:var(--errors-light);--fill-status-alert:var(--alert-light);--fill-status-info:var(--information-light);--fill-status-disabled:var(--disabled-dark);--gradient-stop1:var(--indigo-400);--gradient-stop2:var(--cyan-500);--gradient-stop3:var(--cyan-100)}.text-primary{color:var(--label-primary)}.text-secondary{color:var(--label-secondary)}.text-white{color:var(--label-white)}.text-action{color:var(--label-action)}.text-danger{color:var(--label-danger)}.text-success{color:var(--label-status-success)}.text-error{color:var(--label-status-error)}.text-info{color:var(--label-status-info)}.text-warning{color:var(--label-status-alert)}.text-disabled{color:var(--label-status-disabled)}.bg-primary{background-color:var(--surface-primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-tertiary{background-color:var(--surface-tertiary)}.bg-success{background-color:var(--surface-status-success)}.bg-error{background-color:var(--surface-status-error)}.bg-warning{background-color:var(--surface-status-alert)}.bg-info{background-color:var(--surface-status-info)}.bg-action-soft{background-color:var(--surface-action-soft)}.bg-danger-soft{background-color:var(--surface-danger-soft)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.border-selected{border-color:var(--border-selected)}.border-action{border-color:var(--border-action)}.border-success{border-color:var(--border-status-success)}.border-error{border-color:var(--border-status-error)}.border-warning{border-color:var(--border-status-alert)}.border-info{border-color:var(--border-status-info)}.sidebar-customisation{display:flex;flex-direction:column;font-family:var(--font-family-sans);gap:16px;width:100%}.sidebar-customisation__header{align-items:center;display:flex;justify-content:space-between}.sidebar-customisation__title{font-size:var(--text-small-size);font-weight:var(--text-small-bold-weight);line-height:var(--text-small-line);margin:0}.sidebar-customisation__cancel-btn,.sidebar-customisation__title{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans)}.sidebar-customisation__cancel-btn{background:none;border:none;color:var(--label-danger);cursor:pointer;font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);padding:0}.sidebar-customisation__cancel-btn:hover{text-decoration:underline}.sidebar-customisation__edit-btn{align-items:center;background:none;border:none;color:var(--labels-main-label-primary,#121e52);color:var(--label-primary);cursor:pointer;display:flex;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);gap:6px;line-height:var(--text-regular-line);padding:0}.sidebar-customisation__edit-btn svg{color:var(--fill-primary)}.sidebar-customisation__edit-btn:hover{text-decoration:underline}.sidebar-customisation__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);width:100%}.sidebar-customisation__view-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);width:100%}.sidebar-customisation__view-item{align-items:center;background-color:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:8px;display:flex;gap:12px;min-width:0;padding:12px}.sidebar-customisation__view-item--hidden{opacity:.5}.sidebar-customisation__view-icon{align-items:center;color:var(--fill-primary);display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.sidebar-customisation__view-icon svg{height:24px;width:24px}.sidebar-customisation__view-label{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-emphasis-weight);line-height:var(--text-small-line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-customisation__actions{align-items:center;display:flex;gap:12px;margin-top:8px}.sidebar-customisation__save-btn{background-color:var(--fill-action);border:none;border-radius:8px;color:var(--labels-main-label-primary,#121e52);color:var(--label-white);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);font-weight:600;line-height:var(--text-regular-line);padding:10px 20px;transition:background-color .2s ease}.sidebar-customisation__save-btn:hover{background-color:var(--actions-dark)}.sidebar-customisation__save-btn:focus-visible{outline:2px solid var(--border-action);outline-offset:2px}.sidebar-customisation__reset-btn{background:none;border:none;color:var(--labels-main-label-primary,#121e52);color:var(--label-secondary);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-weight);font-weight:500;line-height:var(--text-small-line);padding:0}.sidebar-customisation__reset-btn:hover{color:var(--label-primary);text-decoration:underline}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/pages/Settings/components/SidebarNavItem.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './SidebarNavItem.scss';
+export interface SidebarNavItemProps {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item (editable value) */
+    label: string;
+    /** Default/original label name shown in header */
+    defaultLabel: string;
+    /** Icon to display */
+    icon: React.ReactNode;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the label changes */
+    onLabelChange?: (id: string, label: string) => void;
+}
+export declare const SidebarNavItem: React.FC<SidebarNavItemProps>;
+export default SidebarNavItem;
+//# sourceMappingURL=SidebarNavItem.d.ts.map

package/dist/v2/pages/Settings/components/SidebarNavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavItem.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/Settings/components/SidebarNavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BxD,CAAA;AAED,eAAe,cAAc,CAAA"}

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import './SidebarNavItem.scss.js';
+
+var SidebarNavItem = function(param) {
+    var id = param.id, label = param.label, defaultLabel = param.defaultLabel, icon = param.icon, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, onLabelChange = param.onLabelChange;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "sidebar-nav-item",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "sidebar-nav-item__header",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "sidebar-nav-item__info ".concat(disabled ? 'sidebar-nav-item__info--disabled' : ''),
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "sidebar-nav-item__icon",
+                            children: icon
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "sidebar-nav-item__name",
+                            children: defaultLabel
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("input", {
+                type: "text",
+                id: id,
+                className: "sidebar-nav-item__input ".concat(disabled ? 'sidebar-nav-item__input--disabled' : ''),
+                value: label,
+                onChange: function(e) {
+                    return onLabelChange === null || onLabelChange === void 0 ? void 0 : onLabelChange(id, e.target.value);
+                },
+                disabled: disabled,
+                placeholder: label
+            })
+        ]
+    });
+};
+
+export { SidebarNavItem, SidebarNavItem as default };

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

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600;--blue-50:#e7f4fc;--blue-100:#b4dbf6;--blue-200:#90caf2;--blue-300:#5eb2ec;--blue-400:#3ea3e8;--blue-500:#0e8ce2;--blue-600:#0d7fce;--blue-700:#0a63a0;--blue-800:#084d7c;--blue-900:#063b5f;--cyan-50:#eafbff;--cyan-75:#bdf3ff;--cyan-100:#aff1ff;--cyan-200:#9deeff;--cyan-300:#71e6ff;--cyan-400:#55e1ff;--cyan-500:#2bd9ff;--cyan-600:#27c5e8;--cyan-700:#1f9ab5;--cyan-800:#18778c;--cyan-900:#125b6b;--indigo-50:#efeffe;--indigo-100:#cdccfc;--indigo-200:#b4b4fa;--indigo-300:#9291f8;--indigo-400:#7c74ff;--indigo-500:#5d5bf4;--indigo-600:#5553de;--indigo-700:#4241ad;--indigo-800:#333286;--indigo-900:#272666;--green-50:#eef9ea;--green-100:#c9ecbd;--green-200:#afe39d;--green-300:#8bd671;--green-400:#75ce55;--green-500:#52c22b;--green-600:#4bb127;--green-700:#3a8a1f;--green-800:#2d6b18;--green-900:#225112;--red-50:#fceceb;--red-100:#f5c4c2;--red-200:#f1a8a4;--red-300:#ea807b;--red-400:#e66861;--red-500:#e0423a;--red-600:#cc3c35;--red-700:#9f2f29;--red-800:#7b2420;--red-900:#5e1c18;--purple-50:#efe6fd;--purple-100:#ceb0fa;--purple-200:#b78af7;--purple-300:#965ff4;--purple-400:#8133f1;--purple-500:#6200ee;--purple-600:#5900d9;--purple-700:#4600a9;--purple-800:#360083;--purple-900:#290064;--orange-50:#fff2e8;--orange-100:#fed7b6;--orange-200:#fec493;--orange-300:#fea962;--orange-400:#fd9843;--orange-500:#fd7e14;--orange-600:#e67312;--orange-700:#b4590e;--orange-800:#8b450b;--orange-900:#6a3508;--yellow-50:#fcf6e7;--yellow-100:#f6e3b4;--yellow-200:#f2d68f;--yellow-300:#ecc35c;--yellow-400:#fcc741;--yellow-500:#fbb912;--yellow-600:#e4a810;--yellow-700:#a07509;--yellow-800:#7c5b07;--yellow-900:#5f4505;--pink-50:#fdecf4;--pink-100:#f8c3db;--pink-200:#f4a6ca;--pink-300:#f07eb2;--pink-400:#ed65a3;--pink-500:#e83e8c;--pink-600:#d33874;--pink-700:#a52c63;--pink-800:#80224d;--pink-900:#611a3b;--teal-50:#e9faf7;--teal-100:#baf0e7;--teal-200:#99e8db;--teal-300:#6bdecb;--teal-400:#4ed8c1;--teal-500:#22ceb1;--teal-600:#1fbba1;--teal-700:#18927e;--teal-800:#137161;--teal-900:#0e574a;--neutral-white:#fff;--neutral-25:#f8f8fa;--neutral-50:#e8e9ef;--neutral-75:#d2d5e3;--neutral-100:#b6bacc;--neutral-200:#9399b3;--neutral-300:#626a90;--neutral-400:#433d7b;--neutral-500:#14215a;--neutral-600:#121e52;--neutral-700:#0e1740;--neutral-800:#0b1232;--neutral-900:#080e26;--neutral-black:#000;--purple-lightest:var(--purple-50);--purple-lighter:var(--purple-100);--purple-light:var(--purple-300);--purple-regular:var(--purple-500);--purple-dark:var(--purple-600);--purple-darker:var(--purple-800);--purple-darkest:var(--purple-900);--blue-lightest:var(--blue-50);--blue-lighter:var(--blue-100);--blue-light:var(--blue-300);--blue-regular:var(--blue-500);--blue-dark:var(--blue-600);--blue-darker:var(--blue-800);--blue-darkest:var(--blue-900);--indigo-lightest:var(--indigo-50);--indigo-lighter:var(--indigo-100);--indigo-light:var(--indigo-300);--indigo-regular:var(--indigo-500);--indigo-dark:var(--indigo-600);--indigo-darker:var(--indigo-800);--indigo-darkest:var(--indigo-900);--cyan-lightest:var(--cyan-50);--cyan-lighter:var(--cyan-100);--cyan-light:var(--cyan-300);--cyan-regular:var(--cyan-500);--cyan-dark:var(--cyan-700);--cyan-darker:var(--cyan-800);--cyan-darkest:var(--cyan-900);--red-lightest:var(--red-50);--red-lighter:var(--red-100);--red-light:var(--red-400);--red-regular:var(--red-500);--red-dark:var(--red-600);--red-darker:var(--red-800);--red-darkest:var(--red-900);--orange-lightest:var(--orange-50);--orange-lighter:var(--orange-100);--orange-light:var(--orange-300);--orange-regular:var(--orange-500);--orange-dark:var(--orange-600);--orange-darker:var(--orange-700);--orange-darkest:var(--orange-800);--yellow-lightest:var(--yellow-50);--yellow-lighter:var(--yellow-100);--yellow-light:var(--yellow-300);--yellow-regular:var(--yellow-500);--yellow-dark:var(--yellow-600);--yellow-darker:var(--yellow-800);--yellow-darkest:var(--yellow-900);--pink-lightest:var(--pink-50);--pink-lighter:var(--pink-100);--pink-light:var(--pink-300);--pink-regular:var(--pink-500);--pink-dark:var(--pink-600);--pink-darker:var(--pink-700);--pink-darkest:var(--pink-800);--green-lightest:var(--green-50);--green-lighter:var(--green-100);--green-light:var(--green-300);--green-regular:var(--green-500);--green-dark:var(--green-600);--green-darker:var(--green-800);--green-darkest:var(--green-900);--teal-lightest:var(--teal-50);--teal-lighter:var(--teal-100);--teal-light:var(--teal-300);--teal-regular:var(--teal-500);--teal-dark:var(--teal-600);--teal-darker:var(--teal-700);--teal-darkest:var(--teal-800);--tone-lightest:var(--neutral-white);--tone-lighter:var(--neutral-25);--tone-light:var(--neutral-50);--tone-regular:var(--neutral-75);--tone-dark:var(--neutral-100);--tone-darker:var(--neutral-200);--tone-darkest:var(--neutral-300);--shade-lightest:var(--neutral-400);--shade-lighter:var(--neutral-500);--shade-light:var(--neutral-600);--shade-regular:var(--neutral-700);--shade-dark:var(--neutral-800);--shade-darker:var(--neutral-900);--shade-darkest:var(--neutral-black);--highlight-lightest:var(--cyan-lightest);--highlight-lighter:var(--cyan-lighter);--highlight-light:var(--cyan-light);--highlight-regular:var(--blue-regular);--highlight-dark:var(--blue-dark);--highlight-darker:var(--blue-darker);--highlight-darkest:var(--blue-darkest);--success-lightest:var(--green-lightest);--success-lighter:var(--green-lighter);--success-light:var(--green-light);--success-regular:var(--green-regular);--success-dark:var(--green-dark);--success-darker:var(--green-darker);--success-darkest:var(--green-darkest);--errors-lightest:var(--red-lightest);--errors-lighter:var(--red-lighter);--errors-light:var(--red-light);--errors-regular:var(--red-regular);--errors-dark:var(--red-dark);--errors-darker:var(--red-darker);--errors-darkest:var(--red-darkest);--actions-lightest:var(--purple-50);--actions-lighter:var(--purple-lighter);--actions-light:var(--purple-light);--actions-regular:var(--purple-regular);--actions-dark:var(--purple-dark);--actions-darker:var(--purple-darker);--actions-darkest:var(--purple-darkest);--information-lightest:var(--blue-lightest);--information-lighter:var(--blue-lighter);--information-light:var(--blue-light);--information-regular:var(--blue-regular);--information-dark:var(--blue-dark);--information-darker:var(--blue-darker);--information-darkest:var(--blue-darkest);--alert-lightest:var(--yellow-lightest);--alert-lighter:var(--yellow-lighter);--alert-light:var(--orange-light);--alert-regular:var(--orange-regular);--alert-darker:var(--yellow-darker);--alert-darkest:var(--yellow-darkest);--danger-lightest:var(--red-lightest);--danger-lighter:var(--red-lighter);--danger-light:var(--red-light);--danger-regular:var(--red-regular);--danger-dark:var(--red-dark);--danger-darker:var(--red-darker);--danger-darkest:var(--red-darkest);--disabled-lightest:var(--tone-light);--disabled-lighter:var(--tone-regular);--disabled-light:var(--tone-dark);--disabled-regular:var(--tone-darker);--disabled-dark:var(--shade-lighter);--disabled-darker:var(--shade-light);--disabled-darkest:var(--shade-regular);--label-primary:var(--shade-light);--label-secondary:var(--tone-darkest);--label-secondary-hover:var(--shade-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-dark);--label-action:var(--actions-regular);--label-danger:var(--danger-dark);--label-status-error:var(--errors-dark);--label-status-success:var(--success-darker);--label-status-info:var(--information-dark);--label-status-alert:var(--alert-regular);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--tone-lightest);--surface-primary-hover:var(--tone-lighter);--surface-primary-pressed:var(--tone-light);--surface-secondary:var(--neutral-25);--surface-secondary-hover:var(--tone-light);--surface-secondary-pressed:var(--tone-regular);--surface-tertiary:var(--tone-light);--surface-tertiary-hover:var(--tone-lighter);--surface-tertiary-pressed:var(--tone-lightest);--surface-status-success:var(--success-lightest);--surface-status-error:var(--errors-lightest);--surface-status-alert:var(--alert-lightest);--surface-status-info:var(--information-lightest);--surface-status-disabled:var(--disabled-lighter);--surface-action-soft:var(--actions-lightest);--surface-action-soft-hover:var(--actions-lighter);--surface-action-soft-pressed:var(--actions-light);--surface-danger-soft:var(--danger-lightest);--surface-danger-soft-hover:var(--danger-lighter);--surface-danger-soft-pressed:var(--danger-light);--surface-highlight-soft:var(--highlight-lightest);--surface-colour-red-soft:var(--red-lightest);--surface-colour-green-soft:var(--green-lightest);--surface-colour-blue-soft:var(--blue-lightest);--surface-colour-orange-soft:var(--orange-lightest);--surface-colour-yellow-soft:var(--yellow-lightest);--surface-colour-purple-soft:var(--purple-lightest);--surface-colour-indigo-soft:var(--indigo-lightest);--surface-colour-cyan-soft:var(--cyan-lightest);--surface-colour-pink-soft:var(--pink-lightest);--surface-colour-teal-soft:var(--teal-lightest);--border-primary:var(--tone-light);--border-secondary:var(--tone-regular);--border-selected:var(--neutral-600);--border-action:var(--actions-regular);--border-status-error:var(--errors-lighter);--border-status-success:var(--success-lighter);--border-status-alert:var(--alert-lighter);--border-status-info:var(--information-lighter);--border-status-disabled:var(--disabled-lightest);--border-colour-overlay:#121e521a;--fill-primary:var(--shade-lighter);--fill-secondary:var(--tone-darkest);--fill-white:var(--tone-lightest);--fill-action:var(--actions-regular);--fill-highlight:var(--highlight-dark);--fill-danger:var(--danger-dark);--fill-status-success:var(--success-darker);--fill-status-error:var(--errors-dark);--fill-status-alert:var(--alert-regular);--fill-status-info:var(--information-regular);--fill-status-disabled:var(--disabled-light);--gradient-stop1:var(--purple-500);--gradient-stop2:var(--indigo-500);--gradient-stop3:var(--blue-500)}[data-theme=dark]{--label-primary:var(--tone-lighter);--label-secondary:var(--tone-darker);--label-secondary-hover:var(--tone-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-light);--label-action:var(--actions-lighter);--label-danger:var(--danger-light);--label-status-error:var(--errors-light);--label-status-success:var(--success-light);--label-status-info:var(--information-light);--label-status-alert:var(--alert-light);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--shade-darker);--surface-primary-hover:var(--shade-dark);--surface-primary-pressed:var(--shade-regular);--surface-secondary:var(--shade-dark);--surface-secondary-hover:var(--shade-darker);--surface-secondary-pressed:var(--shade-darkest);--surface-tertiary:var(--shade-regular);--surface-tertiary-hover:var(--shade-dark);--surface-tertiary-pressed:var(--shade-darker);--surface-status-success:var(--success-darkest);--surface-status-error:var(--errors-darkest);--surface-status-alert:var(--alert-darkest);--surface-status-info:var(--information-darkest);--surface-status-disabled:var(--disabled-darkest);--surface-action-soft:var(--actions-darkest);--surface-action-soft-hover:var(--actions-darker);--surface-action-soft-pressed:var(--actions-dark);--surface-danger-soft:var(--danger-darkest);--surface-danger-soft-hover:var(--danger-darker);--surface-danger-soft-pressed:var(--danger-dark);--surface-highlight-soft:var(--highlight-darkest);--surface-colour-red-soft:var(--red-darkest);--surface-colour-green-soft:var(--green-darkest);--surface-colour-blue-soft:var(--blue-darkest);--surface-colour-orange-soft:var(--orange-darkest);--surface-colour-yellow-soft:var(--yellow-darkest);--surface-colour-purple-soft:var(--purple-darkest);--surface-colour-indigo-soft:var(--indigo-darkest);--surface-colour-cyan-soft:var(--cyan-darkest);--surface-colour-pink-soft:var(--pink-darkest);--surface-colour-teal-soft:var(--teal-darkest);--border-primary:var(--shade-light);--border-secondary:var(--shade-dark);--border-selected:var(--tone-light);--border-action:var(--actions-light);--border-status-error:var(--errors-darker);--border-status-success:var(--success-darker);--border-status-alert:var(--alert-darker);--border-status-info:var(--information-darker);--border-status-disabled:var(--disabled-dark);--border-colour-overlay:#ffffff1a;--fill-primary:var(--tone-lighter);--fill-secondary:var(--tone-darker);--fill-white:var(--tone-lightest);--fill-action:var(--actions-lighter);--fill-highlight:var(--highlight-light);--fill-danger:var(--danger-light);--fill-status-success:var(--success-light);--fill-status-error:var(--errors-light);--fill-status-alert:var(--alert-light);--fill-status-info:var(--information-light);--fill-status-disabled:var(--disabled-dark);--gradient-stop1:var(--indigo-400);--gradient-stop2:var(--cyan-500);--gradient-stop3:var(--cyan-100)}.text-primary{color:var(--label-primary)}.text-secondary{color:var(--label-secondary)}.text-white{color:var(--label-white)}.text-action{color:var(--label-action)}.text-danger{color:var(--label-danger)}.text-success{color:var(--label-status-success)}.text-error{color:var(--label-status-error)}.text-info{color:var(--label-status-info)}.text-warning{color:var(--label-status-alert)}.text-disabled{color:var(--label-status-disabled)}.bg-primary{background-color:var(--surface-primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-tertiary{background-color:var(--surface-tertiary)}.bg-success{background-color:var(--surface-status-success)}.bg-error{background-color:var(--surface-status-error)}.bg-warning{background-color:var(--surface-status-alert)}.bg-info{background-color:var(--surface-status-info)}.bg-action-soft{background-color:var(--surface-action-soft)}.bg-danger-soft{background-color:var(--surface-danger-soft)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.border-selected{border-color:var(--border-selected)}.border-action{border-color:var(--border-action)}.border-success{border-color:var(--border-status-success)}.border-error{border-color:var(--border-status-error)}.border-warning{border-color:var(--border-status-alert)}.border-info{border-color:var(--border-status-info)}.sidebar-nav-item{display:flex;flex-direction:column;font-family:var(--font-family-sans);gap:8px}.sidebar-nav-item__header{align-items:center;display:flex;justify-content:space-between}.sidebar-nav-item__info{align-items:center;display:flex;gap:8px}.sidebar-nav-item__info--disabled .sidebar-nav-item__icon{color:var(--fill-disabled)}.sidebar-nav-item__info--disabled .sidebar-nav-item__name{color:var(--label-status-disabled)}.sidebar-nav-item__icon{align-items:center;color:var(--fill-primary);display:flex;height:24px;justify-content:center;width:24px}.sidebar-nav-item__icon svg{height:24px;width:24px}.sidebar-nav-item__name{font-weight:var(--text-small-emphasis-weight)}.sidebar-nav-item__input,.sidebar-nav-item__name{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--text-small-size);line-height:var(--text-small-line)}.sidebar-nav-item__input{background-color:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:6px;color:var(--label-primary);font-weight:var(--text-small-weight);height:40px;outline:none;padding:8px 12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.sidebar-nav-item__input::placeholder{color:var(--label-secondary)}.sidebar-nav-item__input:focus{box-shadow:0 0 0 2px var(--surface-primary),0 0 0 4px var(--actions-regular);outline:none}.sidebar-nav-item__input--disabled{cursor:not-allowed;opacity:.5}";
+styleInject(css_248z);
+
+export { css_248z as default };

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

@@ -0,0 +1,5 @@
+export { SidebarCustomisation, defaultSidebarItems } from './SidebarCustomisation';
+export type { SidebarCustomisationProps, SidebarItem } from './SidebarCustomisation';
+export { SidebarNavItem } from './SidebarNavItem';
+export type { SidebarNavItemProps } from './SidebarNavItem';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/Settings/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAClF,YAAY,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/v2/pages/Settings/index.d.ts

@@ -0,0 +1,7 @@
+export { SettingsPage } from './SettingsPage';
+export type { SettingsPageProps } from './SettingsPage';
+export { SettingsTabs } from './SettingsTabs';
+export type { SettingsTabsProps, SettingsTab } from './SettingsTabs';
+export { SidebarCustomisation, defaultSidebarItems, SidebarNavItem } from './components';
+export type { SidebarCustomisationProps, SidebarItem, SidebarNavItemProps } from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/Settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/pages/Settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEpE,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACxF,YAAY,EAAE,yBAAyB,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA"}

package/package.json

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

package/src/index.ts

@@ -48,4 +48,5 @@ export * from './PageNotFound'
 export * from './UnderMaintenance'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
+export * from './v2/pages/Settings'
 export * from './v2/components'

package/src/v2/icons/index.tsx

@@ -0,0 +1,105 @@
+export const DashboardIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path
+            fill="var(--fills-main-fill-primary, #14215A)"
+            d="M17.727 20.118H6.273a.83.83 0 0 1-.818-.84v-7.557H3l8.45-7.884a.803.803 0 0 1 1.1 0L21 11.72h-2.454v7.557a.83.83 0 0 1-.819.84Zm-10.636-1.68h9.818v-8.265L12 5.593l-4.91 4.58v8.266Z"
+        />
+    </svg>
+)
+
+export const CompanyIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19.5 18.75H4.5V17.25H5.25V6C5.25 5.58579 5.58579 5.25 6 5.25H16.5C16.9142 5.25 17.25 5.58579 17.25 6V9.75H18.75V17.25H19.5V18.75ZM15.75 17.25H17.25V11.25H12.75V17.25H14.25V12.75H15.75V17.25ZM15.75 9.75V6.75H6.75V17.25H11.25V9.75H15.75ZM8.25 11.25H9.75V12.75H8.25V11.25ZM8.25 14.25H9.75V15.75H8.25V14.25ZM8.25 8.25H9.75V9.75H8.25V8.25Z" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+export const VenueIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <path fill="#000" fillOpacity=".1" d="m6 7.5 6.75-2.625V18H6V7.5Z" />
+        <path fill="var(--fills-main-fill-primary, #14215A)" d="M5.25 17.25V7.275a.75.75 0 0 1 .494-.704l7.253-2.638a.375.375 0 0 1 .503.353V8l4.737 1.58a.75.75 0 0 1 .513.71v6.96h1.5v1.5H3.75v-1.5h1.5Zm1.5 0H12V5.892L6.75 7.8v9.45Zm10.5 0v-6.419l-3.75-1.25v7.67h3.75Z" />
+    </svg>
+)
+
+export const MarketingIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M10.7195 16.3629C10.7195 16.3629 15.9848 15.7286 18.7404 17.3195L19.4649 17.1254C19.865 17.0182 20.1024 16.607 19.9952 16.2069L18.8183 11.8146C19.4001 11.4863 19.7099 10.7953 19.529 10.1201C19.3481 9.44504 18.7343 9.00145 18.0663 9.00807L16.8894 4.61576C16.7822 4.21567 16.3709 3.97822 15.9708 4.08543L15.2464 4.27955C13.6554 7.03522 8.7784 9.11847 8.7784 9.11847L5.88062 9.89492C5.08042 10.1093 4.60555 10.9318 4.81996 11.732L5.98464 16.0787C6.19906 16.8789 7.02156 17.3538 7.82176 17.1394L8.54621 16.9453L10.2412 20.3734L11.6901 19.9851L10.7195 16.3629ZM10.5497 9.93369C11.0163 9.69484 11.5885 9.38415 12.197 9.01286C13.317 8.32952 14.7109 7.3523 15.7461 6.14469L18.2407 15.4544C16.7403 14.9262 15.0445 14.7769 13.733 14.7451C13.0204 14.7278 12.3694 14.7448 11.846 14.7712L10.5497 9.93369ZM6.26885 11.3438L9.16662 10.5674L10.3313 14.914L7.43353 15.6905L6.26885 11.3438Z" fill="currentColor" />
+    </svg>
+)
+
+export const AdminIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <path fill="var(--fills-main-fill-primary, #14215A)" d="M12 13.5V15a4.5 4.5 0 0 0-4.5 4.5H6a6 6 0 0 1 6-6Zm0-.75a4.499 4.499 0 0 1-4.5-4.5c0-2.486 2.014-4.5 4.5-4.5s4.5 2.014 4.5 4.5-2.014 4.5-4.5 4.5Zm0-1.5a3 3 0 1 0 0-6 3 3 0 1 0 0 6Zm4.5 7.875-2.204 1.159.42-2.455-1.782-1.738 2.464-.358L16.5 13.5l1.102 2.233 2.465.358-1.784 1.738.421 2.455-2.204-1.159Z" />
+    </svg>
+)
+
+export const ProfileIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <path fill="var(--fills-main-fill-primary, #14215A)" d="M6 19.5a6 6 0 0 1 12 0h-1.5a4.5 4.5 0 1 0-9 0H6Zm6-6.75a4.499 4.499 0 0 1-4.5-4.5c0-2.486 2.014-4.5 4.5-4.5s4.5 2.014 4.5 4.5-2.014 4.5-4.5 4.5Zm0-1.5a3 3 0 1 0 0-6 3 3 0 1 0 0 6Z" />
+    </svg>
+)
+
+export const CustomersIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M4.5 19.5C4.5 16.1863 7.18629 13.5 10.5 13.5C13.8137 13.5 16.5 16.1863 16.5 19.5H15C15 17.0147 12.9853 15 10.5 15C8.01472 15 6 17.0147 6 19.5H4.5ZM10.5 12.75C8.01375 12.75 6 10.7362 6 8.25C6 5.76375 8.01375 3.75 10.5 3.75C12.9862 3.75 15 5.76375 15 8.25C15 10.7362 12.9862 12.75 10.5 12.75ZM10.5 11.25C12.1575 11.25 13.5 9.9075 13.5 8.25C13.5 6.5925 12.1575 5.25 10.5 5.25C8.8425 5.25 7.5 6.5925 7.5 8.25C7.5 9.9075 8.8425 11.25 10.5 11.25ZM16.7128 14.0271C18.7983 14.9671 20.25 17.064 20.25 19.5H18.75C18.75 17.673 17.6612 16.1003 16.0971 15.3953L16.7128 14.0271ZM16.1972 5.55991C17.6958 6.17777 18.75 7.65271 18.75 9.375C18.75 11.5276 17.1032 13.2939 15 13.4832V11.9734C16.2725 11.7916 17.25 10.698 17.25 9.375C17.25 8.33951 16.6512 7.44452 15.7808 7.01726L16.1972 5.55991Z" fill="currentColor" />
+    </svg>
+)
+
+export const ReportsIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M11.25 8.25H12.75V15.75H11.25V8.25ZM14.25 11.25H15.75V15.75H14.25V11.25ZM8.25 12.75H9.75V15.75H8.25V12.75ZM14.25 6H6.75V18H17.25V9H14.25V6ZM5.25 5.24385C5.25 4.83304 5.58562 4.5 5.99888 4.5H15L18.7498 8.25L18.75 18.7444C18.75 19.1617 18.4163 19.5 18.0049 19.5H5.99505C5.58357 19.5 5.25 19.1585 5.25 18.7561V5.24385Z" fill="currentColor" />
+    </svg>
+)
+
+export const AnalyticsIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M6.75 5.25V17.25H18.75V18.75H5.25V5.25H6.75ZM18.2197 7.71967L19.2803 8.78033L15 13.0606L12.75 10.8112L9.53033 14.0303L8.46967 12.9697L12.75 8.68934L15 10.9388L18.2197 7.71967Z" fill="currentColor" />
+    </svg>
+)
+
+export const PaymentsIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <path fill="var(--fills-main-fill-primary, #14215A)" d="M12.004 19.502a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Zm0-1.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm-2.25-5.25h-.75v-1.5h.75v-.75a2.625 2.625 0 0 1 5.06-.984l-1.49.373a1.124 1.124 0 0 0-2.07.61v.75h2.25v1.5h-2.25v1.5h3.75v1.5h-6v-1.5h.75v-1.5Z" />
+    </svg>
+)
+
+export const SettingsIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <path d="M6 15.6385C6 14.774 6.1097 13.9351 6.31595 13.135C7.40622 13.1915 8.48848 12.6488 9.0718 11.6385C9.65467 10.6289 9.58406 9.42138 8.99121 8.50568C10.1835 7.33396 11.6683 6.45889 13.326 6C13.8222 6.97252 14.8333 7.63849 16 7.63849C17.1667 7.63849 18.1778 6.97252 18.674 6C20.3317 6.45889 21.8165 7.33396 23.0088 8.50568C22.4159 9.42138 22.3453 10.6289 22.9282 11.6385C23.5115 12.6488 24.5938 13.1915 25.6841 13.135C25.8903 13.9351 26 14.774 26 15.6385C26 16.503 25.8903 17.3419 25.6841 18.142C24.5938 18.0855 23.5115 18.6282 22.9282 19.6385C22.3453 20.6481 22.4159 21.8556 23.0088 22.7713C21.8165 23.943 20.3317 24.8181 18.674 25.277C18.1778 24.3045 17.1667 23.6385 16 23.6385C14.8333 23.6385 13.8222 24.3045 13.326 25.277C11.6683 24.8181 10.1835 23.943 8.99121 22.7713C9.58406 21.8556 9.65467 20.6481 9.0718 19.6385C8.48848 18.6282 7.40622 18.0855 6.31595 18.142C6.1097 17.3419 6 16.503 6 15.6385ZM10.8039 18.6385C11.434 19.7299 11.6146 20.9846 11.3682 22.1623C11.776 22.4525 12.2101 22.7039 12.6649 22.9128C13.5618 22.1099 14.7392 21.6385 16 21.6385C17.2608 21.6385 18.4382 22.1099 19.3351 22.9128C19.7899 22.7039 20.224 22.4525 20.6318 22.1623C20.3854 20.9846 20.566 19.7299 21.1962 18.6385C21.8262 17.5472 22.8225 16.7635 23.9655 16.388C23.9884 16.1402 24 15.8903 24 15.6385C24 15.3868 23.9884 15.1368 23.9655 14.8891C22.8225 14.5136 21.8262 13.7299 21.1962 12.6385C20.566 11.5471 20.3854 10.2924 20.6318 9.11472C20.224 8.82455 19.7899 8.57314 19.3351 8.36419C18.4382 9.16711 17.2608 9.63849 16 9.63849C14.7392 9.63849 13.5618 9.16711 12.6649 8.36419C12.2101 8.57314 11.776 8.82455 11.3682 9.11472C11.6146 10.2924 11.434 11.5471 10.8039 12.6385C10.1738 13.7299 9.17754 14.5136 8.03451 14.8891C8.01157 15.1368 8 15.3868 8 15.6385C8 15.8903 8.01157 16.1402 8.03451 16.388C9.17754 16.7635 10.1738 17.5472 10.8039 18.6385ZM16 18.6385C14.3431 18.6385 13 17.2954 13 15.6385C13 13.9817 14.3431 12.6385 16 12.6385C17.6569 12.6385 19 13.9817 19 15.6385C19 17.2954 17.6569 18.6385 16 18.6385ZM16 16.6385C16.5523 16.6385 17 16.1908 17 15.6385C17 15.0862 16.5523 14.6385 16 14.6385C15.4477 14.6385 15 15.0862 15 15.6385C15 16.1908 15.4477 16.6385 16 16.6385Z" fill="currentColor" />
+    </svg>
+)
+
+export const LoyaltyIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M12.0005 16.695L6.71036 19.6562L7.89186 13.7099L3.44092 9.59385L9.4612 8.88004L12.0005 3.375L14.5396 8.88004L20.5599 9.59385L16.109 13.7099L17.2905 19.6562L12.0005 16.695ZM12.0005 14.976L15.1855 16.7588L14.4741 13.1788L17.1539 10.7006L13.5292 10.2708L12.0005 6.95626L10.4716 10.2708L6.84691 10.7006L9.52673 13.1788L8.81537 16.7588L12.0005 14.976Z" fill="currentColor" />
+    </svg>
+)
+
+export const WaiversIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <path d="M19.5771 18.5563C20.9411 17.6264 22.718 17.1662 25.1523 17.4449L25.6484 17.5104L25.749 17.5309C26.2398 17.6564 26.5658 18.1363 26.4893 18.6481C26.4124 19.1602 25.9595 19.523 25.4531 19.4987L25.3516 19.4889L24.9297 19.4323C22.8719 19.1952 21.596 19.6007 20.7041 20.2086C19.7063 20.8889 19.0536 21.9054 18.3594 23.0729C17.718 24.1516 16.9733 25.5059 15.7871 26.2936C14.5585 27.1092 13.0355 27.2399 11.0518 26.5787L10.6484 26.4362L10.5547 26.3951C10.1007 26.17 9.88172 25.6328 10.0635 25.1481C10.2455 24.6636 10.7639 24.4027 11.2539 24.5319L11.3516 24.5631L11.6816 24.6803C13.2821 25.216 14.1232 24.9983 14.6816 24.6276C15.4013 24.1496 15.9073 23.2847 16.6406 22.0514C17.3213 20.9067 18.1691 19.5164 19.5771 18.5563ZM14.6758 4.54749C14.9256 4.0552 15.5271 3.85842 16.0195 4.10803L20.5703 6.41467L20.6582 6.46545C21.085 6.73909 21.2439 7.29752 21.0098 7.7594L14.4189 20.7594C14.3389 20.9171 14.2179 21.0511 14.0693 21.1471L9.81738 23.8932C9.51875 24.0861 9.14038 24.1056 8.82324 23.9449C8.50608 23.7842 8.29737 23.4669 8.27637 23.1119L7.97852 18.0592C7.96811 17.8825 8.00497 17.7053 8.08496 17.5475L14.6758 4.54749ZM9.99121 18.2106L10.1719 21.2819L12.7578 19.6129L18.7734 7.7467L16.0068 6.34436L9.99121 18.2106Z" fill="currentColor" />
+    </svg>
+)
+
+export const CalendarIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <path d="M13 6V8H19V6H21V8H25C25.5523 8 26 8.44772 26 9V25C26 25.5523 25.5523 26 25 26H7C6.44772 26 6 25.5523 6 25V9C6 8.44772 6.44772 8 7 8H11V6H13ZM24 16H8V24H24V16ZM15 18V22H10V18H15ZM11 10H8V14H24V10H21V12H19V10H13V12H11V10Z" fill="currentColor" />
+    </svg>
+)
+
+export const BookingsIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <path d="M24 6C24.5523 6 25 6.44772 25 7V25C25 25.5523 24.5523 26 24 26H10C9.44772 26 9 25.5523 9 25V23H7V21H9V19H7V17H9V15H7V13H9V11H7V9H9V7C9 6.44772 9.44772 6 10 6H24ZM23 8H11V24H23V8ZM18 12V15H21V17H17.999L18 20H16L15.999 17H13V15H16V12H18Z" fill="currentColor" />
+    </svg>
+)
+
+export const BookingTypesIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <path d="M9 22H6V20H9V22ZM26 22H12V20H26V22ZM9 17H6V15H9V17ZM26 17H12V15H26V17ZM9 12H6V10H9V12ZM26 12H12V10H26V12Z" fill="currentColor" />
+    </svg>
+)
+
+export const EditIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M11.333 2.00004C11.5081 1.82494 11.7169 1.68605 11.9473 1.59129C12.1777 1.49653 12.4251 1.44775 12.675 1.44775C12.9249 1.44775 13.1723 1.49653 13.4027 1.59129C13.6331 1.68605 13.8419 1.82494 14.017 2.00004C14.1921 2.17513 14.331 2.38394 14.4257 2.61436C14.5205 2.84478 14.5693 3.09215 14.5693 3.34204C14.5693 3.59193 14.5205 3.8393 14.4257 4.06972C14.331 4.30014 14.1921 4.50895 14.017 4.68404L5.00033 13.7007L1.33366 14.6667L2.29966 11.0007L11.333 2.00004Z" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+)

package/src/v2/index.ts

@@ -107,8 +107,8 @@ export type {
 // Navigation Configuration
 export { NAVIGATION_ITEMS } from './navigation/config'
 
-// Navigation Icons
-export * from './navigation/icons'
+// Icons
+export * from './icons'
 
 // ============================================================================
 // Hooks
@@ -122,6 +122,14 @@ export { useAuth, useCanAccess } from './hooks/useAuth'
 
 export type { AuthCredentials } from './types/navigation'
 
+// ============================================================================
+// Pages
+// ============================================================================
+
+// Settings Page
+export { SettingsPage, SettingsTabs, SidebarCustomisation, defaultSidebarItems, SidebarNavItem } from './pages/Settings'
+export type { SettingsPageProps, SettingsTabsProps, SettingsTab, SidebarCustomisationProps, SidebarItem, SidebarNavItemProps } from './pages/Settings'
+
 // ============================================================================
 // Design Tokens
 // ============================================================================

package/src/v2/navigation/DashboardLayout/TopNavigation.scss

@@ -91,6 +91,7 @@
 
         @media (min-width: 640px) {
             display: block;
+            width: 116px;
         }
     }