@atom-learning/components 6.0.0-beta.9 → 6.0.3

package/scripts/generate-responsive-variant-classes.mjs

@@ -0,0 +1,399 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import g from 'glob'
+import { Project, SyntaxKind } from 'ts-morph'
+
+const { glob } = g
+
+function extractArrayElements(node) {
+  if (node.getKind() !== SyntaxKind.ArrayLiteralExpression) return []
+
+  return node
+    .getElements()
+    .map((element) => {
+      if (element.getKind() === SyntaxKind.StringLiteral) {
+        try {
+          // Try to get the literal value first (handles escaped characters correctly)
+          return element.getLiteralValue()
+        } catch {
+          // Fallback: if getLiteralValue() fails, try to extract from text
+          // This can happen with malformed strings or edge cases
+          let text = element.getText().trim()
+          // Remove surrounding quotes
+          const quoteMatch = text.match(/^(['"`])([\s\S]*)\1$/)
+          if (quoteMatch) {
+            return quoteMatch[2]
+          }
+          // Remove quotes from start/end if not matched
+          return text.replace(/^['"`]+|['"`]+$/g, '').trim()
+        }
+      }
+      // Fallback for non-string-literal elements (template literals, etc.)
+      let text = element.getText().trim()
+      // Remove surrounding quotes (handles single, double, or backtick quotes at start/end)
+      const quoteMatch = text.match(/^(['"`])([\s\S]*)\1$/)
+      if (quoteMatch) {
+        text = quoteMatch[2]
+      } else {
+        // If no matching quotes, try removing any quotes from start/end separately
+        text = text.replace(/^['"`]+|['"`]+$/g, '')
+      }
+      return text.trim()
+    })
+    .filter(Boolean)
+}
+
+function getPropertyValue(obj, propName) {
+  const prop = obj
+    .getProperties()
+    .find(
+      (p) =>
+        p.getKind() === SyntaxKind.PropertyAssignment &&
+        p
+          .asKindOrThrow(SyntaxKind.PropertyAssignment)
+          .getNameNode()
+          .getText()
+          .replace(/['"]/g, '') === propName
+    )
+  return prop?.asKindOrThrow(SyntaxKind.PropertyAssignment).getInitializer()
+}
+
+function isEnabledResponsiveVariants(args) {
+  if (args.length < 3) return false
+  const optionsArg = args[2]
+  if (optionsArg.getKind() !== SyntaxKind.ObjectLiteralExpression) return false
+
+  const enabledProp = getPropertyValue(
+    optionsArg.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+    'enabledResponsiveVariants'
+  )
+  return enabledProp?.getKind() === SyntaxKind.TrueKeyword
+}
+
+function extractClasses(optionValue) {
+  if (optionValue.getKind() === SyntaxKind.ArrayLiteralExpression) {
+    return extractArrayElements(optionValue)
+  }
+  if (optionValue.getKind() === SyntaxKind.StringLiteral) {
+    return [optionValue.getLiteralValue()]
+  }
+  // Handle template literals or other string-like expressions
+  if (optionValue.getKind() === SyntaxKind.TemplateExpression) {
+    // For template literals, try to get the text and clean it up
+    const text = optionValue.getText().trim()
+    // Remove backticks if present
+    return [text.replace(/^`|`$/g, '')]
+  }
+  // Fallback: try to extract as text if it looks like a string
+  const text = optionValue.getText().trim()
+  if (
+    (text.startsWith("'") && text.endsWith("'")) ||
+    (text.startsWith('"') && text.endsWith('"')) ||
+    (text.startsWith('`') && text.endsWith('`'))
+  ) {
+    // Remove surrounding quotes
+    return [text.slice(1, -1)]
+  }
+  return []
+}
+
+function extractVariantsFromAST(sourceFile) {
+  const variants = {}
+
+  for (const call of sourceFile.getDescendantsOfKind(
+    SyntaxKind.CallExpression
+  )) {
+    const expression = call.getExpression()
+    // Check if the expression is 'styled' (trim to handle any whitespace edge cases)
+    const expressionText = expression.getText().trim()
+    if (expressionText !== 'styled') continue
+
+    const args = call.getArguments()
+    if (args.length < 2) continue
+
+    const configArg = args[1]
+    if (configArg.getKind() !== SyntaxKind.ObjectLiteralExpression) continue
+
+    if (!isEnabledResponsiveVariants(args)) continue
+
+    const configObj = configArg.asKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    )
+    const variantsValue = getPropertyValue(configObj, 'variants')
+
+    if (
+      !variantsValue ||
+      variantsValue.getKind() !== SyntaxKind.ObjectLiteralExpression
+    ) {
+      continue
+    }
+
+    const variantsObj = variantsValue.asKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    )
+
+    for (const variantProp of variantsObj.getProperties()) {
+      if (variantProp.getKind() !== SyntaxKind.PropertyAssignment) continue
+
+      const variant = variantProp.asKindOrThrow(SyntaxKind.PropertyAssignment)
+      const variantKey = variant.getNameNode().getText().replace(/['"]/g, '')
+      const variantValue = variant.getInitializer()
+
+      if (
+        !variantValue ||
+        variantValue.getKind() !== SyntaxKind.ObjectLiteralExpression
+      ) {
+        continue
+      }
+
+      const variantOptionsObj = variantValue.asKindOrThrow(
+        SyntaxKind.ObjectLiteralExpression
+      )
+      const options = {}
+
+      for (const optionProp of variantOptionsObj.getProperties()) {
+        if (optionProp.getKind() !== SyntaxKind.PropertyAssignment) continue
+
+        const option = optionProp.asKindOrThrow(SyntaxKind.PropertyAssignment)
+        const optionKey = option.getNameNode().getText().replace(/['"]/g, '')
+        const optionValue = option.getInitializer()
+
+        if (!optionValue) continue
+
+        const classes = extractClasses(optionValue)
+        if (classes.length > 0) {
+          options[optionKey] = classes
+        }
+      }
+
+      if (Object.keys(options).length > 0) {
+        // Merge variants if the same variant key already exists (from another styled() call)
+        if (variants[variantKey]) {
+          const existing = variants[variantKey]
+          const merged = { ...existing }
+          for (const [optionKey, optionValue] of Object.entries(options)) {
+            if (Array.isArray(optionValue)) {
+              // Merge arrays and deduplicate
+              const existingClasses = Array.isArray(merged[optionKey])
+                ? merged[optionKey]
+                : []
+              merged[optionKey] = [
+                ...new Set([...existingClasses, ...optionValue])
+              ]
+            } else {
+              merged[optionKey] = optionValue
+            }
+          }
+          variants[variantKey] = merged
+        } else {
+          variants[variantKey] = options
+        }
+      }
+    }
+  }
+
+  return Object.keys(variants).length > 0 ? variants : null
+}
+
+function generateResponsiveVariantClasses(variants) {
+  const breakpoints = ['sm', 'md', 'lg', 'xl']
+  const classes = new Set()
+
+  for (const variantOptions of Object.values(variants)) {
+    for (const classList of Object.values(variantOptions)) {
+      if (Array.isArray(classList)) {
+        for (const cls of classList) {
+          const trimmed = typeof cls === 'string' ? cls.trim() : ''
+          if (trimmed) {
+            classes.add(trimmed)
+            for (const bp of breakpoints) {
+              classes.add(`${bp}:${trimmed}`)
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).sort()
+}
+
+function extractUniqueClasses(allClasses) {
+  const uniqueClasses = new Set()
+
+  for (const cls of allClasses) {
+    const match = cls.match(/^(sm|md|lg|xl):(.+)$/)
+    uniqueClasses.add(match ? match[2] : cls)
+  }
+
+  return Array.from(uniqueClasses).sort()
+}
+
+/**
+ * Generate CSS file content with @source inline() patterns
+ */
+function generateCSSFileContent(allClasses) {
+  const uniqueClasses = extractUniqueClasses(allClasses)
+  const breakpointPrefix = `{,sm:,md:,lg:,xl:}`
+  const classPattern = `{${uniqueClasses.join(',')}}`
+  const pattern = `@source inline('${breakpointPrefix}${classPattern}');`
+
+  return `/**
+ * Tailwind Responsive Variant Classes Safelist (CSS Format)
+ * 
+ * ⚠️ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ⚠️
+ * 
+ * This file is automatically generated by the build script: scripts/generate-responsive-variant-classes.mjs
+ * Run \`yarn build:responsive-variant-classes\` to regenerate this file.
+ * 
+ * This file ensures Tailwind includes dynamically generated responsive classes
+ * when using responsive variants like: gap={{ '@initial': 1, '@sm': 3 }}
+ * 
+ * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
+ */
+
+${pattern}
+`
+}
+
+/**
+ * Main function to generate responsive variant classes safelist
+ *
+ * @param {Object} options - Generation options
+ * @param {string} [options.cwd] - Working directory
+ * @param {string|string[]} [options.input] - Input glob pattern(s). Can be a string or array of strings
+ * @param {string} [options.outputPath] - Output file path relative to cwd
+ */
+async function generateResponsiveVariantClassesSafelist(options = {}) {
+  const {
+    cwd = process.cwd(),
+    input = 'src/**/*.{ts,tsx}',
+    outputPath = 'src/responsive-variant-classes.css'
+  } = options
+  try {
+    console.log('🔍 Scanning component files for styled() variants...\n')
+
+    const project = new Project({
+      tsConfigFilePath: path.resolve(cwd, 'tsconfig.json'),
+      skipAddingFilesFromTsConfig: true
+    })
+
+    const patterns = Array.isArray(input) ? input : [input]
+    const ignorePatterns = [
+      '**/*.test.tsx',
+      '**/*.test.ts',
+      '**/__snapshots__/**',
+      '**/node_modules/**',
+      '**/responsive-variant-classes.css'
+    ]
+
+    const files = new Set()
+    for (const pattern of patterns) {
+      const matches = glob.sync(pattern, { cwd, ignore: ignorePatterns })
+      matches.forEach((file) => files.add(file))
+    }
+
+    const fileArray = Array.from(files)
+    console.log(`Found ${fileArray.length} component files to scan\n`)
+
+    const allVariants = {}
+    let processedFiles = 0
+
+    for (const filePath of fileArray) {
+      try {
+        const fullPath = path.isAbsolute(filePath)
+          ? filePath
+          : path.resolve(cwd, filePath)
+
+        if (!fs.readFileSync(fullPath, 'utf-8').includes('styled(')) continue
+
+        const sourceFile = project.addSourceFileAtPath(fullPath)
+        const variants = extractVariantsFromAST(sourceFile)
+
+        if (variants) {
+          console.log(`  ✓ ${path.relative(cwd, fullPath)}`)
+          for (const [key, value] of Object.entries(variants)) {
+            // Merge variant options, combining arrays instead of overwriting
+            if (allVariants[key]) {
+              const merged = { ...allVariants[key] }
+              for (const [optionKey, optionValue] of Object.entries(value)) {
+                if (Array.isArray(optionValue)) {
+                  // Merge arrays and deduplicate
+                  const existing = Array.isArray(merged[optionKey])
+                    ? merged[optionKey]
+                    : []
+                  merged[optionKey] = [
+                    ...new Set([...existing, ...optionValue])
+                  ]
+                } else {
+                  merged[optionKey] = optionValue
+                }
+              }
+              allVariants[key] = merged
+            } else {
+              allVariants[key] = value
+            }
+          }
+          processedFiles++
+        }
+      } catch (error) {
+        console.warn(`  ⚠️  Error processing ${filePath}:`, error.message)
+      }
+    }
+
+    if (Object.keys(allVariants).length === 0) {
+      console.log('\n⚠️  No variants found in component files')
+      return
+    }
+
+    console.log(`\n📦 Extracted variants from ${processedFiles} files`)
+    console.log(
+      `   Found ${Object.keys(allVariants).length} unique variant keys\n`
+    )
+
+    // Generate all responsive classes
+    const allClasses = generateResponsiveVariantClasses(allVariants)
+
+    console.log(
+      `✨ Generated ${allClasses.length} responsive variant class combinations\n`
+    )
+
+    // Generate and write the CSS file
+    const cssContent = generateCSSFileContent(allClasses)
+    const cssOutputPath = path.resolve(cwd, outputPath)
+    fs.writeFileSync(cssOutputPath, cssContent, 'utf-8')
+
+    console.log(`✅ Generated ${path.relative(cwd, cssOutputPath)}`)
+    console.log(`   Contains ${allClasses.length} variant class combinations\n`)
+  } catch (error) {
+    console.error('❌ Error generating responsive variant classes:', error)
+    process.exit(1)
+  }
+}
+
+// Export the function for use in other modules
+export { generateResponsiveVariantClassesSafelist }
+
+// Export internal functions for testing
+export {
+  extractArrayElements,
+  extractClasses,
+  extractVariantsFromAST,
+  generateResponsiveVariantClasses,
+  generateCSSFileContent
+}
+
+// Run the script if this file is executed directly (not imported)
+// Only execute if import.meta.url is available (skip in Jest/test environments where it may be undefined)
+try {
+  if (import.meta.url) {
+    const currentFileUrl = fileURLToPath(import.meta.url)
+    if (process.argv[1] === currentFileUrl) {
+      generateResponsiveVariantClassesSafelist()
+    }
+  }
+} catch {
+  // Ignore errors in test environments where import.meta.url might not work correctly
+  // This allows the module to be imported in tests without errors
+}

package/scripts/vite-plugin-tailwind-responsive-variant-classes.mjs

@@ -0,0 +1,93 @@
+import path from 'path'
+import { minimatch } from 'minimatch'
+
+import { generateResponsiveVariantClassesSafelist } from './generate-responsive-variant-classes.mjs'
+
+export function tailwindResponsiveVariantClasses(options = {}) {
+  const {
+    input = ['src/**/*.{ts,tsx}'],
+    cwd = process.cwd(),
+    outputPath = 'src/responsive-variant-classes.css'
+  } = options
+
+  let isGenerating = false
+  let generateTimeout = null
+
+  // Normalize input to always be an array
+  const patterns = Array.isArray(input) ? input : [input]
+
+  const matchesPattern = (filePath) => {
+    const relativePath = path.relative(cwd, filePath).replace(/\\/g, '/')
+    return patterns.some(
+      (pattern) =>
+        typeof pattern === 'string' && minimatch(relativePath, pattern)
+    )
+  }
+
+  async function generateResponsiveClasses() {
+    if (isGenerating) return Promise.resolve()
+
+    isGenerating = true
+
+    try {
+      await generateResponsiveVariantClassesSafelist({
+        cwd,
+        input,
+        outputPath
+      })
+      console.log('[responsive-classes] ✓ Generated responsive variant classes')
+    } catch (error) {
+      console.error(
+        '[responsive-classes] Error generating classes:',
+        error.message
+      )
+      throw error
+    } finally {
+      isGenerating = false
+    }
+  }
+
+  function debouncedGenerate() {
+    if (generateTimeout) clearTimeout(generateTimeout)
+    generateTimeout = setTimeout(() => {
+      generateResponsiveClasses().catch((error) => {
+        console.warn('[responsive-classes] Generation failed:', error.message)
+      })
+    }, 500)
+  }
+
+  return {
+    name: 'vite-plugin-responsive-classes',
+    enforce: 'pre',
+
+    async configResolved() {
+      try {
+        await generateResponsiveClasses()
+      } catch (error) {
+        console.warn(
+          '[responsive-classes] Initial generation failed:',
+          error.message
+        )
+      }
+    },
+
+    configureServer(server) {
+      const handleFileChange = (file) => {
+        if (matchesPattern(file)) {
+          debouncedGenerate()
+        }
+      }
+
+      server.watcher.on('change', handleFileChange)
+      server.watcher.on('add', handleFileChange)
+      server.watcher.on('unlink', handleFileChange)
+    },
+
+    handleHotUpdate({ file }) {
+      if (matchesPattern(file)) {
+        debouncedGenerate()
+        return []
+      }
+    }
+  }
+}

package/src/index.css

@@ -1,8 +1,4 @@
-@import 'tailwindcss';
-
-@import '@atom-learning/theme/lib/theme-atom.css';
-
-@source '../src/';
+@import './responsive-variant-classes.css';
 
 @theme {
   --default-font-family: var(--font-body);
@@ -110,6 +106,20 @@
       translate: -50% 50vh;
     }
   }
+
+  --animate-shimmer: shimmer 2000ms ease-in-out 500ms infinite;
+
+  @keyframes shimmer {
+    0% {
+      opacity: 1
+    }
+    50% {
+      opacity: 0.4
+    }
+    100% {
+      opacity: 1
+    }
+  }
 }
 
 @utility animation-delay-* {
@@ -159,3 +169,15 @@
 @utility readability-number-features {
   font-feature-settings: var(--readability-number-features);
 }
+
+@custom-variant supports-color-mix {
+  @supports (background-color: color-mix(in hsl, white 50%, transparent)) {
+    @slot;
+  }
+}
+
+@custom-variant supports-svh {
+  @supports (height: 100svh) {
+    @slot;
+  }
+}

package/src/responsive-variant-classes.css

@@ -0,0 +1,15 @@
+/**
+ * Tailwind Responsive Variant Classes Safelist (CSS Format)
+ * 
+ * ⚠️ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ⚠️
+ * 
+ * This file is automatically generated by the build script: scripts/generate-responsive-variant-classes.mjs
+ * Run `yarn build:responsive-variant-classes` to regenerate this file.
+ * 
+ * This file ensures Tailwind includes dynamically generated responsive classes
+ * when using responsive variants like: gap={{ '@initial': 1, '@sm': 3 }}
+ * 
+ * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
+ */
+
+@source inline('{,sm:,md:,lg:,xl:}{*:not-last:mr-2,*:not-last:mr-3,-mt-1,[&_svg]:size-4,[&_svg]:size-5,[&_svg]:size-[22px],[--active:rgba(255,255,255,0.75)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(255,255,255,0.9)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--solid-active:var(--color-grey-200)],[--solid-base:var(--color-white)],[--solid-interact:var(--color-grey-100)],[--solid-text:var(--color-grey-1200)],[--text:var(--color-grey-800)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,after:hidden!,before:hidden!,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-(--solid-base,var(--base)),bg-[unset],bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.1309],capsize-[0.2078],capsize-[0.2709],capsize-[0.3336],capsize-[0.3506],capsize-[0.3864],capsize-[0.3983],capsize-[0.4056],capsize-[0.4364],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],cursor-not-allowed opacity-60 pointer-events-none,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex-1,flex-[unset],flex-col,flex-col-reverse,flex-nowrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-1,h-10,h-12,h-16,h-2,h-24,h-8,h-full,h-px,h-screen,hidden,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.08],leading-[1.12],leading-[1.14],leading-[1.28],leading-[1.40],leading-[1.42],leading-[1.52],leading-[1.53],leading-[1.6],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-[90vh],max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-[90vw],max-w-full,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,not-disabled:active:bg-(--active),not-disabled:active:bg-(--solid-active,var(--active)),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:bg-(--solid-interact,var(--interact)),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--solid-text,white),not-disabled:focus:text-(--text,white),not-disabled:hover:bg-(--interact),not-disabled:hover:bg-(--solid-interact,var(--interact)),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--solid-text,white),not-disabled:hover:text-(--text,white),p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pr-10,pr-8,px-1,px-2,px-4,px-6,px-8,py-0,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-lg,rounded-md,rounded-none,rounded-sm,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,size-auto,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],supports-svh:h-auto,supports-svh:h-svh,supports-svh:max-h-[90vh],supports-svh:max-h-svh,text-(--base),text-(--foreground-7-plus),text-(--solid-text,white),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white!,text-xl,text-xs,top-0,top-2,top-4,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset]!,w-auto,w-full,w-max,w-px,w-screen}');