diff --git a/README.md b/README.md
index bdd1008c9..f364479f0 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,115 @@ You can test this package using the embedded storybook. Please follow these step
2. Start Story book by running `yarn storybook`
3. Open any browser and go to `http://localhost:6006`
+## How to implement in your application
+
+To implement the MinIO Design System in your application, you can follow these steps:
+
+1. Install the package by running `yarn add http://github.com/minio/mds#[Version]`. Replace `[Version]` with the version you want to install.
+2. Import the required Geist & Geist Mono fonts in your application using your preferred method, Font Variants described as follows:
+
+```css
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistBoldWoff2}) format("woff2")`,
+ fontWeight: "bold",
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistMediumWoff2}) format("woff2")`,
+ fontWeight: 500,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistSemiBoldWoff2}) format("woff2")`,
+ fontWeight: 600,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistLightWoff2}) format("woff2")`,
+ fontWeight: 300,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistUltraLightWoff2}) format("woff2")`,
+ fontWeight: 200,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistBlackWoff2}) format('woff2')`,
+ fontWeight: 900,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistRegularWoff2}) format('woff2')`,
+ fontWeight: "normal",
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "Geist",
+ src: `url(${GeistThinWoff2}) format('woff2')`,
+ fontWeight: 100,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+ {
+ "@font-face": {
+ fontFamily: "GeistMono",
+ src: `url(${GeistMonoRegularWoff2}) format('woff2')`,
+ fontWeight: 400,
+ fontStyle: "normal",
+ fontDisplay: "swap",
+ },
+ },
+
+```
+3. Create an `mds.d.ts` file in the root of your project and add the following code and import it into your tsconfig.json file:
+
+```typescript
+import { ThemeDefinition } from "mds";
+
+import "@emotion/react";
+
+declare module "@emotion/react" {
+ export type Theme = ThemeDefinition;
+}
+```
+This is required to have the correct types for the theme object in your application.
+
+4. Import the required components in your application. For example, to import the Button component, you can use `import { Button } from 'mds'`.
+5. Use the imported component in your application.
+
+
+
## Build distribution files
To create distribution files you can run `yarn build` or `make build` in source folder. This will create the required dist folders.
diff --git a/src/components/GlobalStyles/index.tsx b/src/components/GlobalStyles/index.tsx
index 40e63d5b0..1fec73587 100644
--- a/src/components/GlobalStyles/index.tsx
+++ b/src/components/GlobalStyles/index.tsx
@@ -16,100 +16,6 @@
import { css, Global, useTheme } from "@emotion/react";
-import GeistBlackWoff2 from "../assets/fonts/Geist/Geist-Black.woff2";
-import GeistBoldWoff2 from "../assets/fonts/Geist/Geist-Bold.woff2";
-import GeistLightWoff2 from "../assets/fonts/Geist/Geist-Light.woff2";
-import GeistMediumWoff2 from "../assets/fonts/Geist/Geist-Medium.woff2";
-import GeistRegularWoff2 from "../assets/fonts/Geist/Geist-Regular.woff2";
-import GeistSemiBoldWoff2 from "../assets/fonts/Geist/Geist-SemiBold.woff2";
-import GeistThinWoff2 from "../assets/fonts/Geist/Geist-Thin.woff2";
-import GeistUltraLightWoff2 from "../assets/fonts/Geist/Geist-UltraLight.woff2";
-import GeistMonoRegularWoff2 from "../assets/fonts/Geist/GeistMono-Regular.woff2";
-
-const geistFonts = css([
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistBoldWoff2}) format("woff2")`,
- fontWeight: "bold",
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistMediumWoff2}) format("woff2")`,
- fontWeight: 500,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistSemiBoldWoff2}) format("woff2")`,
- fontWeight: 600,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistLightWoff2}) format("woff2")`,
- fontWeight: 300,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistUltraLightWoff2}) format("woff2")`,
- fontWeight: 200,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistBlackWoff2}) format('woff2')`,
- fontWeight: 900,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistRegularWoff2}) format('woff2')`,
- fontWeight: "normal",
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "Geist",
- src: `url(${GeistThinWoff2}) format('woff2')`,
- fontWeight: 100,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
- {
- "@font-face": {
- fontFamily: "GeistMono",
- src: `url(${GeistMonoRegularWoff2}) format('woff2')`,
- fontWeight: 400,
- fontStyle: "normal",
- fontDisplay: "swap",
- },
- },
-]);
-
const GlobalStyles = () => {
const theme = useTheme();
@@ -299,7 +205,7 @@ const GlobalStyles = () => {
},
});
- return ;
+ return ;
};
export default GlobalStyles;
diff --git a/src/components/assets/fonts/Geist/Geist-Black.woff2 b/src/components/assets/fonts/Geist/Geist-Black.woff2
deleted file mode 100644
index c8230cbc6..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-Black.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-Bold.woff2 b/src/components/assets/fonts/Geist/Geist-Bold.woff2
deleted file mode 100644
index d0562e48e..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-Bold.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-Light.woff2 b/src/components/assets/fonts/Geist/Geist-Light.woff2
deleted file mode 100644
index 56611204f..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-Light.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-Medium.woff2 b/src/components/assets/fonts/Geist/Geist-Medium.woff2
deleted file mode 100644
index 76edd1051..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-Medium.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-Regular.woff2 b/src/components/assets/fonts/Geist/Geist-Regular.woff2
deleted file mode 100644
index 2ebd0097e..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-Regular.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-SemiBold.woff2 b/src/components/assets/fonts/Geist/Geist-SemiBold.woff2
deleted file mode 100644
index a6c53e8b0..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-SemiBold.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-Thin.woff2 b/src/components/assets/fonts/Geist/Geist-Thin.woff2
deleted file mode 100644
index a330c0753..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-Thin.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-UltraBlack.woff2 b/src/components/assets/fonts/Geist/Geist-UltraBlack.woff2
deleted file mode 100644
index 198caeadc..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-UltraBlack.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/Geist-UltraLight.woff2 b/src/components/assets/fonts/Geist/Geist-UltraLight.woff2
deleted file mode 100644
index 541685251..000000000
Binary files a/src/components/assets/fonts/Geist/Geist-UltraLight.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/GeistMono-Regular.woff2 b/src/components/assets/fonts/Geist/GeistMono-Regular.woff2
deleted file mode 100644
index 1603e0eb7..000000000
Binary files a/src/components/assets/fonts/Geist/GeistMono-Regular.woff2 and /dev/null differ
diff --git a/src/components/assets/fonts/Geist/LICENSE.TXT b/src/components/assets/fonts/Geist/LICENSE.TXT
deleted file mode 100644
index df71062c1..000000000
--- a/src/components/assets/fonts/Geist/LICENSE.TXT
+++ /dev/null
@@ -1,92 +0,0 @@
-Geist Sans and Geist Mono Font
-(C) 2023 Vercel, made in collaboration with basement.studio
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION AND CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.