@shohojdhara/atomix 0.1.16 → 0.1.18

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.16",
-  "description": "Atomix Design System - A modern component library for web applications",
-  "main": "dist/js/atomix.react.esm.js",
+  "version": "0.1.18",
+  "description": "Atomix Design System - A modern component library for Web, React and Next.js applications with SSR support",
+  "main": "dist/js/atomix.react.cjs.js",
   "module": "dist/js/atomix.react.esm.js",
   "unpkg": "dist/js/atomix.react.umd.js",
   "jsdelivr": "dist/js/atomix.react.umd.js",
@@ -29,7 +29,13 @@
       "types": "./css.d.ts",
       "default": "./dist/css/atomix.min.css"
     },
-    "./scss": "./src/styles/index.scss"
+    "./scss": "./src/styles/index.scss",
+    "./next": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/js/atomix.react.esm.js",
+      "require": "./dist/js/atomix.react.cjs.js",
+      "default": "./dist/js/atomix.react.esm.js"
+    }
   },
   "typesVersions": {
     "*": {
@@ -40,9 +46,6 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.27.6",
-    "@types/classnames": "^2.3.0",
-    "@types/node": "^20.0.0",
-    "@types/react-router-dom": "^5.3.3",
     "classnames": "^2.5.1",
     "phosphor-react": "^1.4.1",
     "prism-react-renderer": "^2.4.1",
@@ -54,6 +57,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
+    "@release-it/conventional-changelog": "10.0.1",
     "@size-limit/preset-app": "^11.0.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
@@ -63,8 +67,11 @@
     "@storybook/react": "^8.0.0",
     "@storybook/react-webpack5": "^8.6.12",
     "@storybook/test": "^8.0.0",
+    "@types/classnames": "^2.3.0",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.34.0",
     "@typescript-eslint/parser": "^8.34.0",
     "autoprefixer": "^10.4.21",
@@ -93,6 +100,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^10.2.3",
     "prettier": "^3.5.3",
+    "release-it": "19.0.3",
     "rimraf": "^5.0.5",
     "sass-embedded": "^1.87.0",
     "sass-loader": "^16.0.5",
@@ -108,89 +116,119 @@
     "webpack-dev-server": "^5.2.1",
     "webpack-node-externals": "^3.0.0"
   },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "predeploy": "npm run build-storybook && node scripts/prepare-deploy.js",
     "deploy": "gh-pages -d deploy",
-    "// Build scripts": "",
-    "build": "npm run build:components",
-    "build:components": "npm-run-all clean:dist build:styles build:react build:types",
+    "build": "npm run build:all",
+    "build:all": "npm-run-all clean:dist build:styles build:react build:types",
     "build:react": "webpack --mode production --env target=components --env format=all",
     "build:styles": "webpack --mode production --env target=styles",
     "build:types": "npm run clean:types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types && node scripts/fix-types.js",
     "build:cjs": "webpack --mode production --env target=components --env format=cjs",
     "build:esm": "webpack --mode production --env target=components --env format=esm",
     "build:umd": "webpack --mode production --env target=components --env format=umd",
-    "// Utility scripts": "",
+    "clean": "npm run clean:all",
     "clean:dist": "rimraf dist",
     "clean:types": "rimraf dist/types",
     "clean:all": "npm-run-all clean:dist clean:types",
-    "// Analysis scripts": "",
+    "test": "npm run test:types && npm run test:lint && npm run test:format",
+    "test:types": "tsc --noEmit",
+    "test:lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
+    "test:format": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
+    "test:size": "size-limit",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src/ --fix",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
+    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
+    "typecheck": "tsc --noEmit",
     "analyze:bundle": "webpack --mode production --env target=components --env format=all --env analyze=true",
     "analyze:size": "size-limit",
     "analyze:all": "npm-run-all analyze:bundle analyze:size",
-    "// Version scripts": "",
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
-    "// Publishing scripts": "",
-    "prepublishOnly": "npm-run-all test build",
-    "test:publish": "npm pack --dry-run",
-    "publish:rc": "npm publish --tag next",
-    "publish:latest": "npm publish",
-    "// Development scripts": "",
+    "prepack": "npm run build && npm run test",
+    "prepublishOnly": "npm run prepack",
+    "postpublish": "echo 'Package published successfully! 🎉'",
+    "release:patch": "npm run version:patch && npm publish",
+    "release:minor": "npm run version:minor && npm publish",
+    "release:major": "npm run version:major && npm publish",
+    "release:beta": "npm version prerelease --preid=beta && npm publish --tag beta",
+    "release:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
+    "release:rc": "npm version prerelease --preid=rc && npm publish --tag next",
+    "pack:test": "npm pack --dry-run",
+    "pack:local": "npm pack",
     "link:local": "npm link && echo 'Package linked locally. Use npm link @shohojdhara/atomix in your project to test it.'",
-    "unlink:local": "npm unlink",
-    "test": "echo \"No tests specified\" && exit 0",
-    "// Linting and formatting scripts": "",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src/ --fix",
-    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
-    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
-    "typecheck": "tsc --noEmit"
+    "unlink:local": "npm unlink"
   },
   "files": [
-    "src",
     "dist",
-    "index.d.ts",
-    "css.d.ts",
+    "src",
     "README.md",
     "LICENSE",
     "CHANGELOG.md",
-    "NPM_PUBLISHING.md"
+    "CONTRIBUTING.md",
+    "NEXTJS_INTEGRATION.md",
+    "next.config.js",
+    "css.d.ts",
+    "examples",
+    "implementation-guide.md",
+    "tsconfig.json",
+    "babel.config.js",
+    "postcss.config.js",
+    "webpack.config.js"
   ],
   "keywords": [
     "ui",
     "components",
     "design-system",
     "react",
-    "javascript",
+    "nextjs",
+    "next.js",
     "typescript",
     "css",
-    "scss"
+    "scss",
+    "ui-library",
+    "component-library",
+    "design-tokens",
+    "accessibility",
+    "responsive",
+    "modern",
+    "frontend",
+    "ssr",
+    "server-side-rendering"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/liimonx/atomix.git"
   },
