@ivds/core 0.1.1

package/src/icons/_icon.scss

@@ -0,0 +1,121 @@
+// Base icon styles
+// Provides foundational styling for the IVDS icon system with SVG support
+
+@use '../variables/variables' as vars;
+
+// Base icon mixin for consistent styling
+@mixin icon-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+  flex-shrink: 0;
+  vertical-align: middle;
+  
+  // SVG specific styles
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: inherit;
+    display: block;
+  }
+  
+  // Fallback for text-based icons
+  &::before {
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 1;
+  }
+}
+
+// Size mixin for consistent icon sizing
+@mixin icon-size($size) {
+  width: $size;
+  height: $size;
+  font-size: $size;
+}
+
+.ivds-icon {
+  @include icon-base;
+  
+  // Default size using design tokens
+  @include icon-size(var(--fontSize-base, 1rem));
+  
+  // Size variations using design tokens
+  &--xs {
+    @include icon-size(var(--fontSize-xs, 0.75rem));
+  }
+  
+  &--sm {
+    @include icon-size(var(--fontSize-sm, 0.875rem));
+  }
+  
+  &--md {
+    @include icon-size(var(--fontSize-base, 1rem));
+  }
+  
+  &--lg {
+    @include icon-size(var(--fontSize-lg, 1.125rem));
+  }
+  
+  &--xl {
+    @include icon-size(var(--fontSize-xl, 1.25rem));
+  }
+  
+  &--2xl {
+    @include icon-size(var(--fontSize-2xl, 1.5rem));
+  }
+  
+  &--3xl {
+    @include icon-size(var(--fontSize-3xl, 1.875rem));
+  }
+  
+  // Color variations
+  &--primary {
+    color: var(--color-brand-primary-500, #0ea5e9);
+  }
+  
+  &--secondary {
+    color: var(--color-semantic-neutral-600, #6b7280);
+  }
+  
+  &--success {
+    color: var(--color-semantic-success-500, #10b981);
+  }
+  
+  &--warning {
+    color: var(--color-semantic-warning-500, #f59e0b);
+  }
+  
+  &--error {
+    color: var(--color-semantic-error-500, #ef4444);
+  }
+  
+  &--info {
+    color: var(--color-brand-primary-500, #0ea5e9);
+  }
+  
+  // Interactive states
+  &--interactive {
+    cursor: pointer;
+    transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
+    
+    &:hover {
+      transform: scale(1.1);
+    }
+    
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+  
+  // Disabled state
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/src/icons/icon-arrow-left.scss

@@ -0,0 +1,23 @@
+// Arrow left icon
+@import 'icon';
+
+.ivds-icon--arrow-left {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('arrow-left.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '←';
+    font-size: inherit;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-arrow-right.scss

@@ -0,0 +1,23 @@
+// Arrow right icon
+@import 'icon';
+
+.ivds-icon--arrow-right {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('arrow-right.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '→';
+    font-size: inherit;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-check.scss

@@ -0,0 +1,23 @@
+// Check icon
+@import 'icon';
+
+.ivds-icon--check {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('check.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '✓';
+    font-size: inherit;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-close.scss

@@ -0,0 +1,24 @@
+// Close icon
+@import 'icon';
+
+.ivds-icon--close {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('close.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '×';
+    font-size: inherit;
+    font-weight: bold;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-error.scss

@@ -0,0 +1,24 @@
+// Error icon
+@import 'icon';
+
+.ivds-icon--error {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('error.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '✕';
+    font-size: inherit;
+    font-weight: bold;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-info.scss

@@ -0,0 +1,24 @@
+// Info icon
+@import 'icon';
+
+.ivds-icon--info {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('info.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: 'ℹ';
+    font-size: inherit;
+    font-weight: bold;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-success.scss

@@ -0,0 +1,23 @@
+// Success icon
+@import 'icon';
+
+.ivds-icon--success {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('success.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '✓';
+    font-size: inherit;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icon-warning.scss

@@ -0,0 +1,23 @@
+// Warning icon
+@import 'icon';
+
+.ivds-icon--warning {
+  @include icon-base;
+  
+  // SVG icon using PostCSS inline-svg (fallback to Unicode)
+  background-image: svg-load('warning.svg', fill=currentcolor);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  
+  // Unicode fallback
+  &::before {
+    content: '⚠';
+    font-size: inherit;
+  }
+  
+  // Hide text when SVG is available
+  &:not(.ivds-icon--no-svg)::before {
+    display: none;
+  }
+}

package/src/icons/icons.scss

@@ -0,0 +1,12 @@
+// All icons bundle
+// This file imports all icon styles for the IVDS Core package
+
+@use 'icon';
+@use 'icon-arrow-left';
+@use 'icon-arrow-right';
+@use 'icon-check';
+@use 'icon-close';
+@use 'icon-info';
+@use 'icon-warning';
+@use 'icon-error';
+@use 'icon-success';

package/src/icons/icons.stories.js

@@ -0,0 +1,249 @@
+export default {
+  title: 'Core/Icons',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Icon system for the IVDS Core package. Icons support both SVG and Unicode fallbacks, with multiple sizes and color variants.'
+      }
+    },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            enabled: true
+          }
+        ]
+      }
+    }
+  }
+};
+
+export const AllIcons = () => `
+  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding: 1rem;">
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--arrow-left ivds-icon--2xl"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">arrow-left</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--arrow-right ivds-icon--2xl"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">arrow-right</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--success"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">check</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--close ivds-icon--2xl"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">close</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--info ivds-icon--2xl ivds-icon--info"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">info</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--warning ivds-icon--2xl ivds-icon--warning"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">warning</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--error ivds-icon--2xl ivds-icon--error"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">error</div>
+    </div>
+    
+    <div style="text-align: center;">
+      <div style="margin-bottom: 0.5rem;">
+        <span class="ivds-icon ivds-icon--success ivds-icon--2xl ivds-icon--success"></span>
+      </div>
+      <div style="font-size: 0.875rem; color: #6b7280;">success</div>
+    </div>
+  </div>
+`;
+
+export const Sizes = () => `
+  <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--xs"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">xs</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--sm"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">sm</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--md"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">md</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--lg"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">lg</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--xl"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">xl</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--2xl"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">2xl</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--3xl"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">3xl</span>
+    </div>
+  </div>
+`;
+
+export const Colors = () => `
+  <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--2xl"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">default</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--primary"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">primary</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--secondary"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">secondary</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--success"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">success</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--warning ivds-icon--2xl ivds-icon--warning"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">warning</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--error ivds-icon--2xl ivds-icon--error"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">error</span>
+    </div>
+    
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+      <span class="ivds-icon ivds-icon--info ivds-icon--2xl ivds-icon--info"></span>
+      <span style="font-size: 0.75rem; color: #6b7280;">info</span>
+    </div>
+  </div>
+`;
+
+export const Interactive = () => `
+  <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
+    <button style="background: none; border: none; cursor: pointer; padding: 0.5rem;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--2xl ivds-icon--interactive ivds-icon--success"></span>
+    </button>
+    
+    <button style="background: none; border: none; cursor: pointer; padding: 0.5rem;">
+      <span class="ivds-icon ivds-icon--close ivds-icon--2xl ivds-icon--interactive"></span>
+    </button>
+    
+    <button style="background: none; border: none; cursor: pointer; padding: 0.5rem;">
+      <span class="ivds-icon ivds-icon--arrow-right ivds-icon--2xl ivds-icon--interactive ivds-icon--primary"></span>
+    </button>
+    
+    <button style="background: none; border: none; cursor: not-allowed; padding: 0.5rem;" disabled>
+      <span class="ivds-icon ivds-icon--info ivds-icon--2xl ivds-icon--disabled"></span>
+    </button>
+  </div>
+  <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280;">
+    Hover over the interactive icons to see the scale effect. The last icon is disabled.
+  </p>
+`;
+
+export const InContext = () => `
+  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <!-- Button with icon -->
+    <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #0ea5e9; color: white; border: none; border-radius: 0.375rem; cursor: pointer;">
+      <span class="ivds-icon ivds-icon--check ivds-icon--sm"></span>
+      Save Changes
+    </button>
+    
+    <!-- Alert with icon -->
+    <div style="display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 0.375rem;">
+      <span class="ivds-icon ivds-icon--warning ivds-icon--warning"></span>
+      <div>
+        <h4 style="margin: 0 0 0.25rem 0; font-weight: 600; color: #92400e;">Warning</h4>
+        <p style="margin: 0; color: #92400e;">This action cannot be undone.</p>
+      </div>
+    </div>
+    
+    <!-- Navigation with icons -->
+    <nav style="display: flex; gap: 1rem;">
+      <a href="#" style="display: flex; align-items: center; gap: 0.5rem; color: #374151; text-decoration: none;">
+        <span class="ivds-icon ivds-icon--arrow-left ivds-icon--sm"></span>
+        Previous
+      </a>
+      <a href="#" style="display: flex; align-items: center; gap: 0.5rem; color: #374151; text-decoration: none;">
+        Next
+        <span class="ivds-icon ivds-icon--arrow-right ivds-icon--sm"></span>
+      </a>
+    </nav>
+    
+    <!-- Input with icon -->
+    <div style="position: relative; max-width: 300px;">
+      <span class="ivds-icon ivds-icon--info ivds-icon--sm" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280;"></span>
+      <input type="text" placeholder="Enter information..." style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
+    </div>
+  </div>
+`;
+
+export const UsageExamples = () => `
+  <div style="font-family: monospace; background: #f9fafb; padding: 1rem; border-radius: 0.375rem;">
+    <h3 style="margin-top: 0;">HTML Usage Examples:</h3>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong>Basic icon:</strong><br>
+      <code>&lt;span class="ivds-icon ivds-icon--check"&gt;&lt;/span&gt;</code>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong>Icon with size and color:</strong><br>
+      <code>&lt;span class="ivds-icon ivds-icon--warning ivds-icon--lg ivds-icon--warning"&gt;&lt;/span&gt;</code>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong>Interactive icon:</strong><br>
+      <code>&lt;button&gt;&lt;span class="ivds-icon ivds-icon--close ivds-icon--interactive"&gt;&lt;/span&gt;&lt;/button&gt;</code>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong>Disabled icon:</strong><br>
+      <code>&lt;span class="ivds-icon ivds-icon--info ivds-icon--disabled"&gt;&lt;/span&gt;</code>
+    </div>
+    
+    <div>
+      <strong>Force Unicode fallback (no SVG):</strong><br>
+      <code>&lt;span class="ivds-icon ivds-icon--check ivds-icon--no-svg"&gt;&lt;/span&gt;</code>
+    </div>
+  </div>
+`;

package/src/icons/svg/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m15 18-6-6 6-6"/>
+</svg>

package/src/icons/svg/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m9 18 6-6-6-6"/>
+</svg>

package/src/icons/svg/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 6 9 17l-5-5"/>
+</svg>

package/src/icons/svg/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6 6 18"/>
+  <path d="m6 6 12 12"/>
+</svg>

package/src/icons/svg/error.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M15 9l-6 6"/>
+  <path d="M9 9l6 6"/>
+</svg>

package/src/icons/svg/info.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M12 16v-4"/>
+  <path d="M12 8h.01"/>
+</svg>

package/src/icons/svg/success.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M9 12l2 2 4-4"/>
+</svg>

package/src/icons/svg/warning.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
+  <path d="M12 9v4"/>
+  <path d="M12 17h.01"/>
+</svg>

package/src/utils/__tests__/utilities.test.scss

@@ -0,0 +1,37 @@
+// SCSS compilation test for utility classes
+
+// Test basic utility classes compilation
+.test-spacing {
+  margin: var(--spacing-4, 1rem) !important;
+  padding: var(--spacing-2, 0.5rem) !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.test-grid {
+  display: grid !important;
+  gap: var(--spacing-4, 1rem);
+  grid-template-columns: repeat(3, 1fr) !important;
+}
+
+.test-flex {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: var(--spacing-4, 1rem) !important;
+}
+
+.test-typography {
+  font-size: var(--fontSize-lg, 1.125rem) !important;
+  font-weight: var(--fontWeight-semibold, 600) !important;
+  text-align: center !important;
+}
+
+.test-layout {
+  width: 100% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: var(--spacing-4, 1rem) !important;
+  padding-right: var(--spacing-4, 1rem) !important;
+  max-width: 1024px !important;
+}