@semiont/frontend 0.3.0 → 0.3.1

package/standalone/apps/frontend/.next/server/chunks/8255.js

@@ -514,7 +514,7 @@ Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_re
 ;
 Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 53925));
 ;
-Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 48804));
+Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 76552));
 
 
 /***/ }),
@@ -566,7 +566,7 @@ var react = __webpack_require__(71277);
 // EXTERNAL MODULE: ./src/i18n/routing.ts
 var routing = __webpack_require__(99704);
 // EXTERNAL MODULE: ../../packages/react-ui/dist/index.mjs + 27 modules
-var dist = __webpack_require__(48804);
+var dist = __webpack_require__(76552);
 ;// __barrel_optimize__?names=KeyboardShortcutsHelpModal,useDoubleKeyPress,useKeyboardShortcuts!=!../../packages/react-ui/dist/index.mjs
 
 
@@ -987,7 +987,7 @@ __webpack_require__.d(__webpack_exports__, {
 // EXTERNAL MODULE: ../../node_modules/next/dist/server/route-modules/app-page/vendored/ssr/react-jsx-runtime.js
 var react_jsx_runtime = __webpack_require__(92692);
 // EXTERNAL MODULE: ../../packages/react-ui/dist/index.mjs + 27 modules
-var dist = __webpack_require__(48804);
+var dist = __webpack_require__(76552);
 ;// __barrel_optimize__?names=SessionExpiryBanner!=!../../packages/react-ui/dist/index.mjs
 
 
@@ -1029,33 +1029,28 @@ function SessionExpiredModal() {
     process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && (0,react.useEffect)(()=>{
         // Listen for 401 unauthorized events
         const cleanup = (0,dist.onAuthEvent)(dist.AUTH_EVENTS.UNAUTHORIZED, ()=>{
-            // Show modal when 401 error occurs
             setShowModal(true);
         });
         return cleanup;
     }, []);
     const handleSignIn = ()=>{
-        // Sign in and redirect back to current page
         (0,next_auth_react.signIn)(undefined, {
             callbackUrl: window.location.pathname
         });
     };
     const handleClose = ()=>{
         setShowModal(false);
-        // Redirect to home page
         window.location.href = '/';
     };
     return /*#__PURE__*/ (0,react_jsx_runtime.jsx)(transition/* Transition */.e, {
         appear: true,
         show: showModal,
-        as: react.Fragment,
         children: /*#__PURE__*/ (0,react_jsx_runtime.jsxs)(dialog/* Dialog */.lG, {
             as: "div",
-            className: "relative z-[10000]",
+            className: "semiont-modal",
             onClose: handleClose,
             children: [
                 /*#__PURE__*/ (0,react_jsx_runtime.jsx)(transition/* TransitionChild */._, {
-                    as: react.Fragment,
                     enter: "ease-out duration-200",
                     enterFrom: "opacity-0",
                     enterTo: "opacity-100",
@@ -1063,15 +1058,14 @@ function SessionExpiredModal() {
                     leaveFrom: "opacity-100",
                     leaveTo: "opacity-0",
                     children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                        className: "fixed inset-0 bg-black/50 backdrop-blur-sm"
+                        className: "semiont-modal__backdrop"
                     })
                 }),
                 /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                    className: "fixed inset-0 overflow-y-auto",
+                    className: "semiont-modal__container",
                     children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                        className: "flex min-h-full items-center justify-center p-4",
+                        className: "semiont-modal__wrapper",
                         children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)(transition/* TransitionChild */._, {
-                            as: react.Fragment,
                             enter: "ease-out duration-200",
                             enterFrom: "opacity-0 scale-95",
                             enterTo: "opacity-100 scale-100",
@@ -1079,53 +1073,60 @@ function SessionExpiredModal() {
                             leaveFrom: "opacity-100 scale-100",
                             leaveTo: "opacity-0 scale-95",
                             children: /*#__PURE__*/ (0,react_jsx_runtime.jsxs)(dialog/* DialogPanel */.Lj, {
-                                className: "w-full max-w-md transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow-xl transition-all",
+                                className: "semiont-modal__panel semiont-modal__panel--medium",
                                 children: [
+                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                        className: "semiont-modal__icon-wrapper",
+                                        children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                            className: "semiont-modal__icon",
+                                            style: {
+                                                background: 'linear-gradient(to bottom right, var(--semiont-color-red-100, #fee2e2), var(--semiont-color-red-300, #fca5a5))'
+                                            },
+                                            children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("svg", {
+                                                style: {
+                                                    width: '1.5rem',
+                                                    height: '1.5rem',
+                                                    color: 'var(--semiont-color-red-600, #dc2626)'
+                                                },
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                viewBox: "0 0 24 24",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("path", {
+                                                    strokeLinecap: "round",
+                                                    strokeLinejoin: "round",
+                                                    strokeWidth: 2,
+                                                    d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                                                })
+                                            })
+                                        })
+                                    }),
                                     /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                        className: "p-6 pb-4",
+                                        className: "semiont-modal__content",
                                         children: [
-                                            /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                                className: "flex items-center gap-3 mb-4",
-                                                children: [
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                                                        className: "flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center",
-                                                        children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("svg", {
-                                                            className: "w-6 h-6 text-red-600 dark:text-red-400",
-                                                            fill: "none",
-                                                            stroke: "currentColor",
-                                                            viewBox: "0 0 24 24",
-                                                            xmlns: "http://www.w3.org/2000/svg",
-                                                            children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("path", {
-                                                                strokeLinecap: "round",
-                                                                strokeLinejoin: "round",
-                                                                strokeWidth: 2,
-                                                                d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                                                            })
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)(dialog/* DialogTitle */.L3, {
-                                                        className: "text-xl font-semibold text-gray-900 dark:text-white",
-                                                        children: "Session Expired"
-                                                    })
-                                                ]
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)(dialog/* DialogTitle */.L3, {
+                                                className: "semiont-modal__title semiont-modal__title--centered",
+                                                children: "Session Expired"
                                             }),
-                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)(dialog/* DialogDescription */.rr, {
-                                                className: "text-gray-600 dark:text-gray-300",
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("p", {
+                                                className: "semiont-modal__description",
                                                 children: "Your session has expired for security reasons. Please sign in again to continue working."
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                        className: "px-6 pb-6 flex gap-3 justify-end",
+                                        className: "semiont-modal__actions",
                                         children: [
                                             /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
+                                                type: "button",
                                                 onClick: handleClose,
-                                                className: "px-4 py-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 transition-colors",
+                                                className: "semiont-button--secondary semiont-button--flex",
                                                 children: "Go to Home"
                                             }),
                                             /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
+                                                type: "button",
                                                 onClick: handleSignIn,
-                                                className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors",
+                                                className: "semiont-button--primary semiont-button--flex",
                                                 children: "Sign In Again"
                                             })
                                         ]
@@ -1172,28 +1173,19 @@ function PermissionDeniedModal() {
     };
     const handleSwitchAccount = ()=>{
         setShowModal(false);
-        // Sign out and sign in with different account
         (0,next_auth_react.signIn)(undefined, {
             callbackUrl: window.location.pathname
         });
     };
-    const handleRequestAccess = ()=>{
-        setShowModal(false);
-        // In the future, this would open a request access form
-        // For now, just close the modal
-        alert('Access request feature coming soon. Please contact your administrator.');
-    };
     return /*#__PURE__*/ (0,react_jsx_runtime.jsx)(transition/* Transition */.e, {
         appear: true,
         show: showModal,
-        as: react.Fragment,
         children: /*#__PURE__*/ (0,react_jsx_runtime.jsxs)(dialog/* Dialog */.lG, {
             as: "div",
-            className: "relative z-[10000]",
+            className: "semiont-modal",
             onClose: handleGoBack,
             children: [
                 /*#__PURE__*/ (0,react_jsx_runtime.jsx)(transition/* TransitionChild */._, {
-                    as: react.Fragment,
                     enter: "ease-out duration-200",
                     enterFrom: "opacity-0",
                     enterTo: "opacity-100",
@@ -1201,15 +1193,14 @@ function PermissionDeniedModal() {
                     leaveFrom: "opacity-100",
                     leaveTo: "opacity-0",
                     children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                        className: "fixed inset-0 bg-black/50 backdrop-blur-sm"
+                        className: "semiont-modal__backdrop"
                     })
                 }),
                 /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                    className: "fixed inset-0 overflow-y-auto",
+                    className: "semiont-modal__container",
                     children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                        className: "flex min-h-full items-center justify-center p-4",
+                        className: "semiont-modal__wrapper",
                         children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)(transition/* TransitionChild */._, {
-                            as: react.Fragment,
                             enter: "ease-out duration-200",
                             enterFrom: "opacity-0 scale-95",
                             enterTo: "opacity-100 scale-100",
@@ -1217,111 +1208,132 @@ function PermissionDeniedModal() {
                             leaveFrom: "opacity-100 scale-100",
                             leaveTo: "opacity-0 scale-95",
                             children: /*#__PURE__*/ (0,react_jsx_runtime.jsxs)(dialog/* DialogPanel */.Lj, {
-                                className: "w-full max-w-md transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow-xl transition-all",
+                                className: "semiont-modal__panel semiont-modal__panel--medium",
                                 children: [
+                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                        className: "semiont-modal__icon-wrapper",
+                                        children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                            className: "semiont-modal__icon",
+                                            children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("svg", {
+                                                style: {
+                                                    width: '1.5rem',
+                                                    height: '1.5rem',
+                                                    color: 'var(--semiont-color-amber-600, #d97706)'
+                                                },
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                viewBox: "0 0 24 24",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("path", {
+                                                    strokeLinecap: "round",
+                                                    strokeLinejoin: "round",
+                                                    strokeWidth: 2,
+                                                    d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                                                })
+                                            })
+                                        })
+                                    }),
                                     /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                        className: "p-6 pb-4",
+                                        className: "semiont-modal__content",
                                         children: [
-                                            /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                                className: "flex items-center gap-3 mb-4",
-                                                children: [
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                                                        className: "flex-shrink-0 w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center",
-                                                        children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("svg", {
-                                                            className: "w-6 h-6 text-amber-600 dark:text-amber-400",
-                                                            fill: "none",
-                                                            stroke: "currentColor",
-                                                            viewBox: "0 0 24 24",
-                                                            xmlns: "http://www.w3.org/2000/svg",
-                                                            children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("path", {
-                                                                strokeLinecap: "round",
-                                                                strokeLinejoin: "round",
-                                                                strokeWidth: 2,
-                                                                d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                                                            })
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)(dialog/* DialogTitle */.L3, {
-                                                        className: "text-xl font-semibold text-gray-900 dark:text-white",
-                                                        children: "Access Denied"
-                                                    })
-                                                ]
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)(dialog/* DialogTitle */.L3, {
+                                                className: "semiont-modal__title semiont-modal__title--centered",
+                                                children: "Access Denied"
                                             }),
-                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)(dialog/* DialogDescription */.rr, {
-                                                className: "text-gray-600 dark:text-gray-300 mb-4",
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("p", {
+                                                className: "semiont-modal__description",
                                                 children: deniedAction
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            padding: '0.75rem',
+                                            backgroundColor: 'var(--semiont-bg-secondary)',
+                                            borderRadius: 'var(--semiont-radius-md, 0.375rem)',
+                                            border: '1px solid var(--semiont-border-primary)',
+                                            fontSize: 'var(--semiont-text-sm, 0.875rem)',
+                                            marginBottom: '1rem'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("p", {
+                                                style: {
+                                                    color: 'var(--semiont-text-secondary)',
+                                                    marginBottom: '0.5rem'
+                                                },
+                                                children: "This could be because:"
                                             }),
-                                            /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                                className: "bg-gray-50 dark:bg-gray-900/50 rounded-lg p-3 text-sm",
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("ul", {
+                                                style: {
+                                                    listStyle: 'disc',
+                                                    listStylePosition: 'inside',
+                                                    color: 'var(--semiont-text-tertiary)',
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: '0.25rem'
+                                                },
                                                 children: [
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("p", {
-                                                        className: "text-gray-600 dark:text-gray-400 mb-2",
-                                                        children: "This could be because:"
+                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("li", {
+                                                        children: "You don't have the required permissions"
                                                     }),
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("ul", {
-                                                        className: "list-disc list-inside text-gray-500 dark:text-gray-500 space-y-1",
-                                                        children: [
-                                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("li", {
-                                                                children: "You don't have the required permissions"
-                                                            }),
-                                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("li", {
-                                                                children: "The resource is restricted to specific users or teams"
-                                                            }),
-                                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("li", {
-                                                                children: "Your account type doesn't include this feature"
-                                                            })
-                                                        ]
+                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("li", {
+                                                        children: "The resource is restricted to specific users or teams"
+                                                    }),
+                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("li", {
+                                                        children: "Your account type doesn't include this feature"
                                                     })
                                                 ]
+                                            })
+                                        ]
+                                    }),
+                                    session?.user?.email && /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("p", {
+                                        style: {
+                                            fontSize: 'var(--semiont-text-xs, 0.75rem)',
+                                            color: 'var(--semiont-text-tertiary)',
+                                            marginBottom: '1rem'
+                                        },
+                                        children: [
+                                            "Currently signed in as: ",
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                                                style: {
+                                                    fontWeight: 500
+                                                },
+                                                children: session.user.email
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
+                                        className: "semiont-modal__actions",
+                                        children: [
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
+                                                type: "button",
+                                                onClick: handleGoBack,
+                                                className: "semiont-button--primary semiont-button--flex",
+                                                children: "Go Back"
                                             }),
-                                            session?.user?.email && /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                                className: "mt-4 text-xs text-gray-500 dark:text-gray-400",
-                                                children: [
-                                                    "Currently signed in as: ",
-                                                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
-                                                        className: "font-medium",
-                                                        children: session.user.email
-                                                    })
-                                                ]
+                                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
+                                                type: "button",
+                                                onClick: handleGoHome,
+                                                className: "semiont-button--secondary semiont-button--flex",
+                                                children: "Go to Home"
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
-                                        className: "px-6 pb-6",
-                                        children: /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                            className: "flex flex-col gap-2",
-                                            children: [
-                                                /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                                    className: "flex gap-2",
-                                                    children: [
-                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
-                                                            onClick: handleGoBack,
-                                                            className: "flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors",
-                                                            children: "Go Back"
-                                                        }),
-                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
-                                                            onClick: handleGoHome,
-                                                            className: "flex-1 px-4 py-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors",
-                                                            children: "Go to Home"
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
-                                                    className: "flex gap-2 pt-2 border-t border-gray-200 dark:border-gray-700",
-                                                    children: [
-                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
-                                                            onClick: handleSwitchAccount,
-                                                            className: "flex-1 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 transition-colors",
-                                                            children: "Switch Account"
-                                                        }),
-                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
-                                                            onClick: handleRequestAccess,
-                                                            className: "flex-1 px-3 py-1.5 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors",
-                                                            children: "Request Access"
-                                                        })
-                                                    ]
-                                                })
-                                            ]
+                                        className: "semiont-modal__actions",
+                                        style: {
+                                            marginTop: '0.5rem',
+                                            paddingTop: '0.5rem',
+                                            borderTop: '1px solid var(--semiont-border-primary)'
+                                        },
+                                        children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)("button", {
+                                            type: "button",
+                                            onClick: handleSwitchAccount,
+                                            className: "semiont-button--secondary semiont-button--flex",
+                                            style: {
+                                                fontSize: 'var(--semiont-text-sm, 0.875rem)'
+                                            },
+                                            children: "Switch Account"
                                         })
                                     })
                                 ]
@@ -1362,7 +1374,7 @@ function PermissionDeniedModal() {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   C$z: () => (/* reexport safe */ _home_runner_work_semiont_semiont_packages_react_ui_dist_index_mjs__WEBPACK_IMPORTED_MODULE_0__.useEventSubscriptions)
 /* harmony export */ });
-/* harmony import */ var _home_runner_work_semiont_semiont_packages_react_ui_dist_index_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(48804);
+/* harmony import */ var _home_runner_work_semiont_semiont_packages_react_ui_dist_index_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(76552);
 
 
 
@@ -1452,7 +1464,7 @@ var QueryClientProvider = __webpack_require__(53970);
 // EXTERNAL MODULE: ../../node_modules/next-auth/react/index.js
 var next_auth_react = __webpack_require__(62341);
 // EXTERNAL MODULE: ../../packages/react-ui/dist/index.mjs + 27 modules
-var dist = __webpack_require__(48804);
+var dist = __webpack_require__(76552);
 ;// __barrel_optimize__?names=EventBusProvider,LiveRegionProvider,SessionProvider,ThemeProvider,ToastProvider,TranslationProvider,dispatch401Error,dispatch403Error!=!../../packages/react-ui/dist/index.mjs
 
 
@@ -2138,63 +2150,115 @@ function CookieBanner({ className = '' }) {
     if (!isVisible) return null;
     const bannerText = getBannerText();
     return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-        className: `fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg ${className}`,
+        className: className,
+        style: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 50,
+            backgroundColor: 'var(--semiont-bg-primary)',
+            borderTop: '1px solid var(--semiont-border-primary)',
+            boxShadow: 'var(--semiont-shadow-lg)'
+        },
         children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-            className: "max-w-7xl mx-auto p-4 sm:p-6",
+            style: {
+                maxWidth: '80rem',
+                margin: '0 auto',
+                padding: '1rem 1.5rem'
+            },
             children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                className: "flex flex-col space-y-4",
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
                 children: [
                     /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                        className: "flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0",
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '1.5rem',
+                            flexWrap: 'wrap'
+                        },
                         children: [
                             /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                                className: "flex-1",
+                                style: {
+                                    flex: 1,
+                                    minWidth: '300px'
+                                },
                                 children: [
                                     /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3", {
-                                        className: "text-lg font-semibold text-gray-900 mb-2",
+                                        style: {
+                                            fontSize: '1.125rem',
+                                            fontWeight: 600,
+                                            color: 'var(--semiont-text-primary)',
+                                            marginBottom: '0.5rem'
+                                        },
                                         children: bannerText.title
                                     }),
                                     /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
-                                        className: "text-sm text-gray-600 mb-2",
+                                        style: {
+                                            fontSize: 'var(--semiont-text-sm, 0.875rem)',
+                                            color: 'var(--semiont-text-secondary)',
+                                            marginBottom: '0.25rem'
+                                        },
                                         children: bannerText.description
                                     }),
                                     /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
-                                        className: "text-xs text-gray-500",
+                                        style: {
+                                            fontSize: 'var(--semiont-text-xs, 0.75rem)',
+                                            color: 'var(--semiont-text-tertiary)'
+                                        },
                                         children: bannerText.learnMore
                                     })
                                 ]
                             }),
                             /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                                className: "flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3 lg:ml-6",
