@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

package/dist/components/core/common/SolidAccountSettings/SolidAccountSettings.js

@@ -1,42 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from "primereact/dialog";
 import { useEffect, useMemo, useState } from "react";
 import { SolidPersonalInfo } from "./SolidPersonalInfo";
 import { SolidChangePassword } from "./SolidChangePassword";
 import { SolidVersionInfo } from "./SolidVersionInfo";
-import styles from './SolidAccountSettings.module.css';
+import styles from "./SolidAccountSettings.module.css";
 import { useLazyGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi";
 export var SolidAccountSettings = function (_a) {
     var showProfileSettingsDialog = _a.showProfileSettingsDialog, setShowProfileSettingsDialog = _a.setShowProfileSettingsDialog;
-    var _b = useState({ key: "personal_info", label: "Persnoal Info" }), setting = _b[0], setSetting = _b[1];
+    var _b = useState("personal_info"), settingKey = _b[0], setSettingKey = _b[1];
     var _c = useLazyGetSolidSettingsQuery(), trigger = _c[0], solidSettingsData = _c[1].data;
     useEffect(function () {
-        trigger(""); // Fetch settings on mount
-    }, []);
+        trigger("");
+    }, [trigger]);
     var settings = [
-        {
-            label: "Persnoal Info",
-            key: "personal_info",
-            icon: "pi pi-user-edit"
-        },
-        // {
-        //     label: "Notification",
-        //     key: "notifications",
-        //     icon: "pi pi-bell"
-        // },
-        {
-            label: "Change Password",
-            key: "change_password",
-            icon: "pi pi-key"
-        },
-        {
-            label: "About",
-            key: "about",
-            icon: "pi pi-info-circle"
-        },
+        { label: "Personal Info", key: "personal_info" },
+        { label: "Change Password", key: "change_password" },
+        { label: "About", key: "about" },
     ];
     var renderSettingComponent = useMemo(function () {
-        switch (setting.key) {
+        switch (settingKey) {
             case "personal_info":
                 return _jsx(SolidPersonalInfo, {});
             case "change_password":
@@ -46,11 +28,9 @@ export var SolidAccountSettings = function (_a) {
             default:
                 return null;
         }
-    }, [setting.key, solidSettingsData]);
-    return (_jsx(Dialog, { header: _jsx("h5", { className: 'm-0 font-bold', children: "Account Settings" }), headerClassName: "px-4 py-3 secondary-border-bottom", contentClassName: "p-0", visible: showProfileSettingsDialog, className: "solid-account-setting-main", style: { width: '60vw' }, onHide: function () {
-            if (!showProfileSettingsDialog)
-                return;
-            setShowProfileSettingsDialog(false);
-        }, draggable: false, children: _jsxs("div", { className: "grid m-0", children: [_jsx("div", { className: "col-2 md:col-3 p-3 ".concat(styles.SolidSettingTabWrapper), children: _jsx("div", { className: "flex flex-column gap-1", children: settings.map(function (option) { return (_jsxs("div", { className: "w-full flex align-items-center gap-2 text-start ".concat(styles.SolidSettingTab, " ").concat(option.key === setting.key ? styles.SolidActiveSetting : styles.SolidDeActiveSetting), onClick: function () { return setSetting(option); }, children: [_jsx("span", { className: option.icon }), _jsx("span", { className: "hidden sm:inline", children: option.label })] }, option.key)); }) }) }), _jsx("div", { className: "col-9 py-3 px-4 ".concat(styles.SolidAccountSettingFormWrapper), children: renderSettingComponent })] }) }));
+    }, [settingKey, solidSettingsData]);
+    if (!showProfileSettingsDialog)
+        return null;
+    return (_jsx("div", { className: styles.backdrop, role: "presentation", onClick: function () { return setShowProfileSettingsDialog(false); }, children: _jsxs("section", { className: styles.modal, role: "dialog", "aria-modal": "true", "aria-labelledby": "solid-account-settings-title", onClick: function (event) { return event.stopPropagation(); }, children: [_jsxs("header", { className: styles.header, children: [_jsxs("div", { children: [_jsx("h2", { id: "solid-account-settings-title", className: styles.title, children: "Account Settings" }), _jsx("p", { className: styles.subtitle, children: "Manage your profile and security settings." })] }), _jsx("button", { type: "button", className: styles.closeButton, onClick: function () { return setShowProfileSettingsDialog(false); }, "aria-label": "Close account settings", children: "\u00D7" })] }), _jsx("div", { className: styles.tabsLine, role: "tablist", "aria-label": "Account setting sections", children: settings.map(function (option) { return (_jsx("button", { type: "button", role: "tab", "aria-selected": option.key === settingKey, className: "".concat(styles.tabTrigger, " ").concat(option.key === settingKey ? styles.tabActive : ""), onClick: function () { return setSettingKey(option.key); }, children: option.label }, option.key)); }) }), _jsx("div", { className: styles.formWrapper, children: renderSettingComponent })] }) }));
 };
 //# sourceMappingURL=SolidAccountSettings.js.map

