acacia-ui 1.1.1 → 1.2.0

package/dist/main.js

@@ -5230,7 +5230,7 @@ var getThemedContentBackgroundPicture = function (theme) {
 exports.VerticalLayoutContext = (0, react_1.createContext)(null);
 var VerticalLayout = function (_a) {
     var _b;
-    var _c = _a.headerBackgroundProps, _d = _c === void 0 ? {} : _c, _e = _d.headerBackgroundImage, headerBackgroundImage = _e === void 0 ? { type: "theme", theme: "classic" } : _e, _f = _d.headerBackgroundFill, headerBackgroundFill = _f === void 0 ? { type: "theme", theme: "classic" } : _f, props = __rest(_a, ["headerBackgroundProps"]);
+    var _c = _a.headerBackgroundProps, _d = _c === void 0 ? {} : _c, _e = _d.headerBackgroundImage, headerBackgroundImage = _e === void 0 ? { type: "theme", theme: "classic" } : _e, _f = _d.headerBackgroundFill, headerBackgroundFill = _f === void 0 ? { type: "theme", theme: "classic" } : _f, _g = _a.contentBackgroundProps, _h = _g === void 0 ? {} : _g, _j = _h.contentBackgroundFill, contentBackgroundFill = _j === void 0 ? { type: "theme", theme: "classic" } : _j, _k = _h.contentBackgroundImage, contentBackgroundImage = _k === void 0 ? { type: "theme", theme: "classic" } : _k, props = __rest(_a, ["headerBackgroundProps", "contentBackgroundProps"]);
     var defaultTheme = (0, antd_style_1.useTheme)().appTheme; // get the app theme
     // get the first bg color
     var getFirstBackgroundHexColor = function () {
@@ -5319,7 +5319,7 @@ var VerticalLayout = function (_a) {
         })
             .exhaustive();
     };
-    var _g = getBackgroundCSS(), css = _g.css, stops = _g.stops;
+    var _l = getBackgroundCSS(), css = _l.css, stops = _l.stops;
     // for each type of header - the way to get background image changes
     var getBackgroundImage = function () {
         return (0, ts_pattern_1.match)(headerBackgroundImage)
@@ -5338,7 +5338,7 @@ var VerticalLayout = function (_a) {
     };
     // for each type of header - the way to get background image changes
     var getContentBackgroundImage = function () {
-        return (0, ts_pattern_1.match)(headerBackgroundImage)
+        return (0, ts_pattern_1.match)(contentBackgroundImage)
             .with({ type: "theme" }, function (_a) {
             var theme = _a.theme;
             if (theme !== "classic") {
@@ -5358,6 +5358,14 @@ var VerticalLayout = function (_a) {
     var headerChildren = allChildren.filter(utils_1.isVerticalHeader);
     // get the content children as this needs to be overlapped with the bg
     var contentChildren = allChildren.filter(utils_1.isVerticalContent);
+    // get the layout padding
+    // if there is content children, then increase the padding
+    var getLayoutPadding = function () {
+        if (contentChildren.length > 0) {
+            return "1rem 2rem 3rem 2rem";
+        }
+        return "1rem 2rem 0rem 2rem";
+    };
     return ((0, jsx_runtime_1.jsxs)(exports.VerticalLayoutContext.Provider, { value: {
             mainTextColor: (_b = props.mainTextColor) !== null && _b !== void 0 ? _b : (0, colors_util_1.renderBlackOrWhiteText)(firstBackgroundColor), // by default it will try to render white/black text for content
             accentColor: accentColor,
@@ -5367,9 +5375,9 @@ var VerticalLayout = function (_a) {
                             backgroundRepeat: "no-repeat",
                             backgroundSize: "cover",
                             backgroundPosition: "center",
-                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { padding: "1rem 2rem 3rem 2rem" }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Layout.Header, { style: { display: "flex", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}), props.menuProps && ((0, jsx_runtime_1.jsx)(Menu_1.default, __assign({ mode: "horizontal" }, props.menuProps, { style: __assign({ flex: 1, minWidth: 0, fontSize: 16, fontWeight: 700 }, props.menuProps.style) })))] }), headerChildren] }) }), (0, jsx_runtime_1.jsx)(antd_1.Layout.Content, { style: {
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { padding: getLayoutPadding() }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Layout.Header, { style: { display: "flex", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}), props.menuProps && ((0, jsx_runtime_1.jsx)(Menu_1.default, __assign({ mode: "horizontal" }, props.menuProps, { style: __assign({ flex: 1, minWidth: 0, fontSize: 16, fontWeight: 700 }, props.menuProps.style) })))] }), headerChildren] }) }), (0, jsx_runtime_1.jsx)(antd_1.Layout.Content, { style: {
                             background: "#f3f3f3 url(".concat(getContentBackgroundImage(), ") top left"),
-                            padding: "2rem",
+                            padding: contentChildren && "2rem",
                             flex: 1,
                             zIndex: 1,
                         }, children: contentChildren })] })] }));
