@shohojdhara/atomix 0.4.7 → 0.4.8

package/scripts/cli/utils/logger.js

@@ -0,0 +1,75 @@
+/**
+ * Atomix CLI Logger
+ * Standardized logging with support for spinners and debug levels
+ */
+
+import chalk from 'chalk';
+import ora from 'ora';
+import boxen from 'boxen';
+
+const DEBUG = process.env.ATOMIX_DEBUG === 'true';
+
+export const logger = {
+  /**
+   * Log a debug message (only visible in debug mode)
+   */
+  debug: (message, data = null) => {
+    if (DEBUG) {
+      console.log(chalk.gray(`[DEBUG] ${message}`));
+      if (data) {
+        console.log(chalk.gray(JSON.stringify(data, null, 2)));
+      }
+    }
+  },
+
+  /**
+   * Log an info message
+   */
+  info: (message) => {
+    console.log(chalk.white(message));
+  },
+
+  /**
+   * Log a success message
+   */
+  success: (message) => {
+    console.log(chalk.green(`✓ ${message}`));
+  },
+
+  /**
+   * Log a warning message
+   */
+  warn: (message) => {
+    console.log(chalk.yellow(`! ${message}`));
+  },
+
+  /**
+   * Log an error message
+   */
+  error: (message) => {
+    console.error(chalk.bold.red(`\n❌ ${message}`));
+  },
+
+  /**
+   * Create and return a spinner
+   */
+  spinner: (text) => {
+    return ora({
+      text,
+      color: 'cyan'
+    });
+  },
+
+  /**
+   * Create a boxed message
+   */
+  box: (message, options = {}) => {
+    console.log(boxen(message, {
+      padding: 1,
+      margin: 1,
+      borderStyle: 'round',
+      borderColor: 'cyan',
+      ...options
+    }));
+  }
+};

package/scripts/cli/utils/validation.js