package/dist/components/core/common/SolidAccountSettings/SolidAccountSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidAccountSettings.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["\n\nimport { Dialog } from \"primereact/dialog\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { SolidPersonalInfo } from \"./SolidPersonalInfo\";\nimport { SolidChangePassword } from \"./SolidChangePassword\";\nimport { SolidVersionInfo } from \"./SolidVersionInfo\";\nimport styles from './SolidAccountSettings.module.css'\nimport { useSelector } from \"react-redux\";\nimport { useLazyGetSolidSettingsQuery } from \"../../../../redux/api/solidSettingsApi\";\n\nexport const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => {\n    const [setting, setSetting] = useState({ key: \"personal_info\", label: \"Persnoal Info\" });\n\n    const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();\n    useEffect(() => {\n        trigger(\"\") // Fetch settings on mount\n    }, [])\n\n    const settings = [\n        {\n            label: \"Persnoal Info\",\n            key: \"personal_info\",\n            icon: \"pi pi-user-edit\"\n        },\n        // {\n        //     label: \"Notification\",\n        //     key: \"notifications\",\n        //     icon: \"pi pi-bell\"\n        // },\n        {\n            label: \"Change Password\",\n            key: \"change_password\",\n            icon: \"pi pi-key\"\n        },\n        {\n            label: \"About\",\n            key: \"about\",\n            icon: \"pi pi-info-circle\"\n        },\n    ]\n\n    const renderSettingComponent = useMemo(() => {\n        switch (setting.key) {\n            case \"personal_info\":\n                return <SolidPersonalInfo />;\n            case \"change_password\":\n                return <SolidChangePassword solidSettingsData={solidSettingsData} />;\n            case \"about\":\n                return <SolidVersionInfo />;\n            default:\n                return null;\n        }\n    }, [setting.key, solidSettingsData]);\n\n    return (\n        <Dialog\n            header={<h5 className='m-0 font-bold'>Account Settings</h5>}\n            headerClassName=\"px-4 py-3 secondary-border-bottom\"\n            contentClassName=\"p-0\"\n            visible={showProfileSettingsDialog}\n            className=\"solid-account-setting-main\"\n            style={{ width: '60vw' }}\n            onHide={() => {\n                if (!showProfileSettingsDialog) return;\n                setShowProfileSettingsDialog(false);\n            }}\n            draggable={false}\n        >\n            <div className=\"grid m-0\">\n                <div className={`col-2 md:col-3 p-3 ${styles.SolidSettingTabWrapper}`}>\n                    <div className=\"flex flex-column gap-1\">\n                        {settings.map((option) => (\n                            <div\n                                key={option.key}\n                                className={`w-full flex align-items-center gap-2 text-start ${styles.SolidSettingTab} ${option.key === setting.key ? styles.SolidActiveSetting : styles.SolidDeActiveSetting}`}\n                                onClick={() => setSetting(option)}\n                            >\n                                <span className={option.icon}></span>\n                                <span className=\"hidden sm:inline\">{option.label}</span>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n                <div className={`col-9 py-3 px-4 ${styles.SolidAccountSettingFormWrapper}`}>\n                    {renderSettingComponent}\n                    {/* <div className=\"p-3 secondary-border-bottom\">\n                        <h5 className=\"m-0\"></h5>\n                    </div>\n                    <div className=\"py-3 px-4 h-full\">\n                        {renderSettingComponent()}\n                    </div> */}\n                </div>\n            </div>\n        </Dialog>\n    )\n}"]}
+{"version":3,"file":"SolidAccountSettings.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAEtF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAAgE;QAA9D,yBAAyB,+BAAA,EAAE,4BAA4B,kCAAA;IACtF,IAAA,KAA8B,QAAQ,CAAC,eAAe,CAAC,EAAtD,UAAU,QAAA,EAAE,aAAa,QAA6B,CAAC;IAExD,IAAA,KAAyC,4BAA4B,EAAE,EAAtE,OAAO,QAAA,EAAU,iBAAiB,aAAoC,CAAC;IAC9E,SAAS,CAAC;QACR,OAAO,CAAC,EAAE,CAAC,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAM,QAAQ,GAAG;QACf,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE;QAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,EAAE;QACpD,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;KACjC,CAAC;IAEF,IAAM,sBAAsB,GAAG,OAAO,CAAC;QACrC,QAAQ,UAAU,EAAE;YAClB,KAAK,eAAe;gBAClB,OAAO,KAAC,iBAAiB,KAAG,CAAC;YAC/B,KAAK,iBAAiB;gBACpB,OAAO,KAAC,mBAAmB,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CAAC;YACvE,KAAK,OAAO;gBACV,OAAO,KAAC,gBAAgB,KAAG,CAAC;YAC9B;gBACE,OAAO,IAAI,CAAC;SACf;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpC,IAAI,CAAC,yBAAyB;QAAE,OAAO,IAAI,CAAC;IAE5C,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,cAAM,OAAA,4BAA4B,CAAC,KAAK,CAAC,EAAnC,CAAmC,YACrG,mBACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACD,8BAA8B,EAC9C,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,eAAe,EAAE,EAAvB,CAAuB,aAE3C,kBAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,aAC9B,0BACE,aAAI,EAAE,EAAC,8BAA8B,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,iCAExD,EACL,YAAG,SAAS,EAAE,MAAM,CAAC,QAAQ,2DAAgD,IACzE,EACN,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,cAAM,OAAA,4BAA4B,CAAC,KAAK,CAAC,EAAnC,CAAmC,gBACvC,wBAAwB,uBAG5B,IACF,EAET,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,SAAS,gBAAY,0BAA0B,YAClF,QAAQ,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,CACxB,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,MAAM,CAAC,GAAG,KAAK,UAAU,EACxC,SAAS,EAAE,UAAG,MAAM,CAAC,UAAU,cAAI,MAAM,CAAC,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EACtF,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAzB,CAAyB,YAEvC,MAAM,CAAC,KAAK,IAPR,MAAM,CAAC,GAAG,CAQR,CACV,EAXyB,CAWzB,CAAC,GACE,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,sBAAsB,GAAO,IAC1D,GACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { SolidPersonalInfo } from \"./SolidPersonalInfo\";\nimport { SolidChangePassword } from \"./SolidChangePassword\";\nimport { SolidVersionInfo } from \"./SolidVersionInfo\";\nimport styles from \"./SolidAccountSettings.module.css\";\nimport { useLazyGetSolidSettingsQuery } from \"../../../../redux/api/solidSettingsApi\";\n\nexport const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => {\n  const [settingKey, setSettingKey] = useState(\"personal_info\");\n\n  const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();\n  useEffect(() => {\n    trigger(\"\");\n  }, [trigger]);\n\n  const settings = [\n    { label: \"Personal Info\", key: \"personal_info\" },\n    { label: \"Change Password\", key: \"change_password\" },\n    { label: \"About\", key: \"about\" },\n  ];\n\n  const renderSettingComponent = useMemo(() => {\n    switch (settingKey) {\n      case \"personal_info\":\n        return <SolidPersonalInfo />;\n      case \"change_password\":\n        return <SolidChangePassword solidSettingsData={solidSettingsData} />;\n      case \"about\":\n        return <SolidVersionInfo />;\n      default:\n        return null;\n    }\n  }, [settingKey, solidSettingsData]);\n\n  if (!showProfileSettingsDialog) return null;\n\n  return (\n    <div className={styles.backdrop} role=\"presentation\" onClick={() => setShowProfileSettingsDialog(false)}>\n      <section\n        className={styles.modal}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"solid-account-settings-title\"\n        onClick={(event) => event.stopPropagation()}\n      >\n        <header className={styles.header}>\n          <div>\n            <h2 id=\"solid-account-settings-title\" className={styles.title}>\n              Account Settings\n            </h2>\n            <p className={styles.subtitle}>Manage your profile and security settings.</p>\n          </div>\n          <button\n            type=\"button\"\n            className={styles.closeButton}\n            onClick={() => setShowProfileSettingsDialog(false)}\n            aria-label=\"Close account settings\"\n          >\n            ×\n          </button>\n        </header>\n\n        <div className={styles.tabsLine} role=\"tablist\" aria-label=\"Account setting sections\">\n          {settings.map((option) => (\n            <button\n              key={option.key}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={option.key === settingKey}\n              className={`${styles.tabTrigger} ${option.key === settingKey ? styles.tabActive : \"\"}`}\n              onClick={() => setSettingKey(option.key)}\n            >\n              {option.label}\n            </button>\n          ))}\n        </div>\n\n        <div className={styles.formWrapper}>{renderSettingComponent}</div>\n      </section>\n    </div>\n  );\n};\n"]}

