@infonomic/uikit 3.6.0 → 3.8.0

package/dist/styles/typography.css

@@ -1 +1 @@
-@layer infonomic-typography{:root{--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-display:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:"Merriweather",Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.sans{font-family:var(--font-sans)}.serif{font-family:var(--font-serif)}.mono{font-family:var(--font-mono)}.display{font-family:var(--font-display)}:root{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-bg:#1f2937;--prose-invert-body:var(--gray-50);--prose-invert-headings:var(--gray-50);--prose-invert-lead:#9ca3af;--prose-invert-links:var(--accent-500);--prose-invert-counters:#9ca3af;--prose-invert-bullets:#4b5563;--prose-invert-hr:#374151;--prose-invert-quotes:var(--accent-400);--prose-invert-quote-borders:var(--accent-400);--prose-invert-captions:#9ca3af;--prose-invert-kbd:#fff;--prose-invert-kbd-shadows:255 255 255;--prose-invert-code:#f1f5f9;--prose-invert-code-background:#222;--prose-invert-code-borders:#333;--prose-invert-pre-code:#d1d5db;--prose-invert-pre-bg:#00000080;--prose-invert-th-borders:#4b5563;--prose-invert-td-borders:#374151}.dark{--prose-body:var(--prose-invert-body);--prose-headings:var(--prose-invert-headings);--prose-lead:var(--prose-invert-lead);--prose-links:var(--prose-invert-links);--prose-counters:var(--prose-invert-counters);--prose-bullets:var(--prose-invert-bullets);--prose-hr:var(--prose-invert-hr);--prose-quotes:var(--prose-invert-quotes);--prose-quote-borders:var(--prose-invert-quote-borders);--prose-captions:var(--prose-invert-captions);--prose-kbd:var(--prose-invert-kbd);--prose-kbd-shadows:var(--prose-invert-kbd-shadows);--prose-code:var(--prose-invert-code);--prose-code-background:var(--prose-invert-code-background);--prose-code-borders:var(--prose-invert-code-borders);--prose-pre-code:var(--prose-invert-pre-code);--prose-pre-bg:var(--prose-invert-pre-bg)}.not-dark{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-bg:#1f2937}html{color:var(--prose-body);font-size:1rem}html .not-dark{color:var(--prose-body)}article,.editor-text,.break-long-words{overflow-wrap:anywhere}article,.dynamic-text{font-size:1.25rem;line-height:1.6}@media screen and (width>=768px){article,.dynamic-text{font-size:1.125rem;line-height:1.64}}.prose{& h1,& h2,& h3,& h4,& h5{color:var(--prose-headings)}}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;font-size:2.5rem;font-weight:600;line-height:1.125}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.5rem;margin-bottom:.75rem;font-size:2rem;font-weight:600;line-height:1.2}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.75rem;font-size:1.75rem;font-weight:600;line-height:1.1}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.65rem;font-size:1.55rem;font-weight:600;line-height:1.1}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.125rem;line-height:1.64}.prose-xl :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.25rem;line-height:1.6}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.4}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-bold);font-weight:500}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-headings);margin-top:1.25em;font-weight:500}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-quotes);quotes:none;border-inline-start-width:.25rem;border-inline-start-color:var(--prose-quote-borders);margin-top:1.6em;margin-bottom:1.6em;margin-right:2rem;padding-inline-start:1rem;font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.2}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-kbd);box-shadow:0 0 0 1px rgb(var(--prose-kbd-shadows)/10%),0 3px 0 rgb(var(--prose-kbd-shadows)/10%);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-code);background-color:var(--prose-code-background);border-color:var(--prose-code-borders);border-width:1px;border-radius:.25rem;padding:.125rem .375rem;font-size:.875em;font-weight:400}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-pre-code);background-color:var(--prose-pre-bg);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:initial;font-weight:inherit;color:inherit;font-family:inherit;line-height:inherit;padding:0;border-width:0;border-radius:0;padding:0;font-size:1em!important}@media (width>=768px){.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.7rem;line-height:1.2}}html,.font-sans{font-family:var(--font-sans)}.font-display{font-family:var(--font-display)}.font-serif{font-family:var(--font-serif)}.font-mono{font-family:var(--font-mono)}}
+@layer infonomic-typography{:root{--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-display:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:"Merriweather",Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.sans{font-family:var(--font-sans)}.serif{font-family:var(--font-serif)}.mono{font-family:var(--font-mono)}.display{font-family:var(--font-display)}:root{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-bg:#1f2937;--prose-invert-body:var(--gray-50);--prose-invert-headings:var(--gray-50);--prose-invert-lead:#9ca3af;--prose-invert-links:var(--accent-500);--prose-invert-counters:#9ca3af;--prose-invert-bullets:#4b5563;--prose-invert-hr:#374151;--prose-invert-quotes:var(--accent-400);--prose-invert-quote-borders:var(--accent-400);--prose-invert-captions:#9ca3af;--prose-invert-kbd:#fff;--prose-invert-kbd-shadows:255 255 255;--prose-invert-code:#f1f5f9;--prose-invert-code-background:#222;--prose-invert-code-borders:#333;--prose-invert-pre-code:#d1d5db;--prose-invert-pre-bg:#00000080;--prose-invert-th-borders:#4b5563;--prose-invert-td-borders:#374151}.dark{--prose-body:var(--prose-invert-body);--prose-headings:var(--prose-invert-headings);--prose-lead:var(--prose-invert-lead);--prose-links:var(--prose-invert-links);--prose-counters:var(--prose-invert-counters);--prose-bullets:var(--prose-invert-bullets);--prose-hr:var(--prose-invert-hr);--prose-quotes:var(--prose-invert-quotes);--prose-quote-borders:var(--prose-invert-quote-borders);--prose-captions:var(--prose-invert-captions);--prose-kbd:var(--prose-invert-kbd);--prose-kbd-shadows:var(--prose-invert-kbd-shadows);--prose-code:var(--prose-invert-code);--prose-code-background:var(--prose-invert-code-background);--prose-code-borders:var(--prose-invert-code-borders);--prose-pre-code:var(--prose-invert-pre-code);--prose-pre-bg:var(--prose-invert-pre-bg)}.not-dark{--prose-body:var(--gray-900);--prose-headings:var(--gray-900);--prose-lead:#4b5563;--prose-links:var(--accent-950);--prose-counters:#6b7280;--prose-bullets:#d1d5db;--prose-hr:#e5e7eb;--prose-quotes:var(--accent-700);--prose-quote-borders:var(--accent-700);--prose-captions:#6b7280;--prose-kbd:#111827;--prose-kbd-shadows:17 24 39;--prose-code:#1e293b;--prose-code-background:#efefef;--prose-code-borders:#ccc;--prose-pre-code:#e5e7eb;--prose-pre-bg:#1f2937}html{color:var(--prose-body);font-size:1rem}html .not-dark{color:var(--prose-body)}article,.editor-text,.break-long-words{overflow-wrap:anywhere}article,.dynamic-text{font-size:1.25rem;line-height:1.6}@media screen and (width>=48rem){article,.dynamic-text{font-size:1.125rem;line-height:1.64}}.prose{& h1,& h2,& h3,& h4,& h5{color:var(--prose-headings)}}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;font-size:2.5rem;font-weight:600;line-height:1.125}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.5rem;margin-bottom:.75rem;font-size:2rem;font-weight:600;line-height:1.2}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.75rem;font-size:1.75rem;font-weight:600;line-height:1.1}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25rem;margin-bottom:.65rem;font-size:1.55rem;font-weight:600;line-height:1.1}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.125rem;line-height:1.64}.prose-xl :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:1.25rem;line-height:1.6}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.4}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-bold);font-weight:500}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-headings);margin-top:1.25em;font-weight:500}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-quotes);quotes:none;border-inline-start-width:.25rem;border-inline-start-color:var(--prose-quote-borders);margin-top:1.6em;margin-bottom:1.6em;margin-right:2rem;padding-inline-start:1rem;font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.2}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-kbd);box-shadow:0 0 0 1px rgb(var(--prose-kbd-shadows)/10%),0 3px 0 rgb(var(--prose-kbd-shadows)/10%);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-code);background-color:var(--prose-code-background);border-color:var(--prose-code-borders);border-width:1px;border-radius:.25rem;padding:.125rem .375rem;font-size:.875em;font-weight:400}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--prose-pre-code);background-color:var(--prose-pre-bg);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:initial;font-weight:inherit;color:inherit;font-family:inherit;line-height:inherit;padding:0;border-width:0;border-radius:0;padding:0;font-size:1em!important}@media (width>=48rem){.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.7rem;line-height:1.2}}html,.font-sans{font-family:var(--font-sans)}.font-display{font-family:var(--font-display)}.font-serif{font-family:var(--font-serif)}.font-mono{font-family:var(--font-mono)}}

package/dist/widgets/drawer/drawer_module.css

@@ -36,7 +36,7 @@
     width: 86%;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn {
       width: 600px;
     }

package/dist/widgets/modal/modal_module.css

@@ -29,7 +29,7 @@
     bottom: 0;
   }
 
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: 40rem) {
     .modal-container-PPkPyj {
       width: auto;
       min-height: auto;

package/dist/widgets/timeline/timeline_module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
   .timeline-qJOU85 {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/components/avatar/avatar.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
 

package/src/components/badge/badge.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .badge {

package/src/components/button/button-group.module.css

@@ -9,7 +9,7 @@
     gap: var(--gap-2);
   }
 
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: 40rem) {
     .button-group {
       flex-direction: row;
     }

package/src/components/button/button.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .button {

package/src/components/button/copy-button.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .copy-button-container {

package/src/components/card/card.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .card {

package/src/components/container/container.module.css

@@ -1,31 +1,32 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .container {
     width: 100%;
-    padding: 0 16px;
+    padding: 0 1rem;
     margin: 0 auto;
-    max-width: 960px;
+    max-width: 60rem;
   }
 
+  /* Shy edges */
   /* Large */
-  @media (min-width: 1050px) {
+  @media (min-width: 66rem) {
     .container {
-      max-width: 1024px;
+      max-width: 64rem;
     }
   }
 
   /* X-Large */
-  @media (min-width: 1230px) {
+  @media (min-width: 77rem) {
     .container {
-      max-width: 1190px;
+      max-width: 74.375rem;
     }
   }
 
   /* 2X-Large */
-  @media (min-width: 1500px) {
+  @media (min-width: 94rem) {
     .container {
-      max-width: 1400px;
+      max-width: 87.5rem;
     }
   }
 }

package/src/components/dropdown/dropdown.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
 

package/src/components/dropdown/dropdown.stories.tsx

@@ -62,7 +62,7 @@ export const Dropdown: Story = {
             </DropdownComponent.Trigger>
 
             <DropdownComponent.Portal>
-              <DropdownComponent.Content align="end" sideOffset={10}>
+              <DropdownComponent.Content align="end" data-side="top" sideOffset={10}>
                 <DropdownComponent.Item>
                   <div className="dropdown-item-content">
                     <span className="dropdown-item-content-icon">

package/src/components/dropdown/dropdown.tsx

@@ -149,7 +149,7 @@ const SubContent = ({
   return (
     <DropdownMenuPrimitive.SubContent
       ref={ref}
-      className={cx('dropdown-menu-subcontent', className)}
+      className={cx('dropdown-menu-subcontent', styles['dropdown-subcontent'], className)}
       {...rest}
     >
       {children}

package/src/components/forms/calendar.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .day-picker {
@@ -234,7 +234,7 @@
     color: var(--foreground);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .months {
       flex-direction: row;
     }

package/src/components/forms/checkbox.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .container {

package/src/components/forms/error-text.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .text {

package/src/components/forms/help-text.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .text {

package/src/components/forms/input-adornment.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .adornment {

package/src/components/forms/input.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .inputWrapper {

package/src/components/forms/label.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .label {

package/src/components/forms/radio-group.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {

package/src/components/forms/select.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .content {

package/src/components/forms/text-area.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .text-area {

package/src/components/notifications/alert.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .alert {

package/src/components/notifications/toast.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   /* Positions are relative to the toast viewport which is set 
@@ -127,7 +127,7 @@
     left: 16px;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
 
     .root.top-right[data-state="open"],
     .root.bottom-right[data-state="open"] {

package/src/components/pager/pagination.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .pagination-root {
@@ -124,7 +124,7 @@
     display: none;
   }
 
-  @media(min-width: 640px) {
+  @media(min-width: 40rem) {
 
     .mobile-toggle {
       display: flex;

package/src/components/scroll-area/scroll-area.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .root {

package/src/components/section/section.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .section {

package/src/components/shimmer/shimmer.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {

package/src/components/table/table.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {

package/src/components/tabs/tabs.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
 

package/src/components/tooltip/tooltip.module.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .tooltip {

package/src/icons/icon-element.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 import type React from 'react'
 
+import styles from './icons.module.css'
+
 import cx from 'classnames'
 
 export interface IconElementProps extends React.ComponentProps<'div'> {
@@ -23,7 +25,7 @@ export const IconElement = (props: IconElementProps): React.JSX.Element => {
         justifyContent: 'center',
         marginRight: menuItem != null && menuItem ? '1.2rem' : '0',
       }}
-      className={cx('component--icon-element-root', className)}
+      className={cx(styles['element-root'], className)}
       {...rest}
     >
       {children}

package/src/icons/icons.module.css

@@ -2,6 +2,13 @@
 
 @layer infonomic-components {
 
+  .element-root svg {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
   .stroke-none {
     stroke: none;
   }

package/src/styles/base/base.css

@@ -1,5 +1,13 @@
 @import "./reset.css";
-@import "./colors.css";
-@import "./vars.css";
+
 @import "./animations.css";
-@import "./typography.css";
+@import "./borders.css";
+@import "./breakpoints.css";
+@import "./colors.css";
+@import "./opacity.css";
+@import "./shadows.css";
+@import "./spacing.css";
+@import "./transitions.css";
+@import "./typography.css";
+@import "./z-index.css";
+

package/src/styles/base/borders.css

@@ -0,0 +1,30 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       BORDER & RADIUS
+    ======================================== */
+    --border-width-thin: 1px;
+    --border-width-normal: 2px;
+    --border-width-thick: 4px;
+
+    --border-style-solid: solid;
+    --border-style-dashed: dashed;
+    --border-style-dotted: dotted;
+
+    --border-radius-none: 0px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-2xl: 24px;
+    --border-radius-full: 9999px;
+
+    /* ========================================
+       RINGS
+    ======================================== */
+
+    --ring-offset-width: 2px;
+    --ring-inset: ;
+    --ring-shadow: 0 0 #0000;
+  }
+}

package/src/styles/base/breakpoints.css

@@ -0,0 +1,15 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       BREAKPOINTS - must match any that are used in Tailwind CSS
+       Note: Values in rem (1rem = 16px at default font size)
+    ======================================== */
+    --breakpoint-xs: 30rem; /* 480px */
+    --breakpoint-sm: 40rem; /* 640px */
+    --breakpoint-md: 48rem; /* 768px */
+    --breakpoint-lg: 66rem; /* 1056px */
+      /* our container component will set max width to common screen size */
+    --breakpoint-xl: 77rem; /* 1232px */
+    --breakpoint-2xl: 94rem; /* 1504px */
+  }
+}

package/src/styles/base/colors.stories.tsx

@@ -664,7 +664,7 @@ const meta: Meta = {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Theme',
+  title: 'Base',
   component: Colors,
 }
 

package/src/styles/base/opacity.css

@@ -0,0 +1,12 @@
+@layer infonomic-base {
+:root {
+    /* ========================================
+        OPACITY LEVELS
+    ======================================== */
+    --opacity-0: 0;
+    --opacity-25: 0.25;
+    --opacity-50: 0.5;
+    --opacity-75: 0.75;
+    --opacity-100: 1;
+  }
+}

package/src/styles/base/shadows.css

@@ -0,0 +1,13 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       SHADOWS
+    ======================================== */
+    --shadow: 0 0 #0000;
+    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.15);
+    --shadow-xl: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  }
+}

package/src/styles/base/spacing.css

@@ -0,0 +1,21 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       SPACING SYSTEM (8px grid)
+    ======================================== */
+    --spacing-0: 0px;
+    --spacing-1: 4px;
+    --spacing-2: 8px;
+    --spacing-3: 12px;
+    --spacing-4: 16px;
+    --spacing-5: 20px;
+    --spacing-6: 24px;
+    --spacing-8: 32px;
+    --spacing-10: 40px;
+    --spacing-12: 48px;
+    --spacing-16: 64px;
+    --spacing-20: 80px;
+    --spacing-24: 96px;
+    --spacing-32: 128px;
+  }
+}

package/src/styles/base/transitions.css

@@ -0,0 +1,7 @@
+@layer infonomic-base {
+  :root {
+    --transition-fast: 175ms ease-in-out;
+    --transition-normal: 230ms ease-in-out;
+    --transition-slow: 400ms ease-in-out;
+  }
+}

package/src/styles/base/typography.css

@@ -1,25 +1,47 @@
 @layer infonomic-base {
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
+  :root {
+    /* 12px */
+    --font-size-xs: 0.75rem;
+    /* 14px */
+    --font-size-sm: 0.875rem;
+    /* 16px */
+    --font-size-base: 1rem;
+    /* 18px */
+    --font-size-lg: 1.125rem;
+    /* 20px */
+    --font-size-xl: 1.25rem;
+    /* 24px */
+    --font-size-2xl: 1.5rem;
+    /* 30px */
+    --font-size-3xl: 1.875rem;
+    /* 36px */
+    --font-size-4xl: 2.25rem;
+    /* 42px */
+    --font-size-5xl: 2.625rem;
+    /* 48px */
+    --font-size-6xl: 3rem;
+    /* 54px */
+    --font-size-7xl: 3.375rem;
+    /* 60px */
+    --font-size-8xl: 3.75rem;
 
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
 
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-ultrabold: 900;
+
+    --line-height-tight: 1.1;
+    --line-height-snug: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
 
-  h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.1;
+    --letter-spacing-tight: -0.02em;
+    --letter-spacing-normal: 0;
+    --letter-spacing-wide: 0.05em;
   }
 }

package/src/styles/base/z-index.css

@@ -0,0 +1,12 @@
+@layer infonomic-base {
+  :root {
+    /* ========================================
+       Z-INDEX SYSTEM
+    ======================================== */
+    --z-index-low: 10;
+    --z-index-medium: 100;
+    --z-index-high: 1000;
+    --z-index-modal: 1050;
+    --z-index-toast: 1100;
+  }
+}

package/src/styles/components/components.css

@@ -1,11 +1,4 @@
-@import "./icon-element.css";
 @import "./scroll-to-top.css";
 @import "./hamburger.css";
-@import "./list-checkbox.css";
 @import "./loaders.css";
-@import "./fade-in-lift.css";
-@import "./checkbox.css";
-@import "./card.css";
-@import "./toast.css";
-@import "./popover.css";
-@import "./dropdown.css";
+@import "./fade-in-lift.css";

package/src/styles/components/hamburger.css

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .component--hamburger {