@metropolle/design-system 1.0.0-beta.2026.1.25.11.9200926 → 1.0.0-beta.2026.1.25.404.088068c

package/dist/css/components.css

@@ -3814,12 +3814,12 @@ html[data-theme="light"] .mds-profile-card__verified-trigger {
   right: calc(100% + 12px);
   transform: translateY(-50%);
   padding: 32px 40px;
-  /* Liquid Glass popup - increased blur for better legibility */
-  background: rgba(20, 20, 30, 0.82);
-  backdrop-filter: blur(40px) saturate(180%);
-  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  /* Same style as hamburger menu - frosted glass effect */
+  background: rgba(28, 28, 30, 0.95);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
   border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow:
     0 16px 48px rgba(0, 0, 0, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
@@ -3828,12 +3828,10 @@ html[data-theme="light"] .mds-profile-card__verified-trigger {
 }
 
 html[data-theme="light"] .mds-profile-card__verified-popup {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(40px) saturate(180%);
-  -webkit-backdrop-filter: blur(40px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.98);
   box-shadow:
-    0 16px 48px rgba(0, 0, 0, 0.12),
+    0 16px 48px rgba(0, 0, 0, 0.15),
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
@@ -4409,16 +4407,12 @@ html[data-theme="light"] .mds-verification-check-card--passed .mds-verification-
   min-width: 0;
 }
 
-.mds-verification-check-item .mds-btn {
+/* Verification action buttons - uses Button component */
+.mds-verification-check-item .mds-button {
   flex-shrink: 0;
   margin-left: auto;
 }
 
-.mds-verification-check-item .mds-btn--sm {
-  padding: 6px 12px;
-  font-size: 0.75rem;
-}
-
 html[data-theme="light"] .mds-verification-score-header {
   background: rgba(0, 180, 140, 0.05);
   border-color: rgba(0, 180, 140, 0.15);

package/dist/react/components/react/VerificationScore/VerificationScore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationScore.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/VerificationScore/VerificationScore.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,kDAAkD;IAClD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,uBAAuB,GAAG,IAAI,CAAC;IAC9E,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8ED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAY,EACZ,MAAM,EACN,OAAe,EACf,KAAY,EACZ,OAAgB,EAChB,cAAc,EACd,YAAmB,EACnB,SAAc,EACd,oBAAoB,EACpB,WAAW,GACZ,EAAE,0BAA0B,2CAkF5B;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"VerificationScore.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/VerificationScore/VerificationScore.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,kDAAkD;IAClD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,uBAAuB,GAAG,IAAI,CAAC;IAC9E,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8ED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAY,EACZ,MAAM,EACN,OAAe,EACf,KAAY,EACZ,OAAgB,EAChB,cAAc,EACd,YAAmB,EACnB,SAAc,EACd,oBAAoB,EACpB,WAAW,GACZ,EAAE,0BAA0B,2CAkF5B;AAED,eAAe,qBAAqB,CAAC"}

package/dist/react/index.esm.js

@@ -1468,6 +1468,26 @@ const GlassCard = forwardRef(({ glassStyle = 'liquid', intensity = 'md', theme,
 });
 GlassCard.displayName = 'GlassCard';
 
+/**
+ * Button Component
+ *
+ * Componente de botão com variantes baseadas no design system Metropolle.
+ * Inclui suporte a glass morphism e estados de loading.
+ */
+const Button = forwardRef(({ variant = 'primary', size = 'md', loading = false, leftIcon, rightIcon, fullWidth = false, className, children, disabled, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    return (jsxRuntimeExports.jsxs("button", { ref: ref, className: cn(
+        // Base classes
+        'mds-button', `mds-button--${variant}`, `mds-button--${size}`, 
+        // State classes
+        fullWidth && 'mds-button--full-width', loading && 'mds-button--loading', isDisabled && 'mds-button--disabled', className), disabled: isDisabled, ...props, children: [leftIcon && !loading && (jsxRuntimeExports.jsx("span", { className: "mds-button__icon mds-button__icon--left", children: leftIcon })), loading && (jsxRuntimeExports.jsx("span", { className: "mds-button__icon mds-button__icon--left", children: jsxRuntimeExports.jsx(LoadingSpinner, {}) })), jsxRuntimeExports.jsx("span", { className: "mds-button__content", children: children }), rightIcon && !loading && (jsxRuntimeExports.jsx("span", { className: "mds-button__icon mds-button__icon--right", children: rightIcon }))] }));
+});
+Button.displayName = 'Button';
+/**
+ * Loading Spinner Component
+ */
+const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntimeExports.jsx("circle", { className: "mds-spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", opacity: "0.25" }), jsxRuntimeExports.jsx("circle", { className: "mds-spinner__path", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40 20", strokeLinecap: "round" })] }));
+
 // =============================================================================
 // Icons
 // =============================================================================
@@ -1482,7 +1502,7 @@ function VerificationCheckItem({ check, action, variant }) {
         return (jsxRuntimeExports.jsxs("div", { className: "mds-verification-check-item mds-verification-check-item--compact", children: [jsxRuntimeExports.jsx("span", { className: `mds-verification-check-icon ${check.passed ? 'mds-verification-check-icon--passed' : ''}`, children: check.passed ? '\u2713' : '\u2717' }), jsxRuntimeExports.jsx("span", { className: "mds-verification-check-label", children: check.description })] }));
     }
     // Card version - with points and optional action
-    return (jsxRuntimeExports.jsxs("div", { className: `mds-verification-check-item ${check.passed ? 'mds-verification-check-item--passed' : ''}`, children: [jsxRuntimeExports.jsx("div", { className: "mds-verification-check-status", children: check.passed ? Icons$1.checkCircle : Icons$1.circle }), jsxRuntimeExports.jsxs("div", { className: "mds-verification-check-content", children: [jsxRuntimeExports.jsx("span", { className: "mds-verification-check-description", children: check.description }), jsxRuntimeExports.jsx("span", { className: "mds-verification-check-points", children: check.passed ? '1 point' : '0 points' })] }), action && !check.passed && (jsxRuntimeExports.jsx("button", { type: "button", className: "mds-btn mds-btn--secondary mds-btn--sm", onClick: action.onClick, disabled: action.disabled, children: action.label }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: `mds-verification-check-item ${check.passed ? 'mds-verification-check-item--passed' : ''}`, children: [jsxRuntimeExports.jsx("div", { className: "mds-verification-check-status", children: check.passed ? Icons$1.checkCircle : Icons$1.circle }), jsxRuntimeExports.jsxs("div", { className: "mds-verification-check-content", children: [jsxRuntimeExports.jsx("span", { className: "mds-verification-check-description", children: check.description }), jsxRuntimeExports.jsx("span", { className: "mds-verification-check-points", children: check.passed ? '1 point' : '0 points' })] }), action && !check.passed && (jsxRuntimeExports.jsx(Button, { variant: "primary", size: "sm", onClick: action.onClick, disabled: action.disabled, children: action.label }))] }));
 }
 // =============================================================================
 // Main Component
@@ -1693,26 +1713,6 @@ className, children = 'Metropolle', ...props }, ref) => {
 });
 BrandLogo.displayName = 'BrandLogo';
 
-/**
- * Button Component
- *
- * Componente de botão com variantes baseadas no design system Metropolle.
- * Inclui suporte a glass morphism e estados de loading.
- */
-const Button = forwardRef(({ variant = 'primary', size = 'md', loading = false, leftIcon, rightIcon, fullWidth = false, className, children, disabled, ...props }, ref) => {
-    const isDisabled = disabled || loading;
-    return (jsxRuntimeExports.jsxs("button", { ref: ref, className: cn(
-        // Base classes
-        'mds-button', `mds-button--${variant}`, `mds-button--${size}`, 
-        // State classes
-        fullWidth && 'mds-button--full-width', loading && 'mds-button--loading', isDisabled && 'mds-button--disabled', className), disabled: isDisabled, ...props, children: [leftIcon && !loading && (jsxRuntimeExports.jsx("span", { className: "mds-button__icon mds-button__icon--left", children: leftIcon })), loading && (jsxRuntimeExports.jsx("span", { className: "mds-button__icon mds-button__icon--left", children: jsxRuntimeExports.jsx(LoadingSpinner, {}) })), jsxRuntimeExports.jsx("span", { className: "mds-button__content", children: children }), rightIcon && !loading && (jsxRuntimeExports.jsx("span", { className: "mds-button__icon mds-button__icon--right", children: rightIcon }))] }));
-});
-Button.displayName = 'Button';
-/**
- * Loading Spinner Component
- */
-const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntimeExports.jsx("circle", { className: "mds-spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", opacity: "0.25" }), jsxRuntimeExports.jsx("circle", { className: "mds-spinner__path", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40 20", strokeLinecap: "round" })] }));
-
 /**
  * Select Component (Design System)
  *