-  "author": "liimonx <liimonx@shohojdhara.org>",
+  "author": {
+    "name": "liimonx",
+    "email": "liimonx@shohojdhara.org",
+    "url": "https://github.com/liimonx"
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/liimonx/atomix/issues"
   },
-  "homepage": "https://github.com/liimonx/atomix#readme",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
+  "homepage": "https://liimonx.github.io/atomix",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/",
-    "scope": "@shohojdhara"
+    "registry": "https://registry.npmjs.org/"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/liimonx"
   }
 }

package/postcss.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-flexbugs-fixes': {},
+    'postcss-preset-env': {
+      autoprefixer: {
+        flexbox: 'no-2009',
+        grid: 'autoplace'
+      },
+      stage: 3,
+      features: {
+        'custom-properties': false,
+        'nesting-rules': true
+      }
+    },
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production' ? {
+      cssnano: {
+        preset: ['default', {
+          discardComments: {
+            removeAll: true,
+          },
+          normalizeWhitespace: false,
+        }],
+      }
+    } : {})
+  },
+}

package/src/Introduction.mdx

@@ -12,16 +12,15 @@ To start using the Atomix Design System in your project, follow these steps:
 
 1.  **Installation:** (Assuming you use npm or yarn)
     ```bash
-    npm install @your-package-name/atomix # or yarn add @your-package-name/atomix
+    npm install @shohojdhara/atomix # or yarn add @shohojdhara/atomix
     ```