@@ -5453,9 +5461,20 @@ var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "./node_modules
 var antd_1 = __webpack_require__(/*! antd */ "antd");
 var Typography_1 = __importDefault(__webpack_require__(/*! ../Typography/Typography */ "./src/components/ui/Typography/Typography.tsx"));
 var Space_1 = __importDefault(__webpack_require__(/*! ../Space/Space */ "./src/components/ui/Space/Space.tsx"));
+var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
 var Avatar = function (_a) {
     var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(Space_1.default, { size: 0, children: (0, jsx_runtime_1.jsxs)("div", { style: __assign({}, (props.userId && { background: "#ebe8e8", borderRadius: 20 })), children: [(0, jsx_runtime_1.jsx)(antd_1.Avatar, __assign({ style: __assign({ marginRight: props.userId && -3 }, props.style) }, props, { children: props.children })), props.userId && ((0, jsx_runtime_1.jsx)(Typography_1.default.Text, { strong: true, style: { paddingInline: 8 }, children: props.userId.toUpperCase() }))] }) }));
+    var token = (0, antd_style_1.useTheme)();
+    var getBackgroundColor = function () {
+        if (token.appThemeMode === "light") {
+            return "#bbbbbb57";
+        }
+        return "#8e8e8e57";
+    };
+    return ((0, jsx_runtime_1.jsx)(Space_1.default, { size: 0, children: (0, jsx_runtime_1.jsxs)("div", { style: __assign({}, (props.userId && {
+                background: getBackgroundColor(),
+                borderRadius: 20,
+            })), children: [(0, jsx_runtime_1.jsx)(antd_1.Avatar, __assign({ style: __assign({ marginRight: props.userId && -3 }, props.style) }, props, { children: props.children })), props.userId && ((0, jsx_runtime_1.jsx)(Typography_1.default.Text, { strong: true, style: { paddingInline: "10px" }, children: props.userId.toUpperCase() }))] }) }));
 };
 exports["default"] = Avatar;
 
@@ -5590,6 +5609,7 @@ var antd_1 = __webpack_require__(/*! antd */ "antd");
 var VerticalLayout_1 = __webpack_require__(/*! ../../layout/VerticalLayout/VerticalLayout */ "./src/components/layout/VerticalLayout/VerticalLayout.tsx");
 var react_1 = __webpack_require__(/*! react */ "react");
 var defaultTheme_1 = __webpack_require__(/*! ../ConfigProvider/defaultTheme */ "./src/components/ui/ConfigProvider/defaultTheme.ts");
+var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
 /**
  * A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
  */