+                                style: {
+                                    display: 'flex',
+                                    gap: '0.75rem',
+                                    alignItems: 'center',
+                                    flexWrap: 'wrap'
+                                },
                                 children: [
-                                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
+                                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", {
                                         type: "button",
                                         onClick: ()=>setShowDetails(!showDetails),
-                                        className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors",
-                                        children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
-                                            className: "flex items-center",
-                                            children: [
-                                                t('customize'),
-                                                showDetails ? /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_barrel_optimize_names_ChevronDownIcon_ChevronUpIcon_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {
-                                                    className: "w-4 h-4 ml-1"
-                                                }) : /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_barrel_optimize_names_ChevronDownIcon_ChevronUpIcon_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
-                                                    className: "w-4 h-4 ml-1"
-                                                })
-                                            ]
-                                        })
+                                        className: "semiont-button--secondary",
+                                        style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '0.25rem'
+                                        },
+                                        children: [
+                                            t('customize'),
+                                            showDetails ? /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_barrel_optimize_names_ChevronDownIcon_ChevronUpIcon_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {
+                                                style: {
+                                                    width: '1rem',
+                                                    height: '1rem'
+                                                }
+                                            }) : /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_barrel_optimize_names_ChevronDownIcon_ChevronUpIcon_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+                                                style: {
+                                                    width: '1rem',
+                                                    height: '1rem'
+                                                }
+                                            })
+                                        ]
                                     }),
                                     region !== 'GDPR' && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
                                         type: "button",
                                         onClick: handleRejectAll,
                                         disabled: isLoading,