package/dist/components/core/common/SolidAccountSettings/SolidAccountSettings.module.css

@@ -1,59 +1,547 @@
-.SolidSettingTab {
-    border-radius: 6px;
-    padding: 10px 16px;
-    cursor: pointer;
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgba(2, 6, 23, 0.52);
+  backdrop-filter: blur(2px);
+  display: grid;
+  place-items: center;
+  padding: 16px;
 }
 
-.SolidActiveSetting {
-    background-color: var(--surface-hover);
-    color: var(--primary-color);
-    font-weight: 600;
+.modal {
+  width: min(540px, calc(100vw - 20px));
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--card-foreground);
+  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.35);
+  overflow: hidden;
 }
 
-.SolidDeActiveSetting {
-    background-color: transparent;
-    font-weight: 400;
+.header {
+  min-height: 62px;
+  border-bottom: 1px solid var(--border);
+  padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-.SolidDeActiveSetting:hover {
-    background-color: var(--surface-hover);
+.title {
+  margin: 0;
+  color: var(--card-foreground);
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 650;
+  letter-spacing: -0.01em;
 }
 
-.SolidSettingTabWrapper {
-    border-right: 1px solid var(--primary-light-color);
-    /* background-color: var(--surface-c); */
+.subtitle {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--muted-foreground);
 }
 
-.SolidAccountSettingFormWrapper {
-    min-height: 60vh;
-    max-height: 80vh;
-    overflow-y: hidden;
+.closeButton {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
 }
 
-.SolidRemoveProfile {
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 28px;
-    width: 28px;
-    border-radius: 50%;
-    background-color: #fff;
-    cursor: pointer;
-    transition: 0.3s linear;
-    color: #ef4444;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+.closeButton:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
-.SolidRemoveProfile:hover {
-    transform: scale(1.1);
+.tabsLine {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border-bottom: 0;
+  padding: 0 14px;
 }
 
+.tabTrigger {
+  border: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 12px 0 10px;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+
+.tabTrigger:hover {
+  color: var(--foreground);
+}
+
+.tabActive {
+  color: var(--foreground);
+  font-weight: 600;
+  border-bottom-color: var(--foreground);
+}
+
+.formWrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+  background: var(--card);
+}
+
+.toast {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 11px;
+  margin-bottom: 12px;
+  background: var(--card);
+}
+
+.toastTitle {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.toastBody {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  line-height: 1.25;
+}
+
+.toastClose {
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+
+.toastClose:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.toastError {
+  border-color: color-mix(in srgb, #ef4444 46%, var(--border));
+}
+
+.toastSuccess {
+  border-color: color-mix(in srgb, #22c55e 46%, var(--border));
+}
+
+.toastWarn {
+  border-color: color-mix(in srgb, #f59e0b 46%, var(--border));
+}
+
+.toastInfo {
+  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
+}
+
+.confirmBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  background: rgba(2, 6, 23, 0.45);
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+.confirmModal {
+  width: min(360px, calc(100vw - 24px));
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--card-foreground);
+  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.35);
+}
+
+.confirmHeader {
+  border-bottom: 1px solid var(--border);
+  padding: 12px 14px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.confirmBody {
+  padding: 14px;
+  font-size: 13px;
+  color: var(--muted-foreground);
+}
+
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 14px 14px;
+}
+
+@media (max-width: 900px) {
+  .tabsLine {
+    gap: 12px;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
+
+.accountForm {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.accountScroll {
+  min-height: 0;
+  padding: 12px 12px 0;
+}
+
+.sectionTitle {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--foreground);
+}
+
+.avatarRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatarShell {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: 999px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--muted);
+}
+
+.avatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatarFallback {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.avatarRemove {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, #ef4444 40%, var(--border));
+  color: #ef4444;
+  background: var(--card);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.avatarRemove:hover {
+  background: #ef4444;
+  color: #fff;
+}
+
+.dashedDivider {
+  margin: 14px 0;
+  border-bottom: 1px dashed var(--border);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.field label {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  font-weight: 500;
+}
+
+.input {
+  width: 100%;
+  height: 34px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--background);
+  color: var(--foreground);
+  padding: 0 11px;
+  font-size: 13px;
+}
+
+.input:disabled {
+  opacity: 0.78;
+  cursor: not-allowed;
+  background: color-mix(in srgb, var(--muted) 35%, transparent);
+}
 
-@media(max-width:991px) {
-    .SolidSettingTab {
-        padding: 10px 12px !important;
-    }
-}
+.input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+.roleBox {
+  min-height: 34px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--background);
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.roleChip {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 11px;
+  color: var(--muted-foreground);
+  background: var(--card);
+}
+
+.footerActions {
+  border-top: 1px solid var(--border);
+  padding: 10px 12px 12px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.passwordHintWrap {
+  margin: 8px;
+}
+
+.accountPrimaryBtn.solid-btn {
+  font-weight: 500;
+}
+
+.accountSecondaryBtn.solid-btn {
+  --solid-btn-bg: var(--card);
+  --solid-btn-fg: var(--foreground);
+  --solid-btn-border: var(--border);
+  font-weight: 500;
+}
+
+.accountSecondaryBtn.solid-btn:hover {
+  background: color-mix(in srgb, var(--accent) 75%, transparent);
+}
+
+.passwordWrap {
+  position: relative;
+}
+
+.passwordWrap .input {
+  padding-right: 56px;
+}
+
+.passwordToggle {
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 11px;
+  font-weight: 600;
+  height: 24px;
+  padding: 0 8px;
+  cursor: pointer;
+}
+
+.passwordToggle:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.errorText {
+  margin: 0;
+  color: #ef4444;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.formStack {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+.versionPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.versionCaption {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.versionList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.versionRow {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--muted) 20%, transparent);
+  padding: 9px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.versionName {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.versionHint {
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+
+.versionTags {
+  display: flex;
+  gap: 6px;
+}
+
+.versionTag {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 11px;
+  background: var(--card);
+}
+
+.repoLocal {
+  border-color: color-mix(in srgb, #f59e0b 48%, var(--border));
+  color: #b45309;
+}
+
+.repoNpm {
+  border-color: color-mix(in srgb, #22c55e 48%, var(--border));
+  color: #15803d;
+}
+
+.versionLoaderWrap {
+  min-height: 200px;
+  display: grid;
+  place-items: center;
+}
+
+.versionError {
+  color: var(--muted-foreground);
+  margin: 0;
+  font-size: 13px;
+}
+
+.switchRow {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  width: 42px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchTrack {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--muted) 60%, transparent);
+  border: 1px solid var(--border);
+  transition: 120ms ease;
+}
+
+.switchTrack::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #fff;
+  transition: 120ms ease;
+  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.2);
+}
+
+.switch input:checked + .switchTrack {
+  background: color-mix(in srgb, var(--primary) 70%, transparent);
+  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
+}
+
+.switch input:checked + .switchTrack::after {
+  left: 20px;
+}
+
+@media (max-width: 760px) {
+  .modal {
+    width: min(98vw, 540px);
+  }
+}