-    (Note: Replace `@your-package-name/atomix` with the actual package name if it's published)
 
 2.  **Usage:**
     Import components and styles into your project as needed.
 
     ```javascript
-    import { Button } from '@your-package-name/atomix';
-    import '@your-package-name/atomix/dist/styles.css'; // Assuming you have a main CSS file
+    import { Button } from '@shohojdhara/atomix';
+    import '@shohojdhara/atomix/dist/atomix.css'; // Assuming you have a main CSS file
 
     function MyComponent() {
       return (
@@ -29,7 +28,6 @@ To start using the Atomix Design System in your project, follow these steps:
       );
     }
     ```
-    (Note: Adjust import paths based on your package structure)
 
 ## Explore Components
 

package/src/assets/fonts/HelveticaNeue/stylesheet.css

@@ -1,168 +1,181 @@
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue.eot');
-    src: url('HelveticaNeue.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue.woff2') format('woff2'),
-        url('HelveticaNeue.woff') format('woff'),
-        url('HelveticaNeue.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue.eot');
+  src:
+    url('HelveticaNeue.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue.woff2') format('woff2'),
+    url('HelveticaNeue.woff') format('woff'),
+    url('HelveticaNeue.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-BoldItalic.eot');
-    src: url('HelveticaNeue-BoldItalic.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-BoldItalic.woff2') format('woff2'),
-        url('HelveticaNeue-BoldItalic.woff') format('woff'),
-        url('HelveticaNeue-BoldItalic.ttf') format('truetype');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-BoldItalic.eot');
+  src:
+    url('HelveticaNeue-BoldItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-BoldItalic.woff2') format('woff2'),
+    url('HelveticaNeue-BoldItalic.woff') format('woff'),
+    url('HelveticaNeue-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-Bold.eot');
-    src: url('HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-Bold.woff2') format('woff2'),
-        url('HelveticaNeue-Bold.woff') format('woff'),
-        url('HelveticaNeue-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Bold.eot');
+  src:
+    url('HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Bold.woff2') format('woff2'),
+    url('HelveticaNeue-Bold.woff') format('woff'),
+    url('HelveticaNeue-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-CondensedBlack.eot');
-    src: url('HelveticaNeue-CondensedBlack.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-CondensedBlack.woff2') format('woff2'),
-        url('HelveticaNeue-CondensedBlack.woff') format('woff'),
-        url('HelveticaNeue-CondensedBlack.ttf') format('truetype');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-CondensedBlack.eot');
+  src:
+    url('HelveticaNeue-CondensedBlack.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-CondensedBlack.woff2') format('woff2'),
+    url('HelveticaNeue-CondensedBlack.woff') format('woff'),
+    url('HelveticaNeue-CondensedBlack.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-Italic.eot');
-    src: url('HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-Italic.woff2') format('woff2'),
-        url('HelveticaNeue-Italic.woff') format('woff'),
-        url('HelveticaNeue-Italic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Italic.eot');
+  src:
+    url('HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Italic.woff2') format('woff2'),
+    url('HelveticaNeue-Italic.woff') format('woff'),
+    url('HelveticaNeue-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-CondensedBold.eot');
-    src: url('HelveticaNeue-CondensedBold.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-CondensedBold.woff2') format('woff2'),
-        url('HelveticaNeue-CondensedBold.woff') format('woff'),
-        url('HelveticaNeue-CondensedBold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-CondensedBold.eot');
+  src:
+    url('HelveticaNeue-CondensedBold.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-CondensedBold.woff2') format('woff2'),
+    url('HelveticaNeue-CondensedBold.woff') format('woff'),
+    url('HelveticaNeue-CondensedBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-Light.eot');
-    src: url('HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-Light.woff2') format('woff2'),
-        url('HelveticaNeue-Light.woff') format('woff'),
-        url('HelveticaNeue-Light.ttf') format('truetype');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Light.eot');
+  src:
+    url('HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Light.woff2') format('woff2'),
+    url('HelveticaNeue-Light.woff') format('woff'),
+    url('HelveticaNeue-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-LightItalic.eot');
-    src: url('HelveticaNeue-LightItalic.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-LightItalic.woff2') format('woff2'),
-        url('HelveticaNeue-LightItalic.woff') format('woff'),
-        url('HelveticaNeue-LightItalic.ttf') format('truetype');
-    font-weight: 300;
-    font-style: italic;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-LightItalic.eot');
+  src:
+    url('HelveticaNeue-LightItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-LightItalic.woff2') format('woff2'),
+    url('HelveticaNeue-LightItalic.woff') format('woff'),
+    url('HelveticaNeue-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-Thin.eot');
-    src: url('HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-Thin.woff2') format('woff2'),
-        url('HelveticaNeue-Thin.woff') format('woff'),
-        url('HelveticaNeue-Thin.ttf') format('truetype');
-    font-weight: 100;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Thin.eot');
+  src:
+    url('HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Thin.woff2') format('woff2'),
+    url('HelveticaNeue-Thin.woff') format('woff'),
+    url('HelveticaNeue-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-Medium.eot');
-    src: url('HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-Medium.woff2') format('woff2'),
-        url('HelveticaNeue-Medium.woff') format('woff'),
-        url('HelveticaNeue-Medium.ttf') format('truetype');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-Medium.eot');
+  src:
+    url('HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-Medium.woff2') format('woff2'),
+    url('HelveticaNeue-Medium.woff') format('woff'),
+    url('HelveticaNeue-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-MediumItalic.eot');
-    src: url('HelveticaNeue-MediumItalic.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-MediumItalic.woff2') format('woff2'),
-        url('HelveticaNeue-MediumItalic.woff') format('woff'),
-        url('HelveticaNeue-MediumItalic.ttf') format('truetype');
-    font-weight: 500;
-    font-style: italic;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-MediumItalic.eot');
+  src:
+    url('HelveticaNeue-MediumItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-MediumItalic.woff2') format('woff2'),
+    url('HelveticaNeue-MediumItalic.woff') format('woff'),
+    url('HelveticaNeue-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-UltraLightItalic.eot');
-    src: url('HelveticaNeue-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-UltraLightItalic.woff2') format('woff2'),
-        url('HelveticaNeue-UltraLightItalic.woff') format('woff'),
-        url('HelveticaNeue-UltraLightItalic.ttf') format('truetype');
-    font-weight: 100;
-    font-style: italic;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-UltraLightItalic.eot');
+  src:
+    url('HelveticaNeue-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-UltraLightItalic.woff2') format('woff2'),
+    url('HelveticaNeue-UltraLightItalic.woff') format('woff'),
+    url('HelveticaNeue-UltraLightItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-UltraLight.eot');
-    src: url('HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-UltraLight.woff2') format('woff2'),
-        url('HelveticaNeue-UltraLight.woff') format('woff'),
-        url('HelveticaNeue-UltraLight.ttf') format('truetype');
-    font-weight: 100;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-UltraLight.eot');
+  src:
+    url('HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-UltraLight.woff2') format('woff2'),
+    url('HelveticaNeue-UltraLight.woff') format('woff'),
+    url('HelveticaNeue-UltraLight.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Helvetica Neue';
-    src: url('HelveticaNeue-ThinItalic.eot');
-    src: url('HelveticaNeue-ThinItalic.eot?#iefix') format('embedded-opentype'),
-        url('HelveticaNeue-ThinItalic.woff2') format('woff2'),
-        url('HelveticaNeue-ThinItalic.woff') format('woff'),
-        url('HelveticaNeue-ThinItalic.ttf') format('truetype');
-    font-weight: 100;
-    font-style: italic;
-    font-display: swap;
+  font-family: 'Helvetica Neue';
+  src: url('HelveticaNeue-ThinItalic.eot');
+  src:
+    url('HelveticaNeue-ThinItalic.eot?#iefix') format('embedded-opentype'),
+    url('HelveticaNeue-ThinItalic.woff2') format('woff2'),
+    url('HelveticaNeue-ThinItalic.woff') format('woff'),
+    url('HelveticaNeue-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
 }
-