-                                        className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 transition-colors",
+                                        className: "semiont-button--secondary",
                                         children: isLoading ? t('saving') : t('rejectAll')
                                     }),
                                     /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
                                         type: "button",
                                         onClick: handleAcceptAll,
                                         disabled: isLoading,
-                                        className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 transition-colors",
+                                        className: "semiont-button--primary",
                                         children: isLoading ? t('saving') : t('acceptAll')
                                     })
                                 ]
@@ -2202,57 +2266,108 @@ function CookieBanner({ className = '' }) {
                         ]
                     }),
                     showDetails && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-                        className: "border-t border-gray-200 pt-4",
+                        style: {
+                            borderTop: '1px solid var(--semiont-border-primary)',
+                            paddingTop: '1rem'
+                        },
                         children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                            className: "space-y-4",
+                            style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '1rem'
+                            },
                             children: [
                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h4", {
-                                    className: "text-base font-medium text-gray-900",
+                                    style: {
+                                        fontSize: '1rem',
+                                        fontWeight: 500,
+                                        color: 'var(--semiont-text-primary)'
+                                    },
                                     children: t('cookiePreferences')
                                 }),
                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-                                    className: "space-y-3",
+                                    style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: '0.75rem'
+                                    },
                                     children: _lib_cookies__WEBPACK_IMPORTED_MODULE_2__/* .COOKIE_CATEGORIES */ .wD.map((category)=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                                            className: "flex items-start space-x-3",
+                                            style: {
+                                                display: 'flex',
+                                                alignItems: 'flex-start',
+                                                gap: '0.75rem'
+                                            },
                                             children: [
                                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-                                                    className: "flex items-center h-5",
+                                                    style: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        height: '1.25rem'
+                                                    },
                                                     children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", {
                                                         id: `cookie-${category.id}`,
                                                         type: "checkbox",
                                                         checked: consent[category.id] || false,
                                                         onChange: ()=>handleCategoryToggle(category.id),
                                                         disabled: category.required || isLoading,
-                                                        className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded-sm disabled:opacity-50"
+                                                        style: {
+                                                            accentColor: 'var(--semiont-color-primary-600, #2563eb)'
+                                                        }
                                                     })
                                                 }),
                                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                                                    className: "flex-1 min-w-0",
