diff --git a/.babelrc.json b/.babelrc
similarity index 100%
rename from .babelrc.json
rename to .babelrc
diff --git a/README.md b/README.md
index 6f22293f..f3a66e17 100644
--- a/README.md
+++ b/README.md
@@ -11,4 +11,8 @@ Follow [this guide](https://fontawesome.com/docs/web/setup/packages#set-up-npm-t
 
 - Using `aleph-core` with `Next.js` framework:
   - Problems with css `@import` syntaxis. You will need to manually import the font-face css from an url via `<link>` html element, or by creating a `font.css` that will contain the `@import` statement and will be imported from the `_app.tsx` Next.js file
-  - Problems with font awesome stylesheet. Follow this guide to solve it: https://fontawesome.com/docs/web/use-with/react/use-with#next-js
\ No newline at end of file
+  - Problems with font awesome stylesheet. Follow this guide to solve it: https://fontawesome.com/docs/web/use-with/react/use-with#next-js
+
+### We strongly recomend to use styled-components tailwind and twin.macro in your project
+
+Follow this guide: https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript#getting-started
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6318eae6..6e014bcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@fortawesome/pro-regular-svg-icons": "^6.3.0",
         "@fortawesome/react-fontawesome": "^0.1.18",
         "@fortawesome/sharp-solid-svg-icons": "^6.3.0",
+        "@rollup/plugin-babel": "^6.0.3",
         "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.2",
@@ -3105,6 +3106,60 @@
         }
       }
     },
+    "node_modules/@rollup/plugin-babel": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.3.tgz",
+      "integrity": "sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@rollup/pluginutils": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-babel/node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-babel/node_modules/@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "22.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.2.tgz",
diff --git a/package.json b/package.json
index 28c218bf..806faefc 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@fortawesome/pro-regular-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@fortawesome/sharp-solid-svg-icons": "^6.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.2",
diff --git a/rollup.config.js b/rollup.config.js
index e5fcc414..b1f0395e 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,43 +1,52 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import dts from 'rollup-plugin-dts'
+import { babel } from '@rollup/plugin-babel'
+// import typescript from '@rollup/plugin-typescript'
 
-import { terser } from "rollup-plugin-terser";
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { terser } from 'rollup-plugin-terser'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 
-const packageJson = require("./package.json");
+const packageJson = require('./package.json')
 
 export default [
   {
-    input: "src/index.ts",
+    input: 'src/index.ts',
     output: [
       {
         file: packageJson.main,
-        format: "cjs",
+        format: 'cjs',
         sourcemap: true,
       },
       {
         file: packageJson.module,
-        format: "esm",
+        format: 'esm',
         sourcemap: true,
       },
     ],
     plugins: [
       peerDepsExternal(),
-      resolve(),
+      resolve({
+        extensions: ['.ts', '.tsx'],
+      }),
       commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
+      babel({
+        babelHelpers: 'bundled',
+        extensions: ['.ts', '.tsx'],
+        include: ['src/**/*'],
+        exclude: 'node_modules/**',
+      }),
+      // typescript({ tsconfig: './tsconfig.json' }),
       terser(),
     ],
   },
   {
-    input: "dist/esm/index.d.ts",
-    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    input: 'dist/esm/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
     plugins: [dts()],
   },
   {
-    input: "./tailwind.config.js",
-    output: [{ file: "dist/tailwind.config.js", format: "cjs" }],
+    input: './tailwind.config.js',
+    output: [{ file: 'dist/tailwind.config.js', format: 'cjs' }],
   },
-];
+]
diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts
index 29333c93..719bad82 100644
--- a/src/components/Breadcrumb/index.ts
+++ b/src/components/Breadcrumb/index.ts
@@ -1,2 +1,2 @@
 export { default, Breadcrumb } from './cmp'
-export { BreadcrumbProps } from './types'
+export type { BreadcrumbProps } from './types'
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 5676074c..f6f2d36e 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,2 +1,2 @@
 export { default, Button } from './cmp'
-export { ButtonProps } from './types'
+export type { ButtonProps } from './types'
diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts
index b4938bb0..1369f206 100644
--- a/src/components/Card/index.ts
+++ b/src/components/Card/index.ts
@@ -1,2 +1,2 @@
 export { default, Card } from './cmp'
-export { CardProps } from './types'
+export type { CardProps } from './types'
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index 37a32d25..183b4f64 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -1,2 +1,2 @@
 export { default, Icon } from './cmp'
