From 2957bb4b2236c1f50777a45e47afb0f7aca9007c Mon Sep 17 00:00:00 2001
From: Anthony Leung <pandaofc@gmail.com>
Date: Mon, 1 Apr 2024 16:32:31 +0100
Subject: [PATCH] fix: #1 font import issue

---
 .npmignore            | 2 ++
 .storybook/preview.ts | 5 -----
 CHANGELOG.md          | 5 +++++
 package.json          | 2 +-
 src/styles.css        | 4 ++--
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/.npmignore b/.npmignore
index c6a964c..df27aea 100644
--- a/.npmignore
+++ b/.npmignore
@@ -53,3 +53,5 @@ __tests__/
 /examples/
 /Dockerfile
 /docker-compose.yml
+
+/storybook-static/
\ No newline at end of file
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 50a6756..5a80135 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,10 +1,5 @@
 import type { Preview } from '@storybook/react'
 
-import '@fontsource/roboto/300.css'
-import '@fontsource/roboto/400.css'
-import '@fontsource/roboto/500.css'
-import '@fontsource/roboto/700.css'
-import 'material-symbols'
 import '../src/styles.css'
 
 const preview: Preview = {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb7a8ed..a599a83 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.7] - 2024-04-01
+
+### Fixed
+- Fixed the @fontsource/roboto css import issue in vite bundler.
+
 ## [1.0.6] - 2024-04-01
 
 ### Fixed
diff --git a/package.json b/package.json
index c6f7963..7fcf30a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-material-web",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "A React Material components using material web and lit/react",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
diff --git a/src/styles.css b/src/styles.css
index 818ddc7..42965e6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,11 +1,11 @@
 @import 'material-symbols';
-@import '~@fontsource/roboto';
+@import '@fontsource/roboto';
 
 label {
     display: inline-flex;
     place-items: center;
     gap: 8px;
-    font-family: Roboto, system-ui;
+    font-family: "Roboto", system-ui;
     color: var(--md-sys-color-on-background, #000);
 }