+                                                    style: {
+                                                        flex: 1,
+                                                        minWidth: 0
+                                                    },
                                                     children: [
                                                         /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label", {
                                                             htmlFor: `cookie-${category.id}`,
-                                                            className: "text-sm font-medium text-gray-900 cursor-pointer",
+                                                            style: {
+                                                                fontSize: 'var(--semiont-text-sm, 0.875rem)',
+                                                                fontWeight: 500,
+                                                                color: 'var(--semiont-text-primary)',
+                                                                cursor: 'pointer'
+                                                            },
                                                             children: [
                                                                 category.name,
                                                                 category.required && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
-                                                                    className: "text-xs text-gray-500 ml-1",
+                                                                    style: {
+                                                                        fontSize: 'var(--semiont-text-xs, 0.75rem)',
+                                                                        color: 'var(--semiont-text-tertiary)',
+                                                                        marginLeft: '0.25rem'
+                                                                    },
                                                                     children: t('required')
                                                                 })
                                                             ]
                                                         }),
                                                         /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
-                                                            className: "text-xs text-gray-600 mt-1",
+                                                            style: {
+                                                                fontSize: 'var(--semiont-text-xs, 0.75rem)',
+                                                                color: 'var(--semiont-text-secondary)',
+                                                                marginTop: '0.25rem'
+                                                            },
                                                             children: category.description
                                                         }),
                                                         /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("details", {
-                                                            className: "mt-1",
+                                                            style: {
+                                                                marginTop: '0.25rem'
+                                                            },
                                                             children: [
                                                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("summary", {
-                                                                    className: "text-xs text-blue-600 cursor-pointer hover:text-blue-800",
+                                                                    style: {
+                                                                        fontSize: 'var(--semiont-text-xs, 0.75rem)',
+                                                                        color: 'var(--semiont-color-primary-600, #2563eb)',
+                                                                        cursor: 'pointer'
+                                                                    },
                                                                     children: t('viewCookies')
                                                                 }),
                                                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-                                                                    className: "mt-1 text-xs text-gray-500",
+                                                                    style: {
+                                                                        marginTop: '0.25rem',
+                                                                        fontSize: 'var(--semiont-text-xs, 0.75rem)',
+                                                                        color: 'var(--semiont-text-tertiary)'
+                                                                    },
                                                                     children: category.cookies.join(', ')
                                                                 })
                                                             ]
@@ -2263,19 +2378,24 @@ function CookieBanner({ className = '' }) {
                                         }, category.id))
                                 }),
                                 /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                                    className: "flex justify-end space-x-3 pt-4",
+                                    style: {
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                        gap: '0.75rem',
+                                        paddingTop: '1rem'
+                                    },
                                     children: [
                                         /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
                                             type: "button",
                                             onClick: ()=>setShowDetails(false),
-                                            className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+                                            className: "semiont-button--secondary",
                                             children: t('cancel')
                                         }),
                                         /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
                                             type: "button",
                                             onClick: handleSavePreferences,
                                             disabled: isLoading,
-                                            className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50",
+                                            className: "semiont-button--primary",
                                             children: isLoading ? t('saving') : t('savePreferences')
                                         })
                                     ]