1.1.3

.prettierrc

@@ -13,9 +13,9 @@
   "useTabs": false,
   "overrides": [
     {
-      "files": ["source/01-global/icon/**/*.tsx"],
+      "files": ["source/01-global/icon/**/*.tsx", "source/01-global/icon/**/*.svg"],
       "options": {
-        "organizeImportsSkipDestructiveCodeActions": true
+        "plugins": []
       }
     }
   ]

.storybook/main.js

@@ -13,7 +13,6 @@ module.exports = {
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: { builder: { useSWC: true } },
   },
   webpackFinal: async config => {
     config.plugins.push(

.storybook/preview.js

@@ -4,7 +4,6 @@ import '../source/01-global/index.css';
 import '../source/06-utility/index.css';
 
 const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,

.stylelintrc.yml

@@ -28,6 +28,7 @@ rules:
         - global
         - iff
         - 'responsive-font-size'
+        - 'rem-convert'
   import-notation: string
   max-nesting-depth: 4
   number-max-precision: null

lib/icon-template.js

@@ -53,9 +53,12 @@ const iconTemplate = (
   }
 
   return tpl`
+// organize-imports-ignore
+
 // This component is automatically generated.
 // SVGs should be added to icon/svgs.
 // See the project documentation for more information.
+
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 ${imports};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-project",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -30,25 +30,23 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
     "@csstools/postcss-global-data": "^2.1.1",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/nextjs": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/addon-a11y": "^8.0.2",
+    "@storybook/addon-actions": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/nextjs": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/test": "^8.0.2",
+    "@storybook/theming": "^8.0.2",
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.1.0",
     "@types/node": "^18.19.3",
     "@types/react": "^18.2.48",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
-    "babel-loader": "^9.1.3",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "clsx": "^2.1.0",
     "css-loader": "^6.9.1",
     "csstype": "3.1.3",
@@ -58,25 +56,23 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "html-react-parser": "^5.1.1",
-    "husky": "^8.0.3",
-    "i": "^0.3.7",
+    "husky": "^9.0.11",
     "inquirer": "^9.2.12",
     "mkdirp": "^3.0.1",
-    "npm": "^10.2.5",
     "postcss": "^8.4.33",
     "postcss-advanced-variables": "github:kmonahan/postcss-advanced-variables",
-    "postcss-loader": "^7.3.4",
+    "postcss-loader": "^8.1.1",
     "postcss-nesting": "^12.0.2",
     "postcss-preset-env": "^9.3.0",
-    "postcss-rem": "^2.0.2",
+    "postcss-rem": "^3.0.0",
     "prettier": "^3.2.4",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.2",
     "style-loader": "^3.3.4",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard": "^33.0.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-webpack-plugin": "^4.1.1",
+    "stylelint-webpack-plugin": "^5.0.0",
     "typescript": "^5.3.3",
     "yaml": "^2.3.4"
   },

source/00-config/mixins/grids.css

@@ -82,7 +82,10 @@
   @param {String} $item-min-width Minimum column width.
   @param {Boolean} $flex-override Whether to reset styling to remove flex constrains first.
  */
-@mixin css-autofit-grid($item-min-width: rem(300px), $flex-override: false) {
+@mixin css-autofit-grid(
+  $item-min-width: rem-convert(300px),
+  $flex-override: false
+) {
   @if $flex-override {
     @include css-grid-reset();
   }

source/00-config/vars/constrain.css

@@ -1,5 +1,5 @@
 :root {
-  --constrain-sm: rem(800px);
-  --constrain-md: rem(1440px);
-  --constrain-lg: rem(2200px);
+  --constrain-sm: rem-convert(800px);
+  --constrain-md: rem-convert(1440px);
+  --constrain-lg: rem-convert(2200px);
 }

source/00-config/vars/spacing.css

@@ -1,28 +1,28 @@
 :root {
   --spacing-0: 0;
-  --spacing-0-5: rem(4px);
-  --spacing-1: rem(8px);
-  --spacing-1-5: rem(12px);
-  --spacing-2: rem(16px);
-  --spacing-2-5: rem(20px);
-  --spacing-3: rem(24px);
-  --spacing-4: rem(32px);
-  --spacing-5: rem(40px);
-  --spacing-6: rem(48px);
-  --spacing-7: rem(56px);
-  --spacing-8: rem(64px);
-  --spacing-9: rem(72px);
-  --spacing-10: rem(80px);
-  --spacing-12: rem(96px);
-  --spacing-15: rem(120px);
+  --spacing-0-5: rem-convert(4px);
+  --spacing-1: rem-convert(8px);
+  --spacing-1-5: rem-convert(12px);
+  --spacing-2: rem-convert(16px);
+  --spacing-2-5: rem-convert(20px);
+  --spacing-3: rem-convert(24px);
+  --spacing-4: rem-convert(32px);
+  --spacing-5: rem-convert(40px);
+  --spacing-6: rem-convert(48px);
+  --spacing-7: rem-convert(56px);
+  --spacing-8: rem-convert(64px);
+  --spacing-9: rem-convert(72px);
+  --spacing-10: rem-convert(80px);
+  --spacing-12: rem-convert(96px);
+  --spacing-15: rem-convert(120px);
 
-  --gutter-width: rem(40px);
+  --gutter-width: rem-convert(40px);
 
-  --site-margins: rem(16px);
+  --site-margins: rem-convert(16px);
 }
 
 @media (--desktop) {
   :root {
-    --site-margins: rem(32px);
+    --site-margins: rem-convert(32px);
   }
 }

source/00-config/vars/typography.css

@@ -10,21 +10,21 @@
 
   --base-font-size: 16px;
 
-  --font-size-1: rem(12px);
-  --font-size-2: rem(14px);
-  --font-size-3: rem(16px);
-  --font-size-4: rem(18px);
-  --font-size-5: rem(21px);
-  --font-size-6: rem(23px);
-  --font-size-7: rem(26px);
-  --font-size-8: rem(30px);
-  --font-size-9: rem(34px);
-  --font-size-10: rem(39px);
-  --font-size-11: rem(44px);
-  --font-size-12: rem(50px);
-  --font-size-13: rem(56px);
-  --font-size-14: rem(64px);
-  --font-size-15: rem(72px);
+  --font-size-1: rem-convert(12px);
+  --font-size-2: rem-convert(14px);
+  --font-size-3: rem-convert(16px);
+  --font-size-4: rem-convert(18px);
+  --font-size-5: rem-convert(21px);
+  --font-size-6: rem-convert(23px);
+  --font-size-7: rem-convert(26px);
+  --font-size-8: rem-convert(30px);
+  --font-size-9: rem-convert(34px);
+  --font-size-10: rem-convert(39px);
+  --font-size-11: rem-convert(44px);
+  --font-size-12: rem-convert(50px);
+  --font-size-13: rem-convert(56px);
+  --font-size-14: rem-convert(64px);
+  --font-size-15: rem-convert(72px);
 
   /* The max value should never be more than 2.5 times the min value.
     https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/ */

source/01-global/00-colors/color.module.css

@@ -1,6 +1,6 @@
 .group {
   --swatch-padding: 1rem;
-  --swatch-size: rem(150px);
+  --swatch-size: rem-convert(150px);
 
   border-bottom: 1px solid #eee;
   display: flex;
@@ -27,11 +27,11 @@
 }
 
 .name {
-  margin-bottom: rem(8px);
+  margin-bottom: rem-convert(8px);
 }
 
 .hex {
   font-family: Menlo, Consolas, 'Lucida Console', 'Liberation Mono',
     'Courier New', monospace, sans-serif;
-  font-size: rem(14px);
+  font-size: rem-convert(14px);
 }

source/01-global/01-typography/fonts.module.css

@@ -1,11 +1,11 @@
 .fonts {
-  margin-bottom: rem(45px);
+  margin-bottom: rem-convert(45px);
 }
 
 .family {
-  font-size: rem(20px);
+  font-size: rem-convert(20px);
   font-weight: 700;
-  margin-bottom: rem(5px);
+  margin-bottom: rem-convert(5px);
   text-align: center;
 
   @media (width >= 800px) {
@@ -16,7 +16,7 @@
 .item {
   display: flex;
   flex-direction: column;
-  margin: rem(30px) 0;
+  margin: rem-convert(30px) 0;
 
   @media (width >= 800px) {
     flex-direction: row;
@@ -25,25 +25,25 @@
 
 .preview {
   border-bottom: 2px solid #eee;
-  font-size: rem(18px);
+  font-size: rem-convert(18px);
   font-style: normal;
   font-weight: 400;
-  padding: rem(20px) 0;
+  padding: rem-convert(20px) 0;
   text-align: center;
   width: 100%;
 
   @media (width >= 800px) {
     border-bottom: 0;
     border-right: 2px solid #eee;
-    margin: rem(5px) rem(30px) 0 0;
-    padding: 0 rem(20px);
+    margin: rem-convert(5px) rem-convert(30px) 0 0;
+    padding: 0 rem-convert(20px);
     text-align: left;
     width: 65%;
   }
 }
 
 .preview-character {
-  font-size: rem(75px);
+  font-size: rem-convert(75px);
   font-weight: 400;
   line-height: 1;
   text-align: center;
@@ -73,17 +73,17 @@
   color: #565454;
   font-size: 0.9rem;
   line-height: 1.5;
-  margin: rem(5px) 0;
+  margin: rem-convert(5px) 0;
 }
 
 .weight {
   color: #000;
-  font-size: rem(13px);
-  margin-bottom: rem(5px);
+  font-size: rem-convert(13px);
+  margin-bottom: rem-convert(5px);
 }
 
 .style {
   color: #000;
-  font-size: rem(13px);
-  margin-bottom: rem(5px);
+  font-size: rem-convert(13px);
+  margin-bottom: rem-convert(5px);
 }

source/01-global/03-box-shadow/shadows.module.css

@@ -1,4 +1,4 @@
-$shadow-swatch: rem(200px);
+$shadow-swatch: rem-convert(200px);
 
 .box-shadow {
   display: flex;
@@ -9,7 +9,7 @@ $shadow-swatch: rem(200px);
   display: flex;
   flex: 0 0 $shadow-swatch;
   height: $shadow-swatch;
-  margin: 0 rem(25px) rem(50px);
+  margin: 0 rem-convert(25px) rem-convert(50px);
   width: $shadow-swatch;
 }
 

source/01-global/04-transitions/duration.module.css

@@ -1,4 +1,4 @@
-$duration-swatch: rem(40px);
+$duration-swatch: rem-convert(40px);
 
 .duration {
   margin-bottom: 1rem;
@@ -33,7 +33,7 @@ $duration-swatch: rem(40px);
 }
 
 .item {
-  flex: 0 0 rem(150px);
+  flex: 0 0 rem-convert(150px);
   padding: 1rem;
   text-align: center;
 }

source/01-global/04-transitions/easing.module.css

@@ -1,4 +1,4 @@
-$easing-swatch: rem(75px);
+$easing-swatch: rem-convert(75px);
 
 .easing {
   background-color: #eee;
@@ -22,7 +22,7 @@ $easing-swatch: rem(75px);
 }
 
 .group {
-  padding: 0 rem(150px) 0 1rem;
+  padding: 0 rem-convert(150px) 0 1rem;
 
   &:hover {
     .indicator {