-export { IconProps } from './types'
+export type { IconProps } from './types'
diff --git a/src/components/Logo/index.ts b/src/components/Logo/index.ts
index 735a9a10..c4a459a0 100644
--- a/src/components/Logo/index.ts
+++ b/src/components/Logo/index.ts
@@ -1,2 +1,2 @@
 export { default, Logo } from './cmp'
-export { LogoProps } from './types'
+export type { LogoProps } from './types'
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index cabeb496..2f6e1b4b 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,2 +1,2 @@
 export { default, Navbar } from './cmp'
-export { NavbarProps } from './types'
+export type { NavbarProps } from './types'
diff --git a/src/components/NavbarLink/index.tsx b/src/components/NavbarLink/index.tsx
index 80b68c87..4e7b254e 100644
--- a/src/components/NavbarLink/index.tsx
+++ b/src/components/NavbarLink/index.tsx
@@ -1,2 +1,2 @@
 export { default, NavbarLink } from './cmp'
-export { NavbarLinkProps } from './types'
+export type { NavbarLinkProps } from './types'
diff --git a/src/components/NavbarLinkList/index.tsx b/src/components/NavbarLinkList/index.tsx
index 559c3f7b..a39fd128 100644
--- a/src/components/NavbarLinkList/index.tsx
+++ b/src/components/NavbarLinkList/index.tsx
@@ -1,2 +1,2 @@
 export { default, NavbarLinkList } from './cmp'
-export { NavbarLinkListProps } from './types'
+export type { NavbarLinkListProps } from './types'
diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts
index 353cb147..b1f012e9 100644
--- a/src/components/Notification/index.ts
+++ b/src/components/Notification/index.ts
@@ -1,3 +1,3 @@
 export { default, Notification } from './cmp'
-export { NotificationProps } from './types'
+export type { NotificationProps } from './types'
 export { useNotification } from './context'
diff --git a/src/components/NotificationCard/index.ts b/src/components/NotificationCard/index.ts
index a168ead8..3c1fa842 100644
--- a/src/components/NotificationCard/index.ts
+++ b/src/components/NotificationCard/index.ts
@@ -1,2 +1,2 @@
 export { default, NotificationCard } from './cmp'
-export { NotificationCardProps } from './types'
+export type { NotificationCardProps } from './types'
diff --git a/src/components/NotificationCard/types.ts b/src/components/NotificationCard/types.ts
index 0a231e18..a9695637 100644
--- a/src/components/NotificationCard/types.ts
+++ b/src/components/NotificationCard/types.ts
@@ -2,7 +2,10 @@ import { HTMLAttributes, ReactNode } from 'react'
 
 export type NotificationCardVariant = 'success' | 'warning' | 'error'
 
