@shohojdhara/atomix 0.4.9 → 0.5.1

package/scripts/cli/__tests__/utils.test.js

@@ -1,165 +0,0 @@
-/**
- * CLI Utilities Tests
- */
-
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { 
-  validatePath,
-  validateComponentName,
-  validateThemeName,
-  sanitizeInput,
-  fileExists,
-  AtomixCLIError
-} from '../utils.js';
-import { mkdtemp, rm, writeFile } from 'fs/promises';
-import { join } from 'path';
-import { tmpdir } from 'os';
-
-describe('CLI Utils', () => {
-  let tempDir;
-
-  beforeEach(async () => {
-    tempDir = await mkdtemp(join(tmpdir(), 'atomix-test-'));
-  });
-
-  afterEach(async () => {
-    await rm(tempDir, { recursive: true, force: true });
-  });
-
-  describe('validatePath', () => {
-    it('should accept valid relative paths', () => {
-      const result = validatePath('./src/components', tempDir);
-      expect(result.isValid).toBe(true);
-      expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
-    });
-
-    it('should reject paths outside project directory', () => {
-      const result = validatePath('../../etc/passwd', tempDir);
-      expect(result.isValid).toBe(false);
-      expect(result.error).toMatch(/outside|traversal/);
-    });
-
-    it('should reject sensitive files', () => {
-      const result = validatePath('.env', tempDir);
-      expect(result.isValid).toBe(false);
-      expect(result.error).toContain('sensitive path');
-    });
-
-    it('should handle absolute paths within project', () => {
-      const validPath = join(tempDir, 'src', 'components');
-      const result = validatePath(validPath, tempDir);
-      expect(result.isValid).toBe(true);
-    });
-
-    it('should normalize paths correctly', () => {
-      const result = validatePath('./src/../src/components', tempDir);
-      expect(result.isValid).toBe(true);
-      expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
-    });
-  });
-
-  describe('validateComponentName', () => {
-    it('should accept valid PascalCase names', () => {
-      const validNames = ['Button', 'CardHeader', 'ModalDialog', 'FormInput'];
-      
-      validNames.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(true);
-      });
-    });
-
-    it('should reject invalid names', () => {
-      const invalidNames = ['123Button', '', '1', 'Component', 'React'];
-
-      invalidNames.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-
-    it('should reject reserved words', () => {
-      const reservedWords = ['Component', 'React', 'Fragment', 'Suspense'];
-      
-      reservedWords.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-  });
-
-  describe('validateThemeName', () => {
-    it('should accept valid kebab-case names', () => {
-      const validNames = ['dark-theme', 'light', 'high-contrast', 'custom-brand'];
-      
-      validNames.forEach(name => {
-        const result = validateThemeName(name);
-        expect(result.isValid).toBe(true);
-      });
-    });
-
-    it('should reject invalid theme names', () => {
-      const invalidNames = ['DarkTheme', 'theme_dark', 'Theme-Dark', '123theme', ''];
-      
-      invalidNames.forEach(name => {
-        const result = validateThemeName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-  });
-
-  describe('sanitizeInput', () => {
-    it('should remove dangerous shell characters', () => {
-      const dangerousInputs = [
-        'test; rm -rf /',
-        'input && malicious-command',
-        'command | pipe',
-        '`substitution`',
-        '$(command)',
-        'input > /dev/null',
-        '"quoted"',
-        "'singlequoted'",
-        '" $(whoami) "',
-        "' ; rm -rf / '"
-      ];
-      
-      dangerousInputs.forEach(input => {
-        const sanitized = sanitizeInput(input);
-        expect(sanitized).not.toMatch(/[;&|`$<>\\"']/);
-      });
-    });
-
-    it('should preserve safe characters', () => {
-      const safeInput = 'Button-Component_123';
-      const sanitized = sanitizeInput(safeInput);
-      expect(sanitized).toBe(safeInput);
-    });
-  });
-
-  describe('fileExists', () => {
-    it('should return true for existing files', async () => {
-      const testFile = join(tempDir, 'test.txt');
-      await writeFile(testFile, 'test content');
-      
-      const exists = await fileExists(testFile);
-      expect(exists).toBe(true);
-    });
-
-    it('should return false for non-existing files', async () => {
-      const nonExistent = join(tempDir, 'nonexistent.txt');
-      const exists = await fileExists(nonExistent);
-      expect(exists).toBe(false);
-    });
-  });
-
-  describe('AtomixCLIError', () => {
-    it('should create error with code and suggestions', () => {
-      const suggestions = ['Use PascalCase', 'Start with letter'];
-      const error = new AtomixCLIError('Invalid name', 'INVALID_NAME', suggestions);
-      
-      expect(error.message).toBe('Invalid name');
-      expect(error.code).toBe('INVALID_NAME');
-      expect(error.suggestions).toEqual(suggestions);
-      expect(error.name).toBe('AtomixCLIError');
-    });
-  });
-});

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

@@ -1,216 +0,0 @@
-// 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,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/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>
-`;

package/src/components/AtomixGlass/stories/Customization.stories.tsx

@@ -1,131 +0,0 @@
-/**
- * Customization.stories.tsx
- *
- * Stories showcasing customization options and integration with other components.
- *
- * @package Atomix
- * @component AtomixGlass
- */
-
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import AtomixGlass from '../AtomixGlass';
-import Button from '../../Button/Button';
-import Badge from '../../Badge/Badge';
-import { BackgroundWrapper, backgroundImages } from './shared-components';
-import { Icon } from '../../Icon/Icon'; // Assuming Icon is used or might be useful, added from Examples
-
-const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Features/Customization',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Examples of how to customize AtomixGlass with styles and integrate it with other Atomix components.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AtomixGlass>;
-
-export const WithCustomStyling: Story = {
-  args: {
-    children: (
-      <div className="u-text-center">
-        <h2 className="u-text-4 u-font-semibold u-mb-4 u-text-white">Custom Styled Glass</h2>
-        <p className="u-text-base u-mb-6 u-text-white">
-          This glass uses custom styling properties.
-        </p>
-        <Button
-          variant="primary"
-          className="u-rounded-lg u-py-3 u-px-6"
-          style={{ boxShadow: '0 5px 15px rgba(0,0,0,0.2)' }}
-        >
-          Premium Effect
-        </Button>
-      </div>
-    ),
-    displacementScale: 70,
-    blurAmount: 0.4,
-    saturation: 160,
-    aberrationIntensity: 1.8,
-    borderRadius: 30,
-    padding: '40px',
-    style: {
-      width: '100%',
-      maxWidth: '400px',
-      margin: '0 auto',
-      boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
-      transition: 'transform 0.3s ease-in-out',
-    },
-  },
-  render: args => (
-    <BackgroundWrapper backgroundImage={backgroundImages[2]}>
-      <div className="u-flex u-justify-center u-items-center u-w-full u-h-full">
-        <AtomixGlass {...args} />
-      </div>
-    </BackgroundWrapper>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Shows how to customize the AtomixGlass component with additional CSS styles and enhanced interactivity.',
-      },
-    },
-  },
-};
-
-export const WithOtherComponents: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Demonstrates how AtomixGlass integrates with other components in the design system.',
-      },
-    },
-  },
-  render: () => {
-    return (
-      <BackgroundWrapper backgroundImage={backgroundImages[0]}>
-        <div className="u-flex u-items-center u-justify-center u-w-full u-h-full">
-          <AtomixGlass
-            displacementScale={85}
-            blurAmount={0.6}
-            saturation={170}
-            aberrationIntensity={2.2}
-            elasticity={0.18}
-            borderRadius={28}
-            padding="36px"
-            className="u-w-11/12 u-max-w-2xl"
-          >
-            <div className="u-mb-6">
-              <h2 className="u-m-0 u-text-white u-text-28 u-mb-2">Integrated UI</h2>
-              <p className="u-m-0 u-text-white u-opacity-90">
-                Glass effect with multiple components
-              </p>
-            </div>
-
-            <div className="u-flex u-flex-col u-gap-4 u-items-center">
-              <Button variant="primary" glass className="u-w-full">
-                Primary Action
-              </Button>
-              <Button variant="secondary" glass className="u-w-full">
-                Secondary Action
-              </Button>
-
-              <div className="u-flex u-gap-3 u-mt-4">
-                <Badge variant="success" label="Success" glass />
-                <Badge variant="warning" label="Warning" glass />
-              </div>
-            </div>
-          </AtomixGlass>
-        </div>
-      </BackgroundWrapper>
-    );
-  },
-};