@@ -0,0 +1,71 @@
+/**
+ * Atomix CLI Validation Utilities
+ */
+
+/**
+ * Validates component names according to PascalCase convention
+ * @param {string} name - The component name to validate
+ * @returns {Object} { isValid: boolean, error?: string }
+ */
+export function validateComponentName(name) {
+  if (!name || typeof name !== 'string') {
+    return {
+      isValid: false,
+      error: 'Component name must be a non-empty string'
+    };
+  }
+
+  // Check PascalCase: starts with uppercase, only contains letters and numbers
+  if (!/^[A-Z][a-zA-Z0-9]*$/.test(name)) {
+    return {
+      isValid: false,
+      error: 'Component name must be in PascalCase (e.g., Button, CardHeader)'
+    };
+  }
+
+  // Check for reserved words
+  const reservedWords = [
+    'Component', 'React', 'Fragment', 'Suspense', 'StrictMode',
+    'Error', 'Loading', 'App', 'Root', 'Document', 'Html'
+  ];
+
+  if (reservedWords.includes(name)) {
+    return {
+      isValid: false,
+      error: `"${name}" is a reserved word. Please choose a different name.`
+    };
+  }
+
+  // Check minimum length
+  if (name.length < 2) {
+    return {
+      isValid: false,
+      error: 'Component name must be at least 2 characters long'
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validates theme names according to kebab-case convention
+ */
+export function validateThemeName(name) {
+  if (!name || typeof name !== 'string') return { isValid: false, error: 'Theme name must be a string' };
+  if (!/^[a-z][a-z0-9-]*$/.test(name)) return { isValid: false, error: 'Theme name must be kebab-case' };
+  if (/--/.test(name)) return { isValid: false, error: 'Cannot contain consecutive hyphens' };
+  if (name.endsWith('-')) return { isValid: false, error: 'Cannot end with a hyphen' };
+  return { isValid: true };
+}
+
+/**
+ * Validates SCSS/CSS color values
+ */
+export function isValidColor(color) {
+  const patterns = [
+    /^#[0-9A-F]{3,8}$/i,
+    /^(rgb|rgba|hsl|hsla)\(/i,
+    /^var\(--/
+  ];
+  return patterns.some(pattern => pattern.test(color));
+}

package/src/components/AtomixGlass/AtomixGlass.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import AtomixGlass from './AtomixGlass';
@@ -158,18 +158,52 @@ describe('AtomixGlass Component', () => {
     expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
   });
 
-  test('applies custom style', () => {
-    const customStyle = { backgroundColor: 'red' };
+  test('applies custom style to root/container layout', () => {
+    const customStyle: React.CSSProperties = { backgroundColor: 'red', position: 'fixed', top: 0, left: 0 };
     const { container } = render(
       <AtomixGlass style={customStyle}>
         <div>Content</div>
       </AtomixGlass>
     );
 
+    const root = container.querySelector('.c-atomix-glass');
     const glassContainer = container.querySelector('.c-atomix-glass__container');
+    expect(root).toHaveStyle('position: fixed');
     expect(glassContainer).toHaveStyle('background-color: rgb(255, 0, 0)');
   });
 
+  test('sets 100% width/height for fixed/sticky positioning', async () => {
+    const { container } = render(
+      <AtomixGlass style={{ position: 'fixed' }}>
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    const glassContainer = container.querySelector('.c-atomix-glass__container');
+    
+    // Use waitFor because updateAtomixGlassStyles is called imperatively inside a requestAnimationFrame loop
+    await waitFor(() => {
+      // With the new logic, fixed/sticky elements use measured sizes, 
+      // not 100% (which is for standard flow)
+      expect(glassContainer).not.toHaveStyle('--atomix-glass-container-width: 100%');
+    });
+  });
+
+  test('sets 100% width/height for standard flow (not fixed/sticky)', async () => {
+    const { container } = render(
+      <AtomixGlass>
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    const glassContainer = container.querySelector('.c-atomix-glass__container');
+    
+    await waitFor(() => {
+      expect(glassContainer).toHaveStyle('--atomix-glass-container-width: 100%');
+      expect(glassContainer).toHaveStyle('--atomix-glass-container-height: 100%');
+    });
+  });
+
   test('uses standard mode by default', () => {
     const { container } = render(
       <AtomixGlass>

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -113,6 +113,17 @@ export function AtomixGlass({
   const glassRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
+  // ── Layout hoisting ──────────────────────────────────────────────────
+  // When position is fixed/sticky the layout props must live on the ROOT
+  // `.c-atomix-glass` element so that every decorative layer (borders,
+  // backgrounds, hover effects) stays in the same stacking context.
+
+  // Extract zIndex from style so it becomes the base for ALL internal
+  // layers via --atomix-glass-base-z-index.  It must NOT be applied as a
+  // real z-index on the root element — that would break the glass effect.
+  const { zIndex: customZIndex, ...restStyle } = style;
+  const isFixedOrSticky = restStyle.position === 'fixed' || restStyle.position === 'sticky';
+
   // Use composable hook for all state and logic
   const {
     isHovered,
@@ -153,23 +164,13 @@ export function AtomixGlass({
     withLiquidBlur,
     padding,
     style,
+    isFixedOrSticky,
   });
 
   const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
 
   const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
 
-  // ── Layout hoisting ──────────────────────────────────────────────────
-  // When position is fixed/sticky the layout props must live on the ROOT
-  // `.c-atomix-glass` element so that every decorative layer (borders,
-  // backgrounds, hover effects) stays in the same stacking context.
-
-  // Extract zIndex from style so it becomes the base for ALL internal
-  // layers via --atomix-glass-base-z-index.  It must NOT be applied as a
-  // real z-index on the root element — that would break the glass effect.
-  const { zIndex: customZIndex, ...restStyle } = style;
-  const isFixedOrSticky = restStyle.position === 'fixed' || restStyle.position === 'sticky';
-
   const rootLayoutStyle = useMemo<React.CSSProperties>(() => {
     if (!isFixedOrSticky) return {};
     const { position: p, top: t, left: l, right: r, bottom: b } = restStyle;
@@ -223,21 +224,26 @@ export function AtomixGlass({
   );
 
   const adjustedSize = useMemo(() => {
-    const resolveSize = (
-      propValue: string | number | undefined,
-      styleValue: string | number | undefined,
-      measuredSize: number
-    ) => {
-      const explicitSize = propValue ?? styleValue;
-      if (explicitSize !== undefined) {
-        return typeof explicitSize === 'number' ? `${explicitSize}px` : explicitSize;
+    // Keep a reference to positionStyles to avoid unused-variable lint,
+    // but sizing is driven by explicit width/height or measured size.
+    const _position = positionStyles.position;
+
+    const resolveLength = (value: string | number | undefined, measured: number): string => {
+      if (value !== undefined) {
+        return typeof value === 'number' ? `${value}px` : value;
       }
-      return positionStyles.position === 'fixed' ? `${Math.max(measuredSize, 0)}px` : '100%';
+      if (measured > 0) {
+        return `${measured}px`;
+      }
+      return '100%';
     };
 
+    const effectiveWidth = width ?? restStyle.width;
+    const effectiveHeight = height ?? restStyle.height;
+
     return {
-      width: resolveSize(width, restStyle.width, glassSize.width),
-      height: resolveSize(height, restStyle.height, glassSize.height),
+      width: resolveLength(effectiveWidth, glassSize.width),
+      height: resolveLength(effectiveHeight, glassSize.height),
     };
   }, [
     width,
@@ -338,9 +344,10 @@ export function AtomixGlass({
       ...(customZIndex !== undefined && { '--atomix-glass-base-z-index': customZIndex }),
       '--atomix-glass-radius': `${effectiveBorderRadius}px`,
       '--atomix-glass-transform': transformStyle || 'none',
-      '--atomix-glass-position': positionStyles.position,
-      '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
-      '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
+      // Internal decorative layers are positioned relative to the root;
+      '--atomix-glass-position': rootLayoutStyle.position,
+      '--atomix-glass-top': `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
+      '--atomix-glass-left': `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
       '--atomix-glass-width': adjustedSize.width,
       '--atomix-glass-height': adjustedSize.height,
       '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
@@ -376,11 +383,12 @@ export function AtomixGlass({
     opacityValues,
     effectiveBorderRadius,
     transformStyle,
-    positionStyles,
     adjustedSize,
     isOverLight,
     overLightConfig.borderOpacity,
     customZIndex,
+    rootLayoutStyle,
+    isFixedOrSticky,
   ]);
 
   // Helper function to render background layers
@@ -417,7 +425,12 @@ export function AtomixGlass({
         ref={glassRef}
         contentRef={contentRef}
         className={className}
-        style={rootLayoutStyle}
+        style={{
+          ...restStyle,
+          ...(!isFixedOrSticky && {
+            position: 'relative',
+          }),
+        }}
         borderRadius={effectiveBorderRadius}
         displacementScale={
           effectiveWithoutEffects
@@ -462,7 +475,6 @@ export function AtomixGlass({
         }}
         onClick={onClick}
         mode={mode}
-        transform={baseStyle.transform}
         effectiveWithoutEffects={effectiveWithoutEffects}
         effectiveReducedMotion={effectiveReducedMotion}
         shaderVariant={shaderVariant}
@@ -480,7 +492,7 @@ export function AtomixGlass({
       )}
 
       {/* Background layers for over-light mode */}
-      {/* Static styles (pointer-events, will-change) are in SCSS */}
+      {/* Static styles (pointer-events) are in SCSS; will-change is managed via .u-glass-clean-root utility for backdrop-filter stability */}
       {renderBackgroundLayer('dark')}
       {renderBackgroundLayer('black')}
       {shouldRenderOverLightLayers && (

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -111,12 +111,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       saturation = 180,
       aberrationIntensity = 2,
       mouseOffset = { x: 0, y: 0 },
-      globalMousePosition = { x: 0, y: 0 },
       onMouseEnter,
       onMouseLeave,
       onMouseDown,
       onMouseUp,
-      isHovered = false,
       isActive = false,
       overLight = false,
       overLightConfig = {},
@@ -401,6 +399,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       effectiveReducedMotion,
       effectiveWithoutEffects,
       withLiquidBlur,
+      overLightConfig,
     ]);
 
     const containerVars = useMemo(() => {
@@ -415,9 +414,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             ? mouseOffset.y
             : 0;
         return {
-          '--atomix-glass-container-width': `${glassSize?.width}`,
-          '--atomix-glass-container-height': `${glassSize?.height}`,
-          '--atomix-glass-container-padding': padding || '0 0',
           '--atomix-glass-container-radius': `${typeof borderRadius === 'number' && !isNaN(borderRadius) ? borderRadius : 0}px`,
           '--atomix-glass-container-backdrop': backdropStyle?.backdropFilter || 'none',
           '--atomix-glass-container-shadow': overLight
@@ -434,7 +430,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             ? `linear-gradient(${180 + mx * 0.5}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)`
             : 'none',
           '--atomix-glass-container-text-shadow': overLight
-            ? '0px 2px 12px rgba(0, 0, 0, 0)'
+            ? '0px 1px 2px rgba(255, 255, 255, 0.15)'
             : '0px 2px 12px rgba(0, 0, 0, 0.4)',
           '--atomix-glass-container-box-shadow': overLight
             ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
@@ -453,24 +449,14 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         } as React.CSSProperties;
       }
     }, [
-      glassSize,
-      padding,
-      borderRadius,
+    borderRadius,
       backdropStyle,
       mouseOffset,
       overLight,
       effectiveWithoutEffects,
+      overLightConfig,
     ]);
 
-    // Helper to force no transition/animation overrides with !important
-    const setForceNoTransition = (el: HTMLElement | null) => {
-      if (el) {
-        el.style.setProperty('transition-duration', '0s', 'important');
-        el.style.setProperty('animation-duration', '0s', 'important');
-        el.style.setProperty('transition-delay', '0s', 'important');
-      }
-    };
-
     return (
       <div
         ref={el => {
@@ -513,7 +499,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             />
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
             <div
-              ref={setForceNoTransition}
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
               style={{
                 filter: `url(#${filterId})`,

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -0,0 +1,216 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`] = `
+<div>
+  <div
+    class="c-atomix-glass"
+    style="--atomix-glass-radius: 16px; --atomix-glass-transform: scale(1); --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 270px; --atomix-glass-height: 69px; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05); --atomix-glass-overlay-highlight-opacity: 0; --atomix-glass-overlay-highlight-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 60%);"
+  >
+    <div
+      class="c-atomix-glass__container   "
+      style="position: relative; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(0.1px) saturate(140%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); --atomix-glass-container-width: 100%; --atomix-glass-container-height: 100%; --atomix-glass-container-padding: 0;"
+    >
+      <div
+        class="c-atomix-glass__inner"
+      >
+        <div
+          class="c-atomix-glass__filter"
+        >
+          <svg
+            aria-hidden="true"
+            style="position: absolute; width: 100%; height: 100%; inset: 0;"
+          >
+            <defs>
+              <radialgradient
+                cx="50%"
+                cy="50%"
+                id="atomix-glass-filter-16-edge-mask"
+                r="50%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="76%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="white"
+                  stop-opacity="1"
+                />
+              </radialgradient>
+              <filter
+                color-interpolation-filters="sRGB"
+                height="170%"
+                id="atomix-glass-filter-16"
+                width="170%"
+                x="-35%"
+                y="-35%"
+              >
+                <feimage
+                  height="100%"
+                  href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wCEAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgHBwcHBwgLCAkJCQkICwsMDAwMDAsNDQ4ODQ0SEhISEhQUFBQUFBQUFBQBBQUFCAgIEAsLEBQODg4UFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFP/CABEIAQABAAMBEQACEQEDEQH/xAAxAAEBAQEBAQAAAAAAAAAAAAADAgQIAQYBAQEBAQEBAQAAAAAAAAAAAAMCBAEACAf/2gAMAwEAAhADEAAAAPjPor6kOgOiKhKgKhKgOhKhOhKxKgKhOgKhKhKgKxOhKhOgKhKhKgKwKhKgKgKwG841nns9J/nn2KVCdCdCVAVCVCVAdCVCdiVAVidCVAVCVAdiVCVCdAVCVCVAVCVAVAViVZxsBrPPY6R/NvsY6E6ErEqAqE6ErAqE6E7E7ErA0ErArAqAqEuiVAXRLol0S6J0JUBWBUI0BXnG88djpH81+xjoToSoSoCoTsSoYQTsTsTQSsCsCsCsCsCoC6A0JeAuiXSLwn0SoioCoCoBsBrPFH0j+a/Yx0J0JUJUJ2BUMIR2MIRoBoJIBXnJAK840BUA0BdAegXhLpF4S8R+IuiVgVANAV546fSH5r9jHRHQFQlYxYnZQgnYwhQokgEgEmckzjecazlYD3OPQHoD0S8JcI/EXiPxF0SoSvONBFF0j+a/YxdI7EqA6KLGEKEKEGFI0AlA0AUzimYbzjecazjWce5w6BdEeCXhPhFwz8R+MuiVgVAdF0j+a/Yp0RUJ0MWUIUWUIUKUIJqBoArnJM4pmBMw3nCsw1mCs4+AegPBLxHwi4Z8KPGXSPojYH0ukfzX7FOiKhiyiylDiylDhBNRNQJAJcwpnBMopmC84XlCswdzj3OPQHwlwS8R8M+HHDPxl0ioDoukfzT7GOhOyiimzmzhDlShBNBNBJc4rmFMwJlBMwXlC82esoVmHucOgXgHxH4j4Zyccg/GfiOiKh6R/NPsY6GLOKObOUObOUI0KEAlEkzimYFygmUEyheXPeULzZ6yhWce5x8BeEuGfCj0HyI5EdM/EdD0h+a/Yx0U0cUflxNnNnCHCCdgSiSZgTMK5c6ZQvLnTLnvJnvKFZgrMHc5dAeiXijhn445E8g/RHTPpdI/mn2KdlFR5RzcTUTZxZwglYGgCmcEzAuUEyZ0y57yZ0yZ7yheUKzh3OPc5dEvEfij0RyI9E+iPGfT6T/NPsQ6OKiKmajy4ijmyOyKwNAFM4JlBMudMmdMue8mdMme8me8wVmGsw0A9A+kfjjxx6J9EememfT6W/MvsMqOamKiamKmKOKM7ErErAUzAmYLyZ0y50yZ0yZkyZ7yBeULzBeYazl0T6R9KPRPYj0T2J9B9Ppj8x+wjo4qY7M9iKmKg6MrIrErALzBeYEyZ0y50yZkyZ7x50yheXPeUbzjWcqA6I+lHYnsT6J7E9iOx0z+YfYBUc1MdmexHZjsHRlRBRDYBecEzZ7yAmXNeTOmTOmPOmXOmULyjeYbzlYnQxRx057E9mexPYij6a/L/r86OOzPpjsR6Y7B9MqIaILDPYZ7zZ0y57y50yZ0x5kyAmXPeUEyjeYUznQnYnRTUTUT2JqJ7EUfTn5d9fFRx2Z9EdmPTHjLsF0h6I2OegzXmzJmzplz3lzJjzpkBMudMoplBM5JnOwOyiimzmomomonsHRdO/l318VFHYj0x6I9McgumXiHpDQ56DPebMmbNebMmXMmQEy50yguQEzCmYkA7GLGEKaObibiaOKOKPp38s+vCsj7EeiPTHIP0Hwx6ReMKDP0M95895syZ815cy5c6ZQTKCZRXMKZiQDQYQYsps5uJs5qIsjounvyz68KyLpx4z9Mcg+GXoLxl4g6IUGes+a8+e82ZM2dMuZMoJmBcwrlJM5IBoMKMoUWc2c3E0cWRUXT/wCV/XQ2R0RdiPQfDPkFwy9BeIOiHQz0Ges+e82dM2ZM2dMwLmBcwpmJc5qBoMIUIUoU2c2cWZ0R0PT/AOV/XQ2RUJdM+wfDL0Hwy5A+EfEHQz0AUGe8+dM2e82dcwJnFcwrnJc5IEKUIMIUoUWc2cWRUJ0PT/5V9dFYjZFRF0z8ZeM+QPDLxD4Q6OfoBQhefPeYEz50ziucUzCoEuclCEKFGUKEKLOLI7E6EqHqD8o+uhsRsisSoi6ZeM+QPiHhj0R8IUIdALALzgmcEzimcVAlzioGomgyhQgwhRZHZFQHQlQ9Qfk/10NiVkNiNiVGXiPxj4x8Q9IfCFCPRCwC84oA3nFQFM5KBKJIMKEIUWRoUUJWJUJ0BUPUH5L9dDZFYigjYjZHRF0x8Q9IvEHRHojQjQhecUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
+                  id="atomix-glass-filter-16-image"
+                  preserveAspectRatio="xMidYMid slice"
+                  result="DISPLACEMENT_MAP"
+                  width="100%"
+                  x="0"
+                  y="0"
+                />
+                <fecolormatrix
+                  in="DISPLACEMENT_MAP"
+                  result="EDGE_INTENSITY"
+                  type="matrix"
+                  values="0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0 0 0 1 0"
+                />
+                <fecomponenttransfer
+                  in="EDGE_INTENSITY"
+                  result="EDGE_MASK"
+                >
+                  <fefunca
+                    tableValues="0 0.1 1"
+                    type="discrete"
+                  />
+                </fecomponenttransfer>
+                <feoffset
+                  dx="0"
+                  dy="0"
+                  in="SourceGraphic"
+                  result="CENTER_ORIGINAL"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="RED_DISPLACED"
+                  scale="-70"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="RED_DISPLACED"
+                  result="RED_CHANNEL"
+                  type="matrix"
+                  values="1 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="GREEN_DISPLACED"
+                  scale="-72.8"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="GREEN_DISPLACED"
+                  result="GREEN_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 1 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="BLUE_DISPLACED"
+                  scale="-74.2"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="BLUE_DISPLACED"
+                  result="BLUE_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 1 0 0
+                 0 0 0 1 0"
+                />
+                <feblend
+                  in="GREEN_CHANNEL"
+                  in2="BLUE_CHANNEL"
+                  mode="screen"
+                  result="GB_COMBINED"
+                />
+                <feblend
+                  in="RED_CHANNEL"
+                  in2="GB_COMBINED"
+                  mode="screen"
+                  result="RGB_COMBINED"
+                />
+                <fegaussianblur
+                  in="RGB_COMBINED"
+                  result="ABERRATED_BLURRED"
+                  stdDeviation="0"
+                />
+                <fecomposite
+                  in="ABERRATED_BLURRED"
+                  in2="EDGE_MASK"
+                  operator="in"
+                  result="EDGE_ABERRATION"
+                />
+                <fecomponenttransfer
+                  in="EDGE_MASK"
+                  result="INVERTED_MASK"
+                >
+                  <fefunca
+                    tableValues="1 0"
+                    type="table"
+                  />
+                </fecomponenttransfer>
+                <fecomposite
+                  in="CENTER_ORIGINAL"
+                  in2="INVERTED_MASK"
+                  operator="in"
+                  result="CENTER_CLEAN"
+                />
+                <fecomposite
+                  in="EDGE_ABERRATION"
+                  in2="CENTER_CLEAN"
+                  operator="over"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div
+            class="c-atomix-glass__filter-overlay"
+            style="filter: url(#atomix-glass-filter-16);"
+          />
+          <div
+            class="c-atomix-glass__filter-shadow"
+          />
+        </div>
+        <div
+          class="c-atomix-glass__content"
+        >
+          <div>
+            Default Glass
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--dark c-atomix-glass__background-layer--hidden"
+    />
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--black c-atomix-glass__background-layer--hidden"
+    />
+    <span
+      class="c-atomix-glass__border-1"
+    />
+    <span
+      class="c-atomix-glass__border-2"
+    />
+  </div>
+</div>
+`;