-export type NotificationCardProps = HTMLAttributes<HTMLDivElement> & {
+export type NotificationCardProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'content'
+> & {
   variant: NotificationCardVariant
   title?: string
   text?: string
diff --git a/src/components/ObjectImg/index.ts b/src/components/ObjectImg/index.ts
index 2d365000..e4b9add7 100644
--- a/src/components/ObjectImg/index.ts
+++ b/src/components/ObjectImg/index.ts
@@ -1,2 +1,2 @@
 export { default, ObjectImg } from './cmp'
-export { ObjectImgProps } from './types'
+export type { ObjectImgProps } from './types'
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 5f535189..1d4151ac 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,2 +1,2 @@
 export { default, Table } from './cmp'
-export { TableProps } from './types'
+export type { TableProps } from './types'
diff --git a/src/components/TextGradient/index.ts b/src/components/TextGradient/index.ts
index bae128f3..fdc6a0e1 100644
--- a/src/components/TextGradient/index.ts
+++ b/src/components/TextGradient/index.ts
@@ -1,2 +1,2 @@
 export { default, TextGradient } from './cmp'
-export { TextGradientProps } from './types'
+export type { TextGradientProps } from './types'
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index 6c9ae95d..0ce3f269 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,2 +1,2 @@
 export { default, Tooltip } from './cmp'
-export { TooltipProps } from './types'
+export type { TooltipProps } from './types'
diff --git a/src/components/forms/Checkbox/index.ts b/src/components/forms/Checkbox/index.ts
index 5dccc30f..18afa655 100644
--- a/src/components/forms/Checkbox/index.ts
+++ b/src/components/forms/Checkbox/index.ts
@@ -1,2 +1,2 @@
 export { default, Checkbox } from './cmp'
-export { CheckboxProps } from './types'
+export type { CheckboxProps } from './types'
diff --git a/src/components/forms/CheckboxGroup/index.ts b/src/components/forms/CheckboxGroup/index.ts
index 8dc2a276..a80acc42 100644
--- a/src/components/forms/CheckboxGroup/index.ts
+++ b/src/components/forms/CheckboxGroup/index.ts
@@ -1,3 +1,3 @@
 export { default, CheckboxGroup } from './cmp'
-export { CheckboxGroupProps } from './types'
+export type { CheckboxGroupProps } from './types'
 export { useCheckboxGroup } from './context'
diff --git a/src/components/forms/ChipInput/index.ts b/src/components/forms/ChipInput/index.ts
index 769b357e..6ec160d6 100644
--- a/src/components/forms/ChipInput/index.ts
+++ b/src/components/forms/ChipInput/index.ts
@@ -1,2 +1,2 @@
 export { default, ChipInput } from './cmp'
-export { ChipInputProps } from './types'
+export type { ChipInputProps } from './types'
diff --git a/src/components/forms/CodeEditor/index.ts b/src/components/forms/CodeEditor/index.ts
index 20e97bde..56b69d20 100644
--- a/src/components/forms/CodeEditor/index.ts
+++ b/src/components/forms/CodeEditor/index.ts
@@ -1,2 +1,2 @@
 export { default, CodeEditor } from './cmp'
-export { CodeEditorProps } from './types'
+export type { CodeEditorProps } from './types'
diff --git a/src/components/forms/Dropdown/index.ts b/src/components/forms/Dropdown/index.ts
index 302fcf55..3b5917f0 100644
--- a/src/components/forms/Dropdown/index.ts
+++ b/src/components/forms/Dropdown/index.ts
@@ -1,2 +1,2 @@
 export { default, Dropdown } from './cmp'
-export { DropdownProps } from './types'
+export type { DropdownProps } from './types'
diff --git a/src/components/forms/DropdownOption/index.ts b/src/components/forms/DropdownOption/index.ts
index 74b31633..52ec77ad 100644
--- a/src/components/forms/DropdownOption/index.ts
+++ b/src/components/forms/DropdownOption/index.ts
@@ -1,2 +1,2 @@
 export { default, DropdownOption } from './cmp'
-export { DropdownOptionProps } from './types'
+export type { DropdownOptionProps } from './types'
diff --git a/src/components/forms/FormError/index.ts b/src/components/forms/FormError/index.ts
index 17e8b497..6220de7f 100644
--- a/src/components/forms/FormError/index.ts
+++ b/src/components/forms/FormError/index.ts
@@ -1,2 +1,2 @@
 export { default, FormError } from './cmp'
-export { FormErrorProps } from './types'
+export type { FormErrorProps } from './types'
diff --git a/src/components/forms/Radio/index.ts b/src/components/forms/Radio/index.ts
index 49b911e5..8e992494 100644
--- a/src/components/forms/Radio/index.ts
+++ b/src/components/forms/Radio/index.ts
@@ -1,2 +1,2 @@
 export { default, Radio } from './cmp'
-export { RadioProps } from './types'
+export type { RadioProps } from './types'
diff --git a/src/components/forms/RadioGroup/index.ts b/src/components/forms/RadioGroup/index.ts
index bcc6c4ee..3f91658e 100644
--- a/src/components/forms/RadioGroup/index.ts
+++ b/src/components/forms/RadioGroup/index.ts
@@ -1,3 +1,3 @@
 export { default, RadioGroup } from './cmp'
-export { RadioGroupProps } from './types'
+export type { RadioGroupProps } from './types'
 export { useRadioGroup } from './context'
diff --git a/src/components/forms/Select/index.ts b/src/components/forms/Select/index.ts
index bb1c6913..a8ac1d1f 100644
--- a/src/components/forms/Select/index.ts
+++ b/src/components/forms/Select/index.ts
@@ -1,2 +1,2 @@
 export { default, Select } from './cmp'
-export { SelectProps } from './types'
+export type { SelectProps } from './types'
diff --git a/src/components/forms/TextArea/index.ts b/src/components/forms/TextArea/index.ts
index 429568ea..1868d8b9 100644
--- a/src/components/forms/TextArea/index.ts
+++ b/src/components/forms/TextArea/index.ts
@@ -1,2 +1,2 @@
 export { default, TextArea } from './cmp'
-export { TextAreaProps } from './types'
+export type { TextAreaProps } from './types'
diff --git a/src/components/forms/TextInput/index.ts b/src/components/forms/TextInput/index.ts
index d892beb7..1dc3f22e 100644
--- a/src/components/forms/TextInput/index.ts
+++ b/src/components/forms/TextInput/index.ts
@@ -1,2 +1,2 @@
 export { default, TextInput } from './cmp'
-export { TextInputProps } from './types'
+export type { TextInputProps } from './types'
diff --git a/src/styles/global.tsx b/src/styles/global.tsx
index 660244ee..043654e6 100644
--- a/src/styles/global.tsx
+++ b/src/styles/global.tsx
@@ -1,5 +1,10 @@
 import React from 'react'
-import { createGlobalStyle, css, DefaultTheme } from 'styled-components'
+import {
+  createGlobalStyle,
+  css,
+  DefaultTheme,
+  Interpolation,
+} from 'styled-components'
 import { BreakpointId } from '../themes/types'
 import {
   getDarkEffectCss,
@@ -255,41 +260,37 @@ function effectClasses() {
 }
 
 function typoClasses(theme: DefaultTheme) {
-  const breakpointId = getSortedResponsiveBreakpoints(theme)
-
   const typos = Object.entries(theme.typo).sort(
     ([, av], [, bv]) => av.size - bv.size,
   )
 
   const fontSizes = getSortedFontSizes(theme)
 
-  function getTypoClasses(bp: string = '') {
-    bp = bp ? `- ${bp} ` : ''
+  function getTypoClasses(bp: string) {
     return typos.map(
       ([k, v]) => css`
-        .tp-${k}${bp} ${v.tag && !bp ? `, ${k}` : ''} {
+        .${bp}tp-${k} ${v.tag && !bp ? `, ${k}` : ''} {
           ${getTypoCss(k as any)}
         }
       `,
     )
   }
 
-  function getFontSizesClasses(bp: string = '') {
-    bp = bp ? `- ${bp} ` : ''
+  function getFontSizesClasses(bp: string) {
     return fontSizes.map(
       ([k, v]) => css`
-        .fs-${k}${bp} {
+        .${bp}fs-${k} {
           font-size: ${v};
         }
       `,
     )
   }
 
-  const responsiveTypoCss = [undefined, ...breakpointId].map((bp) =>
-    getResponsiveCss(bp, getTypoClasses(bp)),
-  )
-  const responsiveFontSizesCss = [undefined, ...breakpointId].map((bp) =>
-    getResponsiveCss(bp, getFontSizesClasses(bp)),
+  const responsiveTypoCss = getResponsiveClasses(theme, getTypoClasses)
+
+  const responsiveFontSizesCss = getResponsiveClasses(
+    theme,
+    getFontSizesClasses,
   )
 
   return css`
@@ -301,6 +302,17 @@ function typoClasses(theme: DefaultTheme) {
   `
 }
 
+function getResponsiveClasses(
+  theme: DefaultTheme,
+  getClasses: (bp: string) => Interpolation<any>[],
+) {
+  const breakpointId = getSortedResponsiveBreakpoints(theme)
+
+  return [undefined, ...breakpointId].map((bp) =>
+    getResponsiveCss(bp, getClasses(bp ? `${bp}\\:` : '')),
+  )
+}
+
 function getSortedResponsiveBreakpoints(theme: DefaultTheme): BreakpointId[] {
   return Object.entries(theme.breakpoint)
     .sort(([, av], [, bv]) => av - bv)
diff --git a/src/themes/index.ts b/src/themes/index.ts
index f2c797ec..414f63bd 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -13,4 +13,4 @@ export const themes = {
 // @note: sorted list for storybook UI
 export const themeList = [dark, light, alephDark, alephLight]
 
-export { CoreTheme, BreakpointId, TypoSizeKind, TypoKind } from './types'
+export type { CoreTheme, BreakpointId, TypoSizeKind, TypoKind } from './types'
diff --git a/tailwind.config.js b/tailwind.config.js
index 01d59c86..12357621 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,25 +1,23 @@
 /* eslint-disable no-undef */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     screens: {
-      'xs': '0rem', // 0px
-      'sm': '36rem', // 576px
-      'md': '48rem', // 768px
-      'lg': '62rem', // 992px
-      'xl': '75rem', // 1200px
+      xs: '0rem', // 0px
+      sm: '36rem', // 576px
+      md: '48rem', // 768px
+      lg: '62rem', // 992px
+      xl: '75rem', // 1200px
       '2xl': '96rem', // 1400px
     },
     fontSize: {
       '2xs': '0.5rem', // 8px
-      'xs': '0.625rem', // 10px
-      'sm': '1rem', // 16px
-      'md': '1.125rem', // 18px
-      'lg': '1.5rem', // 24px
-      'xl': '1.75rem', // 28px
+      xs: '0.625rem', // 10px
+      sm: '1rem', // 16px
+      md: '1.125rem', // 18px
+      lg: '1.5rem', // 24px
+      xl: '1.75rem', // 28px
       '2xl': '3rem', // 48px
       '3xl': '3.875rem', // 62px
       '4xl': '5.125rem', // 82px