@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/header-content/ds-mobile-header-content.ts

@@ -0,0 +1,222 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * DsMobileHeaderContentComponent
+ * 
+ * Container for header content tiles - displays tiles in a responsive grid.
+ * Used within the expandable header section of mobile pages to show
+ * summary information like property details, statistics, etc.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-header-content header-content>
+ *   <ds-mobile-header-content-tile>
+ *     <tile-icon>
+ *       <ds-icon name="remixHome4Line" />
+ *     </tile-icon>
+ *     <tile-content>
+ *       <tile-label>Area</tile-label>
+ *       <tile-value>120 m²</tile-value>
+ *     </tile-content>
+ *   </ds-mobile-header-content-tile>
+ * </ds-mobile-header-content>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-header-content',
+  standalone: true,
+  imports: [CommonModule],
+  styles: [`
+    :host {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+    
+    @media (min-width: 768px) {
+      :host {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      }
+    }
+  `],
+  template: `<ng-content select="ds-mobile-header-content-tile" />`
+})
+export class DsMobileHeaderContentComponent {}
+
+/**
+ * DsMobileHeaderContentTileComponent
+ * 
+ * Individual tile for displaying summary information in the header.
+ * Styled with purple background to match the mobile header theme.
+ * 
+ * Must contain:
+ * - `<tile-icon>` - Icon container (optional)
+ * - `<tile-content>` - Label and value container
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-header-content-tile>
+ *   <tile-icon>
+ *     <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
+ *   </tile-icon>
+ *   <tile-content>
+ *     <tile-label>Rooms</tile-label>
+ *     <tile-value>3 rooms</tile-value>
+ *   </tile-content>
+ * </ds-mobile-header-content-tile>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-header-content-tile',
+  standalone: true,
+  imports: [CommonModule],
+  styles: [`
+    :host {
+      background: rgba(var(--color-header-content-rgb, 255, 255, 255), 0.05);
+      border: 1px solid rgba(var(--color-header-content-rgb, 255, 255, 255), 0.1);
+      border-radius: 12px;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `],
+  template: `
+    <ng-content select="tile-icon" />
+    <ng-content select="tile-content" />
+  `
+})
+export class DsMobileHeaderContentTileComponent {}
+
+/**
+ * TileIconComponent
+ * 
+ * Semantic slot for tile icon with dark purple background.
+ * Use within `ds-mobile-header-content-tile`.
+ */
+@Component({
+  selector: 'tile-icon',
+  standalone: true,
+  styles: [`
+    :host {
+      background: var(--color-header-surface);
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--color-header-content, #ffffff);
+    }
+    
+    /* Apply color to ds-icon inside */
+    :host ::ng-deep ds-icon {
+      --icon-color: var(--color-header-content, #ffffff);
+      color: var(--color-header-content, #ffffff);
+    }
+    
+    :host ::ng-deep ds-icon svg {
+      fill: var(--color-header-content, #ffffff);
+    }
+  `],
+  template: `<ng-content />`
+})
+export class TileIconComponent {}
+
+/**
+ * TileContentComponent
+ * 
+ * Semantic slot for tile content containing label and value.
+ * Use within `ds-mobile-header-content-tile`.
+ * 
+ * Contains:
+ * - `<tile-label>` - Small label text
+ * - `<tile-value>` - Large value text
+ */
+@Component({
+  selector: 'tile-content',
+  standalone: true,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    
+    ::ng-deep tile-label {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.56px;
+      color: rgba(var(--color-header-content-rgb, 255, 255, 255), 0.8);
+      display: block;
+    }
+    
+    ::ng-deep tile-value {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      line-height: 26px;
+      letter-spacing: -0.72px;
+      color: var(--color-header-content, #ffffff);
+      display: block;
+    }
+  `],
+  template: `
+    <ng-content select="tile-label" />
+    <ng-content select="tile-value" />
+  `
+})
+export class TileContentComponent {}
+
+/**
+ * TileLabelComponent
+ * 
+ * Label text for tile content.
+ * Use within `tile-content` inside `ds-mobile-header-content-tile`.
+ */
+@Component({
+  selector: 'tile-label',
+  standalone: true,
+  styles: [`
+    :host {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.56px;
+      color: rgba(var(--color-header-content-rgb, 255, 255, 255), 0.8);
+      display: block;
+    }
+  `],
+  template: `<ng-content />`
+})
+export class TileLabelComponent {}
+
+/**
+ * TileValueComponent
+ * 
+ * Value text for tile content.
+ * Use within `tile-content` inside `ds-mobile-header-content-tile`.
+ */
+@Component({
+  selector: 'tile-value',
+  standalone: true,
+  styles: [`
+    :host {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      line-height: 26px;
+      letter-spacing: -0.72px;
+      color: var(--color-header-content, #ffffff);
+      display: block;
+    }
+  `],
+  template: `<ng-content />`
+})
+export class TileValueComponent {}
+

package/src/components/header-content/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-header-content';
+

package/src/components/illustration/ds-mobile-illustration.ts

@@ -0,0 +1,124 @@
+import { Component, input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+/**
+ * DsMobileIllustrationComponent
+ * 
+ * A component that displays illustrations with dynamic whitelabel color adaptation.
+ * Inlines SVG and uses CSS variables to adapt colors to your theme.
+ * 
+ * **Features:**
+ * - Predefined variants (post, inquiry) for common empty states
+ * - Automatic color adaptation using CSS variables
+ * - Preserves all SVG details (textures, filters, gradients, shadows)
+ * - White radial gradient overlay for depth effect
+ * - Configurable size
+ * 
+ * **Color Adaptation:**
+ * The SVGs use the `--color-accent` CSS variable for the main page colors.
+ * All texture details, shadows, and effects are preserved.
+ * 
+ * @example
+ * ```html
+ * <!-- Using predefined variant -->
+ * <ds-mobile-illustration variant="post" />
+ * 
+ * <!-- Using predefined variant with custom size -->
+ * <ds-mobile-illustration variant="inquiry" size="150px" />
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-illustration',
+  standalone: true,
+  imports: [CommonModule],
+  styles: [`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+    
+    .illustration-container {
+      position: relative;
+      width: var(--illustration-size);
+      height: var(--illustration-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .illustration-svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+      z-index: 1;
+    }
+    
+    .illustration-svg :deep(svg) {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    
+    .illustration-gradient-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: radial-gradient(125% 100% at center top, transparent 15%, white 80%);
+      opacity: 1;
+      pointer-events: none;
+      z-index: 2;
+    }
+  `],
+  template: `
+    <div 
+      class="illustration-container"
+      role="img"
+      [attr.aria-label]="alt()"
+      [style.--illustration-size]="size()">
+      <div class="illustration-svg" [innerHTML]="svgContent()"></div>
+      <div class="illustration-gradient-overlay"></div>
+    </div>
+  `
+})
+export class DsMobileIllustrationComponent {
+  /**
+   * Predefined illustration variant
+   * Available variants: 'post', 'inquiry', 'confirmation'
+   */
+  variant = input<'post' | 'inquiry' | 'confirmation'>('post');
+  
+  /**
+   * Illustration size (width and height)
+   * @default '120px'
+   */
+  size = input<string>('120px');
+
+  /**
+   * Accessible description for the illustration
+   */
+  alt = input<string>('');
+  
+  constructor(private sanitizer: DomSanitizer) {}
+  
+  /**
+   * Inline SVG content for each variant
+   */
+  private svgMap: Record<string, string> = {
+    'post': `<svg viewBox="0 0 344 300" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.illustration-primary{fill:var(--color-accent,#6B5FF5);}</style><g filter="url(#filter0_n_3889_10866)"><g filter="url(#filter1_iiii_3889_10866)"><path d="M128.894 29.437C132.332 13.2359 148.247 2.89554 164.447 6.33719L314.615 38.2392C330.826 41.6832 341.182 57.6224 337.742 73.8344L333.497 93.8393L295.98 270.644C292.541 286.85 276.617 297.191 260.413 293.741L110.256 261.77C94.0517 258.32 83.7032 242.385 87.1425 226.178L128.894 29.437Z" class="illustration-primary"/><path d="M128.894 29.437C132.332 13.2359 148.247 2.89554 164.447 6.33719L314.615 38.2392C330.826 41.6832 341.182 57.6224 337.742 73.8344L333.497 93.8393L295.98 270.644C292.541 286.85 276.617 297.191 260.413 293.741L110.256 261.77C94.0517 258.32 83.7032 242.385 87.1425 226.178L128.894 29.437Z" fill="url(#paint0_linear_3889_10866)"/></g><rect width="23.9872" height="24" rx="11.9936" transform="matrix(0.978231 0.207519 -0.208206 0.978085 164.344 44.0215)" fill="black" fill-opacity="0.5"/><rect width="73.2211" height="12" rx="6" transform="matrix(0.978231 0.207519 -0.208206 0.978085 191.531 55.6562)" fill="black" fill-opacity="0.5"/><rect width="119.815" height="10.6931" rx="5.34656" transform="matrix(0.978231 0.207519 -0.208206 0.978085 157.594 79.082)" fill="black" fill-opacity="0.5"/><rect width="70.3126" height="10.6931" rx="5.34656" transform="matrix(0.978231 0.207519 -0.208206 0.978085 154.484 93.4844)" fill="black" fill-opacity="0.5"/><rect width="101.001" height="10.6931" rx="5.34656" transform="matrix(0.978231 0.207519 -0.208206 0.978085 151.344 108.045)" fill="black" fill-opacity="0.5"/><rect width="140.874" height="97.9525" rx="18" transform="matrix(0.978231 0.207519 -0.208206 0.978085 146.484 131.383)" fill="black" fill-opacity="0.5"/><g filter="url(#filter2_iiii_3889_10866)"><path d="M6.24706 73.9096C2.80889 57.7085 13.1487 41.7772 29.3457 38.3199L179.482 6.27234C195.69 2.81267 211.623 13.1535 215.064 29.3654L219.31 49.3702L256.834 226.173C260.273 242.38 249.926 258.315 233.722 261.766L83.5677 293.746C67.3633 297.198 51.4385 286.857 47.9991 270.65L6.24706 73.9096Z" class="illustration-primary"/></g><rect width="23.9872" height="24" rx="11.9936" transform="matrix(0.977991 -0.208645 0.207959 0.978137 41.4062 69.4883)" fill="black" fill-opacity="0.5"/><rect width="73.2211" height="12" rx="6" transform="matrix(0.977991 -0.208645 0.207959 0.978137 70.9688 69.0527)" fill="black" fill-opacity="0.5"/><rect width="119.815" height="10.6931" rx="5.34656" transform="matrix(0.977991 -0.208645 0.207959 0.978137 49.5156 104.264)" fill="black" fill-opacity="0.5"/><rect width="70.3126" height="10.6931" rx="5.34656" transform="matrix(0.977991 -0.208645 0.207959 0.978137 52.5312 118.684)" fill="black" fill-opacity="0.5"/><rect width="101.001" height="10.6931" rx="5.34656" transform="matrix(0.977991 -0.208645 0.207959 0.978137 55.5938 133.262)" fill="black" fill-opacity="0.5"/><rect width="140.874" height="97.9525" rx="18" transform="matrix(0.977991 -0.208645 0.207959 0.978137 60.6562 156.555)" fill="black" fill-opacity="0.5"/></g><defs><filter id="filter0_n_3889_10866" x="5.58594" y="5.60547" width="332.816" height="288.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="0.25 0.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="9191" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feComponentTransfer in="alphaNoise" result="coloredNoise2"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise2" result="noise2Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feFlood flood-color="rgba(255, 255, 255, 0.25)" result="color2Flood" /><feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" /><feMerge result="effect1_noise_3889_10866"><feMergeNode in="shape" /><feMergeNode in="color1" /><feMergeNode in="color2" /></feMerge></filter><filter id="filter1_iiii_3889_10866" x="86.4844" y="-10.3237" width="251.918" height="344.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10866" result="effect2_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10866" result="effect3_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10866" result="effect4_innerShadow_3889_10866"/></filter><filter id="filter2_iiii_3889_10866" x="5.58594" y="-10.3945" width="251.906" height="344.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10866" result="effect2_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10866" result="effect3_innerShadow_3889_10866"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10866" result="effect4_innerShadow_3889_10866"/></filter><linearGradient id="paint0_linear_3889_10866" x1="111.488" y1="162.199" x2="335.745" y2="98.2353" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient></defs></svg>`,
+    'inquiry': `<svg viewBox="0 0 344 300" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.illustration-primary{fill:var(--color-accent,#6B5FF5);}</style><g filter="url(#filter0_n_3889_10915)"><g filter="url(#filter1_iiii_3889_10915)"><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" class="illustration-primary"/><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" fill="url(#paint0_linear_3889_10915)"/></g><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 173.844 55.5391)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 158.188 52.2148)" fill="black" fill-opacity="0.5"/><rect width="130.785" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 168.297 81.6992)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 152.641 78.3652)" fill="black" fill-opacity="0.5"/><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 162.75 107.842)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 147.094 104.516)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 157.203 133.99)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 140.562 212.443)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 141.547 130.666)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 124.891 209.117)" fill="black" fill-opacity="0.5"/><rect width="125.447" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 151.656 160.141)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 135.984 156.816)" fill="black" fill-opacity="0.5"/><rect width="85.4104" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 146.109 186.293)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 130.438 182.967)" fill="black" fill-opacity="0.5"/><g filter="url(#filter2_iiii_3889_10915)"><path d="M6.24705 73.9095C2.80888 57.7085 13.1487 41.7772 29.3457 38.3199L179.482 6.27234C195.69 2.81268 211.623 13.1536 215.064 29.3654L219.31 49.3702L256.834 226.173C260.273 242.38 249.926 258.315 233.722 261.766L83.5677 293.746C67.3633 297.198 51.4385 286.857 47.9991 270.65L6.24705 73.9095Z" class="illustration-primary"/></g><rect width="112.101" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 57.8906 79.4453)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 42.2344 82.791)" fill="black" fill-opacity="0.5"/><rect width="130.785" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 63.4531 105.605)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 47.7812 108.941)" fill="black" fill-opacity="0.5"/><rect width="112.101" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 69 131.746)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 53.3281 135.092)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 74.5469 157.896)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 91.2031 236.348)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 58.8906 161.24)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 75.5312 239.693)" fill="black" fill-opacity="0.5"/><rect width="125.447" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 80.0938 184.047)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 64.4375 187.391)" fill="black" fill-opacity="0.5"/><rect width="85.4104" height="10.6931" rx="5.34656" transform="matrix(0.978064 -0.208304 0.207618 0.97821 85.6406 210.197)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978064 -0.208304 0.207618 0.97821 69.9844 213.543)" fill="black" fill-opacity="0.5"/></g><defs><filter id="filter0_n_3889_10915" x="5.58594" y="5.60547" width="332.832" height="288.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="0.25 0.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="9191" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feComponentTransfer in="alphaNoise" result="coloredNoise2"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise2" result="noise2Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feFlood flood-color="rgba(255, 255, 255, 0.25)" result="color2Flood" /><feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" /><feMerge result="effect1_noise_3889_10915"><feMergeNode in="shape" /><feMergeNode in="color1" /><feMergeNode in="color2" /></feMerge></filter><filter id="filter1_iiii_3889_10915" x="86.5" y="-10.3237" width="251.918" height="344.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10915" result="effect2_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10915" result="effect3_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10915" result="effect4_innerShadow_3889_10915"/></filter><filter id="filter2_iiii_3889_10915" x="5.58594" y="-10.3945" width="251.906" height="344.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_3889_10915" result="effect2_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_3889_10915" result="effect3_innerShadow_3889_10915"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_3889_10915" result="effect4_innerShadow_3889_10915"/></filter><linearGradient id="paint0_linear_3889_10915" x1="111.503" y1="162.199" x2="335.761" y2="98.2353" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient></defs></svg>`,
+    'confirmation': `<svg viewBox="0 0 344 300" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.illustration-success{fill:var(--color-success,#2FB282);}</style><g clip-path="url(#clip0_conf)"><g filter="url(#filter0_n_conf)"><g filter="url(#filter1_iiii_conf)"><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" class="illustration-success"/><path d="M128.909 29.437C132.347 13.2359 148.262 2.89554 164.463 6.33719L314.63 38.2392C330.841 41.6832 341.197 57.6224 337.757 73.8344L333.512 93.8393L295.995 270.644C292.556 286.85 276.632 297.191 260.428 293.741L110.272 261.77C94.0673 258.32 83.7188 242.385 87.1581 226.178L128.909 29.437Z" fill="url(#paint0_linear_conf)"/></g><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 173.848 55.5391)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 158.191 52.2148)" fill="black" fill-opacity="0.5"/><rect width="130.785" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 168.301 81.6992)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 152.645 78.3652)" fill="black" fill-opacity="0.5"/><rect width="112.101" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 162.754 107.842)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 147.098 104.516)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 157.207 133.99)" fill="black" fill-opacity="0.5"/><rect width="96.0867" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 140.566 212.443)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 141.551 130.666)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 124.895 209.117)" fill="black" fill-opacity="0.5"/><rect width="125.447" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 151.66 160.141)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 135.988 156.816)" fill="black" fill-opacity="0.5"/><rect width="85.4104" height="10.6931" rx="5.34657" transform="matrix(0.978075 0.208255 -0.207569 0.97822 146.113 186.293)" fill="black" fill-opacity="0.5"/><rect width="10.6763" height="10.6931" rx="5.33815" transform="matrix(0.978075 0.208255 -0.207569 0.97822 130.441 182.967)" fill="black" fill-opacity="0.5"/><g filter="url(#filter2_iiii_conf)"><path d="M6.24705 73.9095C2.80888 57.7085 13.1487 41.7772 29.3457 38.3199L179.482 6.27234C195.69 2.81268 211.623 13.1536 215.064 29.3654L219.31 49.3703L256.834 226.173C260.273 242.38 249.926 258.315 233.722 261.766L83.5677 293.746C67.3633 297.198 51.4385 286.857 47.9991 270.65L6.24705 73.9095Z" class="illustration-success"/></g><path d="M142.997 202.463C114.185 208.587 85.8652 190.196 79.741 161.384C73.6167 132.571 92.0079 104.251 120.82 98.1272C149.633 92.003 177.952 110.394 184.077 139.206C190.201 168.019 171.81 196.339 142.997 202.463ZM131.143 172.268L160.185 127.54L151.241 121.732L128.007 157.515L110.112 145.893L104.303 154.838L131.143 172.268Z" fill="black" fill-opacity="0.5"/></g></g><defs><filter id="filter0_n_conf" x="5.58594" y="5.60547" width="332.832" height="288.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feTurbulence type="fractalNoise" baseFrequency="0.25 0.25" stitchTiles="stitch" numOctaves="3" result="noise" seed="9191" /><feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /><feComponentTransfer in="alphaNoise" result="coloredNoise1"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /><feComponentTransfer in="alphaNoise" result="coloredNoise2"><feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/></feComponentTransfer><feComposite operator="in" in2="shape" in="coloredNoise2" result="noise2Clipped" /><feFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood" /><feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /><feFlood flood-color="rgba(255, 255, 255, 0.25)" result="color2Flood" /><feComposite operator="in" in2="noise2Clipped" in="color2Flood" result="color2" /><feMerge result="effect1_noise_conf"><feMergeNode in="shape" /><feMergeNode in="color1" /><feMergeNode in="color2" /></feMerge></filter><filter id="filter1_iiii_conf" x="86.5" y="-10.3237" width="251.918" height="344.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_conf" result="effect2_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_conf" result="effect3_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_conf" result="effect4_innerShadow_conf"/></filter><filter id="filter2_iiii_conf" x="5.58594" y="-10.3945" width="251.906" height="344.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-2"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect1_innerShadow_conf" result="effect2_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="40"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/><feBlend mode="normal" in2="effect2_innerShadow_conf" result="effect3_innerShadow_conf"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-16"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="effect3_innerShadow_conf" result="effect4_innerShadow_conf"/></filter><linearGradient id="paint0_linear_conf" x1="111.503" y1="162.199" x2="335.761" y2="98.2353" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient><clipPath id="clip0_conf"><rect width="344" height="300" fill="white"/></clipPath></defs></svg>`
+  };
+  
+  /**
+   * Computed SVG content - sanitized for security
+   */
+  svgContent = computed(() => {
+    const variantKey = this.variant();
+    const svg = this.svgMap[variantKey] || this.svgMap['post'];
+    return this.sanitizer.bypassSecurityTrustHtml(svg);
+  });
+}

package/src/components/illustration/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-illustration';
+

package/src/components/index.ts

@@ -0,0 +1,124 @@
+// Mobile Page Components
+export * from './page-main';
+export * from './page-details';
+
+// Mobile Content Components
+export * from './content';
+export * from './section';
+export * from './header-content';
+export * from './logo';
+export * from './system-message-banner';
+export * from './file-attachment';
+
+// Mobile Community Components
+export * from './comment';
+export * from './post-composer';
+export * from './message-composer';
+export * from './message-bubble';
+
+// Mobile List Components
+export * from './list-item';
+export * from './list-item-static';
+export * from './action-list-item';
+export {
+  DsMobileInteractiveListItemPostComponent,
+  PostContentComponent,
+  PostTextComponent,
+  PostMediaComponent,
+  PostAttachmentsComponent,
+  PostActionsComponent,
+  ActionLikeComponent,
+  ActionCommentComponent,
+  PostPdfAttachmentComponent,
+} from './interactive-list-item-post';
+export { DsMobileInteractiveListItemInquiryComponent } from './interactive-list-item-inquiry';
+export { DsMobileInteractiveListItemMessageComponent } from './interactive-list-item-message';
+export { DsMobileContactListItemComponent } from './contact-list-item';
+export * from './interactive-list-item-booking';
+
+// Mobile Layout Components
+export { DsMobileTabsComponent } from './tabs';
+export { DsMobileTabBarComponent, type TabConfig } from './tab-bar';
+export { DsMobileInlineTabsComponent, type InlineTabItem } from './inline-tabs';
+export * from './swiper';
+
+// Mobile Bottom Sheet Components
+export * from './bottom-sheet';
+
+// Mobile Lightbox Components
+export * from './lightbox';
+
+// Mobile Inline Photo Component
+export * from './inline-photo';
+
+// Mobile Attachment Preview Component
+export * from './attachment-preview';
+
+// Mobile Loader Overlay Component
+export * from './loader-overlay';
+
+// Mobile Modal Service
+export * from './modal';
+
+// Mobile Modal Base Component
+export * from './modal-base';
+
+// Mobile Post Detail Modal
+export * from './post-detail-modal';
+
+// Mobile Card Inline Component
+export * from './card-inline';
+
+// Mobile Card Inline Banner Content
+export * from './card-inline-banner';
+
+// Mobile Card Inline Contact
+export * from './card-inline-contact';
+
+// Mobile Card Inline File
+export * from './card-inline-file';
+
+// Mobile Chat Modal
+export * from './chat-modal';
+
+// Mobile New Inquiry Modal
+export * from './new-inquiry-modal';
+
+// Mobile Booking & Facility Modals
+export * from './booking-modal';
+export * from './facility-creation-modal';
+export * from './facility-detail-modal';
+
+// Mobile Handbook Components
+export * from './handbook-folder';
+export * from './handbook-detail-modal';
+
+// Text Input Component
+export * from './text-input';
+
+// FAB Component
+export * from './fab';
+
+// Mobile Avatar Component
+export * from './avatar-with-badge';
+
+// Mobile App Icon Component
+export * from './app-icon';
+
+// Mobile Empty State Component
+export * from './empty-state';
+
+// Mobile Offline Banner Component
+export * from './offline-banner';
+
+// Mobile Illustration Component
+export * from './illustration';
+
+// Mobile Property Banner Component
+export * from './property-banner';
+
+// Mobile Dropdown Component
+export * from './dropdown';
+
+// Shared directives
+export * from './shared';