@@ -5597,9 +5617,9 @@ var Breadcrumb = function (_a) {
     var props = __rest(_a, []);
     var context = (0, react_1.useContext)(VerticalLayout_1.VerticalLayoutContext); // context to check if its nested - its possible that the user can use the header without the VerticalLayout
     var isNestedInLayout = Boolean(context); // check if nested or not to handle colors
-    var useToken = antd_1.theme.useToken;
-    var globalToken = useToken(); // get the default, antd tokens
-    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(); // get the default, overwritten tokens
+    var globalToken = antd_1.theme.useToken(); // get the default, antd tokens
+    var token = (0, antd_style_1.useTheme)();
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(token.appThemeMode); // get the default, overwritten tokens
     return ((0, jsx_runtime_1.jsx)(antd_1.ConfigProvider, { theme: {
             token: __assign(__assign({}, defaultTheme.token), globalToken.token),
             components: {
@@ -5932,11 +5952,14 @@ var ConfigProvider = function (_a) {
     var props = __rest(_a, []);
     var _d = (0, useAcaciaColors_1.useAcaciaColors)(), colors = _d.colors, generate = _d.generate;
     var _e = (0, useAcaciaConfig_1.useAcaciaConfig)(), borderRadius = _e.borderRadius, padding = _e.padding;
-    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)();
     var mergedToken = __assign(__assign({}, customTheme_1.CustomTheme), props.customToken);
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(mergedToken.appThemeMode);
     return ((0, jsx_runtime_1.jsx)(antd_style_1.ThemeProvider, { customToken: mergedToken, children: (0, jsx_runtime_1.jsx)(antd_1.ConfigProvider, __assign({}, props, { theme: {
                 token: __assign(__assign({}, defaultTheme.token), (_b = props.theme) === null || _b === void 0 ? void 0 : _b.token),
                 components: __assign(__assign({}, defaultTheme.components), (_c = props.theme) === null || _c === void 0 ? void 0 : _c.components),
+                algorithm: mergedToken.appThemeMode === "light"
+                    ? antd_1.theme.defaultAlgorithm
+                    : antd_1.theme.darkAlgorithm,
             }, children: props.children })) }));
 };
 ConfigProvider.ConfigContext = context_1.ConfigContext;
@@ -5964,15 +5987,15 @@ __webpack_require__(/*! @fontsource-variable/inter */ "./node_modules/@fontsourc
 __webpack_require__(/*! @fontsource-variable/outfit */ "./node_modules/@fontsource-variable/outfit/index.css");
 __webpack_require__(/*! @fontsource-variable/roboto-flex */ "./node_modules/@fontsource-variable/roboto-flex/index.css");
 // classic theme
-function useGetDefaultTheme() {
+function useGetDefaultTheme(appThemeMode) {
     var colors = (0, useAcaciaColors_1.useAcaciaColors)().colors;
     var _a = (0, useAcaciaConfig_1.useAcaciaConfig)(), borderRadius = _a.borderRadius, padding = _a.padding;
     return (0, react_1.useMemo)(function () {
         return {
             token: {
                 colorPrimary: "#427e7b", // your custom default
-                colorText: "#080808",
-                colorTextTertiary: "#757C7C",
+                colorText: appThemeMode === "light" ? "#080808" : "#eaeaea",
+                colorTextTertiary: appThemeMode === "light" ? "#757C7C" : "#cecece",
                 fontFamily: "'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
                 borderRadius: borderRadius.primary,
                 borderRadiusLG: borderRadius.primary,
@@ -6564,7 +6587,6 @@ var react_1 = __webpack_require__(/*! react */ "react");
 var VerticalLayout_1 = __webpack_require__(/*! ../../layout/VerticalLayout/VerticalLayout */ "./src/components/layout/VerticalLayout/VerticalLayout.tsx");
 var defaultTheme_1 = __webpack_require__(/*! ../ConfigProvider/defaultTheme */ "./src/components/ui/ConfigProvider/defaultTheme.ts");
 var colorize_1 = __webpack_require__(/*! @mirawision/colorize */ "./node_modules/@mirawision/colorize/index.js");
-var ts_pattern_1 = __webpack_require__(/*! ts-pattern */ "./node_modules/ts-pattern/dist/index.cjs");
 var colors_util_1 = __webpack_require__(/*! ../../../utils/colors.util */ "./src/utils/colors.util.ts");
 var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
 var useStyle = (0, antd_style_1.createStyles)(function (_a) {
@@ -6577,19 +6599,9 @@ var Menu = function (_a) {
     var _b = _a.showRightBorder, showRightBorder = _b === void 0 ? true : _b, props = __rest(_a, ["showRightBorder"]);
     var context = (0, react_1.useContext)(VerticalLayout_1.VerticalLayoutContext); // context to check if its nested - its possible that the user can use the header without the VerticalLayout
     var isNestedInLayout = Boolean(context); // check if nested or not to handle colors
-    var useToken = antd_1.theme.useToken;
-    var globalToken = useToken(); // get the default, antd tokens
+    var globalToken = antd_1.theme.useToken(); // get the default, antd tokens
     var menuStyles = useStyle().styles;
-    var editOpacity = function (type, color) {
-        return (0, ts_pattern_1.match)(type)
-            .with("hex", function () {
-            return (0, colors_util_1.hexToRGBA)(color, 30);
-        })
-            .with("rgba", function () {
-            return (0, colorize_1.changeOpacity)(color, 0.3);
-        })
-            .exhaustive();
-    };
+    var token = (0, antd_style_1.useTheme)();
     var selectedItemColor = (0, react_1.useMemo)(function () {
         if (isNestedInLayout) {
             var blended = (0, colorize_1.blendMultipleColors)(context.gradients.map(function (item) {
@@ -6602,12 +6614,12 @@ var Menu = function (_a) {
             return {
                 menuColor: context === null || context === void 0 ? void 0 : context.accentColor,
                 menuBgColor: (0, colorize_1.isValidHEXColor)(color)
-                    ? editOpacity("hex", color)
-                    : editOpacity("rgba", color),
+                    ? (0, colors_util_1.editOpacity)("hex", color)
+                    : (0, colors_util_1.editOpacity)("rgba", color),
             };
         }
     }, [context === null || context === void 0 ? void 0 : context.accentColor, isNestedInLayout]);
-    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(); // get the default, overwritten tokens
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(token.appThemeMode); // get the default, overwritten tokens
     return ((0, jsx_runtime_1.jsx)(antd_1.ConfigProvider, { theme: {
             token: __assign(__assign({}, defaultTheme.token), globalToken.token),
             components: {
@@ -6688,18 +6700,22 @@ var antd_1 = __webpack_require__(/*! antd */ "antd");
 var defaultTheme_1 = __webpack_require__(/*! ../ConfigProvider/defaultTheme */ "./src/components/ui/ConfigProvider/defaultTheme.ts");
 var colors_util_1 = __webpack_require__(/*! ../../../utils/colors.util */ "./src/utils/colors.util.ts");
 var colorize_1 = __webpack_require__(/*! @mirawision/colorize */ "./node_modules/@mirawision/colorize/index.js");
+var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
 var Pagination = function (_a) {
     var _b = _a.selectedStyle, selectedStyle = _b === void 0 ? "solid" : _b, props = __rest(_a, ["selectedStyle"]);
     var useToken = antd_1.theme.useToken;
     var globalToken = useToken(); // get the default, antd tokens
-    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(); // get the default, overwritten tokens
+    var token = (0, antd_style_1.useTheme)();
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(token.appThemeMode); // get the default, overwritten tokens
     return ((0, jsx_runtime_1.jsx)(antd_1.ConfigProvider, { theme: {
             token: __assign(__assign({}, defaultTheme.token), globalToken.token),
             components: {
                 Pagination: __assign(__assign({}, defaultTheme.components.Pagination), (selectedStyle === "solid"
                     ? {
                         itemActiveBg: globalToken.token.colorPrimary,
-                        itemActiveColor: (0, colors_util_1.renderBlackOrWhiteText)(globalToken.token.colorPrimary),
+                        itemActiveColor: token.appThemeMode === "light"
+                            ? (0, colors_util_1.renderBlackOrWhiteText)(globalToken.token.colorPrimary)
+                            : "white",
                         itemActiveColorHover: (0, colorize_1.tint)((0, colors_util_1.renderBlackOrWhiteText)(globalToken.token.colorPrimary), 0.3),
                     }
                     : {})),
@@ -6749,10 +6765,39 @@ exports["default"] = Panel;
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
 var Space_1 = __importDefault(__webpack_require__(/*! ../Space/Space */ "./src/components/ui/Space/Space.tsx"));
 var usePanelStyles_1 = __webpack_require__(/*! ./usePanelStyles */ "./src/components/ui/Panel/usePanelStyles.tsx");
+var react_1 = __webpack_require__(/*! react */ "react");
+var VerticalLayout_1 = __webpack_require__(/*! ../../layout/VerticalLayout/VerticalLayout */ "./src/components/layout/VerticalLayout/VerticalLayout.tsx");
+var colorize_1 = __webpack_require__(/*! @mirawision/colorize */ "./node_modules/@mirawision/colorize/index.js");
+var colors_util_1 = __webpack_require__(/*! ../../../utils/colors.util */ "./src/utils/colors.util.ts");
 function Panel(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var _k = _a.position, position = _k === void 0 ? "left" : _k, props = __rest(_a, ["position"]);
-    var _l = (0, usePanelStyles_1.usePanelStyles)(), styles = _l.styles, cx = _l.cx;
+    var context = (0, react_1.useContext)(VerticalLayout_1.VerticalLayoutContext); // context to check if its nested - its possible that the user can use the header without the VerticalLayout
+    var isNestedInLayout = Boolean(context); // check if nested or not to handle colors
+    var selectedItemColor = (0, react_1.useMemo)(function () {
+        if (isNestedInLayout) {
+            var blended = (0, colorize_1.blendMultipleColors)(context.gradients.map(function (item) {
+                return {
+                    color: item,
+                    weight: 1,
+                };
+            }));
+            var color = (0, colorize_1.shade)(blended, 0.5);
+            return {
+                menuColor: context === null || context === void 0 ? void 0 : context.accentColor,
+                menuBgColor: (0, colorize_1.isValidHEXColor)(color)
+                    ? (0, colors_util_1.editOpacity)("hex", color)
+                    : (0, colors_util_1.editOpacity)("rgba", color),
+            };
+        }
+        return {
+            menuColor: null,
+            menuBgColor: null,
+        };
+    }, [context === null || context === void 0 ? void 0 : context.accentColor, isNestedInLayout]);
+    var _l = (0, usePanelStyles_1.usePanelStyles)({
+        color: selectedItemColor.menuBgColor,
+    }), styles = _l.styles, cx = _l.cx;
     return ((0, jsx_runtime_1.jsx)("div", { className: cx(position !== "none" && styles.outerPanel, position === "left" && styles.outerPanelLeft, position === "right" && styles.outerPanelRight, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.outerContainerClassName), style: __assign({}, (_c = props === null || props === void 0 ? void 0 : props.styles) === null || _c === void 0 ? void 0 : _c.outerContainerStyles), children: (0, jsx_runtime_1.jsxs)("div", { className: cx(styles.panelBase, (_d = props === null || props === void 0 ? void 0 : props.classNames) === null || _d === void 0 ? void 0 : _d.panelBaseClassName), style: __assign({}, (_e = props === null || props === void 0 ? void 0 : props.styles) === null || _e === void 0 ? void 0 : _e.panelBaseStyles), children: [(0, jsx_runtime_1.jsx)("div", { className: cx(styles.panelBody, (_f = props === null || props === void 0 ? void 0 : props.classNames) === null || _f === void 0 ? void 0 : _f.panelBodyClassName), style: __assign({}, (_g = props === null || props === void 0 ? void 0 : props.styles) === null || _g === void 0 ? void 0 : _g.panelBodyStyles), children: (0, jsx_runtime_1.jsx)(Space_1.default, { orientation: "vertical", children: props.children }) }), props.footer && ((0, jsx_runtime_1.jsx)("div", { className: cx(styles.panelFooter, (_h = props === null || props === void 0 ? void 0 : props.classNames) === null || _h === void 0 ? void 0 : _h.panelFooterClassName), style: __assign({}, (_j = props === null || props === void 0 ? void 0 : props.styles) === null || _j === void 0 ? void 0 : _j.panelFooterStyles), children: props.footer }))] }) }));
 }
 
@@ -6774,9 +6819,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.usePanelStyles = void 0;
 var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
-exports.usePanelStyles = (0, antd_style_1.createStyles)(function (_a) {
+exports.usePanelStyles = (0, antd_style_1.createStyles)(function (_a, props) {
+    var _b;
     var css = _a.css;
-    var outerPanelBase = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        position: relative;\n        z-index: 2;\n        &::before {\n        content: \"\";\n        position: absolute;\n        width: 80%;\n        height: 12px;\n        top: -7px;\n        z-index: -1;\n        border-radius: 3px 6px 6px 0;\n        background: #9cafb7;\n        }\n    "], ["\n        position: relative;\n        z-index: 2;\n        &::before {\n        content: \"\";\n        position: absolute;\n        width: 80%;\n        height: 12px;\n        top: -7px;\n        z-index: -1;\n        border-radius: 3px 6px 6px 0;\n        background: #9cafb7;\n        }\n    "])));
+    var outerPanelBase = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        position: relative;\n        z-index: 2;\n        &::before {\n        content: \"\";\n        position: absolute;\n        width: 80%;\n        height: 12px;\n        top: -7px;\n        z-index: -1;\n        border-radius: 3px 6px 6px 0;\n        background: ", "; \n        }\n    "], ["\n        position: relative;\n        z-index: 2;\n        &::before {\n        content: \"\";\n        position: absolute;\n        width: 80%;\n        height: 12px;\n        top: -7px;\n        z-index: -1;\n        border-radius: 3px 6px 6px 0;\n        background: ", "; \n        }\n    "])), (_b = props.color) !== null && _b !== void 0 ? _b : "#9cafb7");
     var panelBase = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        border-radius: 3px;\n        background: #EFF3F3;\n        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n    "], ["\n        border-radius: 3px;\n        background: #EFF3F3;\n        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n    "])));
     var panelBody = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 1rem;    \n    "], ["\n        padding: 1rem;    \n    "])));
     var panelFooter = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        background: #e2e7e8;\n        border-top: 1px solid #dadada;\n    "], ["\n        background: #e2e7e8;\n        border-top: 1px solid #dadada;\n    "])));
@@ -6792,6 +6838,78 @@ exports.usePanelStyles = (0, antd_style_1.createStyles)(function (_a) {
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 
+/***/ },
+
+/***/ "./src/components/ui/Popconfirm/Popconfirm.tsx"
+/*!*****************************************************!*\
+  !*** ./src/components/ui/Popconfirm/Popconfirm.tsx ***!
+  \*****************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
+var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
+var antd_1 = __webpack_require__(/*! antd */ "antd");
+var defaultTheme_1 = __webpack_require__(/*! ../ConfigProvider/defaultTheme */ "./src/components/ui/ConfigProvider/defaultTheme.ts");
+var Popconfirm = function (_a) {
+    var props = __rest(_a, []);
+    var token = (0, antd_style_1.useTheme)();
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(token.appThemeMode); // get the default, overwritten tokens
+    var globalToken = antd_1.theme.useToken(); // get the default, antd tokens
+    return ((0, jsx_runtime_1.jsx)(antd_1.ConfigProvider, { theme: {
+            token: __assign(__assign({}, defaultTheme.token), globalToken.token),
+            components: {
+                Popconfirm: {
+                    colorBgElevated: token.darkPopover && "#161616c4",
+                },
+            },
+        }, children: (0, jsx_runtime_1.jsx)(antd_1.Popconfirm, __assign({ cancelButtonProps: {
+                type: "text",
+                styles: {
+                    content: {
+                        color: token.darkPopover && (0, defaultTheme_1.useGetDefaultTheme)("dark").token.colorText,
+                    },
+                },
+            } }, props, { styles: {
+                container: {
+                    backgroundColor: token.darkPopover && "#161616c4",
+                    backdropFilter: token.darkPopover && "blur(3px)",
+                },
+                title: {
+                    color: token.darkPopover && (0, defaultTheme_1.useGetDefaultTheme)("dark").token.colorText,
+                },
+                content: {
+                    color: token.darkPopover && (0, defaultTheme_1.useGetDefaultTheme)("dark").token.colorText,
+                },
+            } })) }));
+};
+exports["default"] = Popconfirm;
+
+
 /***/ },
 
 /***/ "./src/components/ui/Radio/Button.tsx"
@@ -7150,13 +7268,15 @@ var colorize_1 = __webpack_require__(/*! @mirawision/colorize */ "./node_modules
 var react_1 = __webpack_require__(/*! react */ "react");
 var VerticalLayout_1 = __webpack_require__(/*! ../../layout/VerticalLayout/VerticalLayout */ "./src/components/layout/VerticalLayout/VerticalLayout.tsx");
 var defaultTheme_1 = __webpack_require__(/*! ../ConfigProvider/defaultTheme */ "./src/components/ui/ConfigProvider/defaultTheme.ts");
+var antd_style_1 = __webpack_require__(/*! antd-style */ "antd-style");
 function Tabs(_a) {
     var _b = _a.type, type = _b === void 0 ? "line" : _b, props = __rest(_a, ["type"]);
     var context = (0, react_1.useContext)(VerticalLayout_1.VerticalLayoutContext);
     var isNestedInLayout = Boolean(context); // for when tabs are nested in Layout
     var useToken = antd_1.theme.useToken;
     var globalToken = useToken(); // get the default, antd tokens
-    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(); // get the default, overwritten tokens
+    var token = (0, antd_style_1.useTheme)();
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(token.appThemeMode); // get the default, overwritten tokens
     return ((0, jsx_runtime_1.jsx)(antd_1.ConfigProvider, { theme: {
             token: __assign(__assign(__assign({}, defaultTheme.token), globalToken.token), (isNestedInLayout
                 ? {
@@ -7352,11 +7472,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
 var antd_1 = __webpack_require__(/*! antd */ "antd");
 var useTypographyStyles_1 = __webpack_require__(/*! ./useTypographyStyles */ "./src/components/ui/Typography/useTypographyStyles.ts");
 var typographyUtil_1 = __webpack_require__(/*! ../../../theme/typographyUtil */ "./src/theme/typographyUtil.ts");
+var Space_1 = __importDefault(__webpack_require__(/*! ../Space/Space */ "./src/components/ui/Space/Space.tsx"));
 var TypographyToken = {
     fontSizeHeading1: typographyUtil_1.typographyUtil.fontSize.h1,
     fontSizeHeading2: typographyUtil_1.typographyUtil.fontSize.h2,
@@ -7366,9 +7490,9 @@ var TypographyToken = {
     fontWeightStrong: 600,
 };
 var Title = function (_a) {
-    var children = _a.children, _b = _a.level, level = _b === void 0 ? 1 : _b, color = _a.color, antdProps = __rest(_a, ["children", "level", "color"]);
+    var children = _a.children, _b = _a.level, level = _b === void 0 ? 1 : _b, color = _a.color, _c = _a.showPointer, showPointer = _c === void 0 ? true : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? "start" : _d, props = __rest(_a, ["children", "level", "color", "showPointer", "iconPosition"]);
     var typoStyles = (0, useTypographyStyles_1.useTypographyStyles)(color).styles;
-    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Title, __assign({ className: "\n\t\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t\t").concat(typoStyles.title, "\n\t\t\t\t\t").concat(typoStyles["titleH".concat(level)], "\n\t\t\t\t"), level: level }, antdProps, { children: children })));
+    return ((0, jsx_runtime_1.jsxs)(Space_1.default, { orientation: "horizontal", children: [iconPosition === "start" && props.icon, (0, jsx_runtime_1.jsx)(antd_1.Typography.Title, __assign({ className: "\n\t\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t\t").concat(typoStyles.title, "\n\t\t\t\t\t").concat(typoStyles["titleH".concat(level)], "\n\t\t\t\t\t").concat(showPointer ? "pointer" : "", "\n\t\t\t\t"), level: level }, props, { children: children })), iconPosition === "end" && props.icon] }));
 };
 var Text = function (_a) {
     var children = _a.children, _b = _a.level, level = _b === void 0 ? 2 : _b, color = _a.color, antdProps = __rest(_a, ["children", "level", "color"]);
@@ -7378,22 +7502,22 @@ var Text = function (_a) {
 var Emphasis = function (_a) {
     var children = _a.children, color = _a.color, props = __rest(_a, ["children", "color"]);
     var typoStyles = (0, useTypographyStyles_1.useTypographyStyles)(color).styles;
-    return ((0, jsx_runtime_1.jsx)(Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.emphasis, " \n\t\t\t"), color: color }, props, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.emphasis, "\n\t\t\t"), color: color }, props, { children: children })));
 };
 var Caption = function (_a) {
     var children = _a.children, color = _a.color, antdProps = __rest(_a, ["children", "color"]);
     var typoStyles = (0, useTypographyStyles_1.useTypographyStyles)(color).styles;
-    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.caption, " \n\t\t\t") }, antdProps, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.caption, "\n\t\t\t") }, antdProps, { children: children })));
 };
 var Overline = function (_a) {
     var children = _a.children, color = _a.color, antdProps = __rest(_a, ["children", "color"]);
     var typoStyles = (0, useTypographyStyles_1.useTypographyStyles)(color).styles;
-    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.overline, " \n\t\t\t") }, antdProps, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.overline, "\n\t\t\t") }, antdProps, { children: children })));
 };
 var Paragraph = function (_a) {
     var children = _a.children, color = _a.color, antdProps = __rest(_a, ["children", "color"]);
     var typoStyles = (0, useTypographyStyles_1.useTypographyStyles)(color).styles;
-    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.textBody2, " \n\t\t\t\t").concat(typoStyles.paragraph, "\n\t\t\t") }, antdProps, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(antd_1.Typography.Text, __assign({ className: "\n\t\t\t\t".concat(typoStyles.common, "\n\t\t\t\t").concat(typoStyles.textBody2, "\n\t\t\t\t").concat(typoStyles.paragraph, "\n\t\t\t") }, antdProps, { children: children })));
 };
 /**
  * Basic text writing, including headings, body text, lists, and more.
@@ -7685,7 +7809,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.useScreenSize = exports.useAcaciaConfig = exports.useFoucHandler = exports.useAcaciaColors = exports.VerticalHeader = exports.VerticalLayout = exports.Panel = exports.Space = exports.Menu = exports.Avatar = exports.Tabs = exports.Tag = exports.Card = exports.DatePicker = exports.TimePicker = exports.Typography = exports.Pagination = exports.Dropdown = exports.Input = exports.Switch = exports.Select = exports.Segmented = exports.Radio = exports.Checkbox = exports.Breadcrumb = exports.ConfigProvider = exports.Badge = exports.Button = void 0;
+exports.useScreenSize = exports.useAcaciaConfig = exports.useFoucHandler = exports.useAcaciaColors = exports.VerticalContent = exports.VerticalHeader = exports.VerticalLayout = exports.Popconfirm = exports.Panel = exports.Space = exports.Menu = exports.Avatar = exports.Tabs = exports.Tag = exports.Card = exports.DatePicker = exports.TimePicker = exports.Typography = exports.Pagination = exports.Dropdown = exports.Input = exports.Switch = exports.Select = exports.Segmented = exports.Radio = exports.Checkbox = exports.Breadcrumb = exports.ConfigProvider = exports.Badge = exports.Button = void 0;
 var Button_1 = __webpack_require__(/*! ./components/ui/Button/Button */ "./src/components/ui/Button/Button.tsx");
 Object.defineProperty(exports, "Button", ({ enumerable: true, get: function () { return __importDefault(Button_1).default; } }));
 var Badge_1 = __webpack_require__(/*! ./components/ui/Badge/Badge */ "./src/components/ui/Badge/Badge.tsx");
@@ -7730,10 +7854,14 @@ var Space_1 = __webpack_require__(/*! ./components/ui/Space/Space */ "./src/comp
 Object.defineProperty(exports, "Space", ({ enumerable: true, get: function () { return __importDefault(Space_1).default; } }));
 var Panel_1 = __webpack_require__(/*! ./components/ui/Panel/Panel */ "./src/components/ui/Panel/Panel.tsx");
 Object.defineProperty(exports, "Panel", ({ enumerable: true, get: function () { return __importDefault(Panel_1).default; } }));
+var Popconfirm_1 = __webpack_require__(/*! ./components/ui/Popconfirm/Popconfirm */ "./src/components/ui/Popconfirm/Popconfirm.tsx");
+Object.defineProperty(exports, "Popconfirm", ({ enumerable: true, get: function () { return __importDefault(Popconfirm_1).default; } }));
 var VerticalLayout_1 = __webpack_require__(/*! ./components/layout/VerticalLayout/VerticalLayout */ "./src/components/layout/VerticalLayout/VerticalLayout.tsx");
 Object.defineProperty(exports, "VerticalLayout", ({ enumerable: true, get: function () { return __importDefault(VerticalLayout_1).default; } }));
 var VerticalHeader_1 = __webpack_require__(/*! ./components/layout/VerticalLayout/VerticalHeader */ "./src/components/layout/VerticalLayout/VerticalHeader.tsx");
 Object.defineProperty(exports, "VerticalHeader", ({ enumerable: true, get: function () { return __importDefault(VerticalHeader_1).default; } }));
+var VerticalContent_1 = __webpack_require__(/*! ./components/layout/VerticalLayout/VerticalContent */ "./src/components/layout/VerticalLayout/VerticalContent.tsx");
+Object.defineProperty(exports, "VerticalContent", ({ enumerable: true, get: function () { return __importDefault(VerticalContent_1).default; } }));
 // hooks
 var useAcaciaColors_1 = __webpack_require__(/*! ./hooks/useAcaciaColors */ "./src/hooks/useAcaciaColors.tsx");
 Object.defineProperty(exports, "useAcaciaColors", ({ enumerable: true, get: function () { return useAcaciaColors_1.useAcaciaColors; } }));
@@ -7762,6 +7890,8 @@ exports.CustomTheme = {
     headingFontFamily: '"Roboto Flex Variable", "Roboto Flex", "Segoe UI", sans-serif',
     appTheme: "classic",
     logo: "TEST LOGO",
+    appThemeMode: "light",
+    darkPopover: false,
 };
 
 
@@ -7807,7 +7937,7 @@ function DefaultLogo() {
     var token = (0, antd_style_1.useTheme)();
     var useToken = antd_1.theme.useToken;
     var globalToken = useToken(); // get the default, antd tokens
-    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(); // get the default, overwritten tokens
+    var defaultTheme = (0, defaultTheme_1.useGetDefaultTheme)(token.appThemeMode); // get the default, overwritten tokens
     var getLogo = function () {
         var _a, _b, _c;
         if (typeof token.logo === "string") {
@@ -7909,10 +8039,11 @@ exports.useAcaciaToken = useAcaciaToken;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.renderBlackOrWhiteText = exports.generate = void 0;
+exports.editOpacity = exports.renderBlackOrWhiteText = exports.generate = void 0;
 exports.hexToRGBA = hexToRGBA;
 var colors_1 = __webpack_require__(/*! @ant-design/colors */ "./node_modules/@ant-design/colors/es/index.js");
 var colorize_1 = __webpack_require__(/*! @mirawision/colorize */ "./node_modules/@mirawision/colorize/index.js");
+var ts_pattern_1 = __webpack_require__(/*! ts-pattern */ "./node_modules/ts-pattern/dist/index.cjs");
 var generate = function (color, darken) {
     var colors = color
         ? (0, colors_1.generate)(color, {
@@ -7946,6 +8077,17 @@ function hexToRGBA(hex, opacityPercent) {
     var b = Number.parseInt(hex.slice(5, 7), 16);
     return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 }
+var editOpacity = function (type, color) {
+    return (0, ts_pattern_1.match)(type)
+        .with("hex", function () {
+        return hexToRGBA(color, 30);
+    })
+        .with("rgba", function () {
+        return (0, colorize_1.changeOpacity)(color, 0.3);
+    })
+        .exhaustive();
+};
+exports.editOpacity = editOpacity;
 
 
 /***/ },