@infonomic/uikit 3.9.0 → 3.11.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>=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)}}
+@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-background:#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-background:#161d27;--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-background:var(--prose-invert-pre-background)}.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-background:#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.3rem;margin-bottom:1.3rem;margin-right:2rem;padding-inline-start:1rem;font-size:1.2em;font-style:normal;font-weight:600;line-height:1.3}@media (width>=48rem){.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2em;line-height:1.3}}.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-background);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}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/package.json

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

package/src/components/container/container.stories.tsx

@@ -19,7 +19,7 @@ export default meta
 
 export const Container = (): React.JSX.Element => {
   return (
-    <Section style={{ height: '100vh' }}>
+    <Section style={{ height: '100vh', margin: '2rem auto' }}>
       <ContainerComponent
         className="primary-strong"
         style={{
@@ -29,7 +29,7 @@ export const Container = (): React.JSX.Element => {
           justifyContent: 'center',
         }}
       >
-        <p>I'm in a container</p>
+        <p>I'm in a container with shy edges.</p>
       </ContainerComponent>
     </Section>
   )

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

@@ -49,7 +49,7 @@ export const Dropdown: Story = {
         <div
           style={{
             maxWidth: '400px',
-            marginBottom: '24px',
+            margin: '2rem 0 24px',
             display: 'flex',
             justifyContent: 'center',
           }}

package/src/components/forms/calendar.stories.tsx

@@ -25,7 +25,7 @@ export const Calendar = (): React.JSX.Element => {
   const calendarRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
         <CalendarComponent
           required
@@ -79,7 +79,7 @@ export const Multiple = (): React.JSX.Element => {
   const calendarRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
         <CalendarComponent
           required
@@ -112,7 +112,7 @@ export const Range = (): React.JSX.Element => {
   const calendarRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
         <CalendarComponent
           required

package/src/components/forms/checkbox.stories.tsx

@@ -19,7 +19,7 @@ export const Default = (): React.JSX.Element => {
 
   return (
     <>
-      <div style={{ maxWidth: '800px', margin: '0 auto 2rem' }}>
+      <div style={{ maxWidth: '800px', margin: '2rem auto 2rem' }}>
         <h2 className="text-xl" style={{ marginBottom: '1rem' }}>
           Outlined
         </h2>

package/src/components/forms/input.stories.tsx

@@ -17,7 +17,7 @@ export default {
 export const Default = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ marginBottom: '2rem' }}>
+      <div style={{ margin: '2rem 0' }}>
         <div
           style={{
             maxWidth: '600px',

package/src/components/forms/text-area.stories.tsx

@@ -13,7 +13,7 @@ export default {
 export const Default = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <TextArea
           required
           id="message"
@@ -33,7 +33,7 @@ export const Default = (): React.JSX.Element => {
 export const Error = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <TextArea
           required
           id="message"

package/src/components/notifications/toast.stories.tsx

@@ -15,7 +15,7 @@ export const Toast = (): React.JSX.Element => {
   }
 
   return (
-    <div className="mb-6 max-w-[600px]">
+    <div style={{ maxWidth: '600px', margin: '2rem 0' }}>
       <Button onClick={handleOpenToastClick}>Open Toast</Button>
       <ToastComponent
         title="Note"

package/src/components/pager/pagination.stories.tsx

@@ -32,7 +32,7 @@ const DefaultPager = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
         <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
         <EventPager
           page={page}
@@ -83,7 +83,7 @@ const ClassicPager = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
         <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
         <EventPager
           variant="classic"
@@ -137,7 +137,7 @@ const DashboardPager = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
         <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
         <EventPager
           variant="dashboard"

package/src/components/scroll-area/scroll-area.stories.tsx

@@ -17,7 +17,7 @@ const TAGS = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length
 
 export const ScrollArea = (): React.JSX.Element => {
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <ScrollAreaComponent
         style={{ width: '200px', height: '300px', margin: '0 auto', border: '1px solid #ccc' }}
       >

package/src/components/table/table.stories.tsx

@@ -18,7 +18,7 @@ export default meta
 
 export const Table = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '960px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '960px', margin: '2rem auto' }}>
       <TableComponent.Container>
         <TableComponent>
           <TableComponent.Header>

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

@@ -21,7 +21,7 @@ export const Colors = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem' }}>
+      <div style={{ margin: '2rem 0' }}>
         <table>
           <tbody>
             <tr>

package/src/styles/local-fonts.css

@@ -0,0 +1,72 @@
+/* 
+  NOTE: Not included in the the distribution bundle.
+  Used to load the fonts below in Storybook.
+  A consumer of the UI kit should self-host these fonts and 
+  use its own method to load them.
+ */
+
+ @font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-VariableFont_opsz_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto/Roboto-VariableFont_wdth_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 100%;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto/Roboto-Italic-VariableFont_wdth_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 100%;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("/fonts/Rubik/Rubik-VariableFont_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("/fonts/Rubik/Rubik-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 300 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src: url("/fonts/Public_Sans/PublicSans-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src: url("/fonts/Public_Sans/PublicSans-Italic-VariableFont_wght.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}

package/src/styles/theme/theme.stories.tsx

@@ -4,15 +4,16 @@ export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }}>
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
           <div className="p-5 shadow border-thin rounded">
             <h2>Heading 2</h2>
             <span className="muted">Muted text here.</span>
             <p>
-              This is a paragraph of text that we&apos;ll use for our theme storybook page. This is
-              a paragraph of text that we&apos;ll use for our theme storybook page. This is a
-              paragraph of text that we&apos;ll use for our theme storybook page. This is a
-              paragraph of text that we&apos;ll use for our theme storybook page.
+              This is a paragraph of text that we&apos;ll use for our theme Storybook page. This is
+              a paragraph of text that has been styled with our default or starter HTML element settings
+              from our styles/theme/theme.css source CSS file, and does NOT have &apos;prose&apos; applied. 
+              Prose is part of our separately installed typography system via styles/typography/typography.css
+               - examples of which are available under the Typography category in Storybook.
             </p>
           </div>
         </div>

package/src/styles/typography/article.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Article = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <article style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+          <h1>An Article</h1>
+          <p>
+            This is text that that has been placed in an article element. Text in articles 
+            as well as within .dynamic-text class selectors will automatically increase in size on 
+            mobile devices for better readability. This is a paragraph of text that we&apos;ll 
+            use for our typography storybook page. This is a paragraph of text that we&apos;ll 
+            use for our typography storybook page.
+          </p>
+          <blockquote>This is some text inside a blockquote.
+            Note that we've used em to size text in the blockquote, 
+            so that it also changes size in the article.</blockquote>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+        </article>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Article,
+}
+
+export default meta

package/src/styles/typography/code.stories.tsx

@@ -20,7 +20,7 @@ function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.E
   return (
     <Highlight theme={themes.nightOwl} code={code} language={language}>
       {({ tokens, getLineProps, getTokenProps }) => (
-        <pre style={{ backgroundColor: 'var(--canvas-800)' }} className={className}>
+        <pre className={className}>
           {tokens.map((line, i) => {
             const lineProps = getLineProps({ line, key: i })
             return (
@@ -43,11 +43,11 @@ function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.E
 export const Code = (): React.JSX.Element => {
   return (
     <>
-      <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+      <div style={{ margin: '48px' }}>
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Heading 1</h1>
           <p>
-            This is a <code>inline code here</code> of text that we&apos;ll use for our typography
+            This is an example of <code>inline code here</code> and text that we&apos;ll use for our typography
             and code storybook page. This is a paragraph of text that we&apos;ll use for our
             typography and code storybook page. Here is a code block...
           </p>

package/src/styles/typography/default.stories.tsx

@@ -4,7 +4,7 @@ export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Heading 1 - With Some More Text to Test on Mobile</h1>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This

package/src/styles/typography/lists.stories.tsx

@@ -4,7 +4,7 @@ export const Lists = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Lists</h1>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This

package/src/styles/typography/prose.css

@@ -30,7 +30,7 @@
     --prose-code-background: #efefef;
     --prose-code-borders: #cccccc;
     --prose-pre-code: #e5e7eb;
-    --prose-pre-bg: #1f2937;
+    --prose-pre-background: #1f2937;
     --prose-invert-body: var(--gray-50);
     --prose-invert-headings: var(--gray-50);
     --prose-invert-lead: #9ca3af;
@@ -47,7 +47,7 @@
     --prose-invert-code-background: #222222;
     --prose-invert-code-borders: #333333;
     --prose-invert-pre-code: #d1d5db;
-    --prose-invert-pre-bg: rgb(0 0 0 / 50%);
+    --prose-invert-pre-background: #161d27;
     --prose-invert-th-borders: #4b5563;
     --prose-invert-td-borders: #374151;
   }
@@ -69,7 +69,7 @@
     --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);
+    --prose-pre-background: var(--prose-invert-pre-background);
   }
 
   /* Brute force our not-dark class for now until we figure out
@@ -93,7 +93,7 @@
     --prose-code-background: #efefef;
     --prose-code-borders: #cccccc;
     --prose-pre-code: #e5e7eb;
-    --prose-pre-bg: #1f2937;
+    --prose-pre-background: #1f2937;
   }
 
   /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -124,20 +124,20 @@
     line-height: 1.6;
   }
 
-  /* medium breakpoint */
+  /* 
+    NOTE: Increase font size for smaller screens to improve readability 
+    at medium breakpoint (consider large breakpoint as well?) 
+  */
   @media screen and (min-width: 48rem) {
-
     article,
     .dynamic-text {
       font-size: 1.125rem;
       line-height: 1.64;
     }
-
   }
 
   /* Default headings - will be overridden by prose sections below */
   .prose {
-
     h1,
     h2,
     h3,
@@ -299,20 +299,29 @@
   }
 
   .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    font-weight: bold;
+    font-weight: 600;
     font-style: normal;
     color: var(--prose-quotes);
     quotes: none;
-    margin-top: 1.6em;
-    margin-bottom: 1.6em;
+    margin-top: 1.3rem;
+    margin-bottom: 1.3rem;
     margin-right: 2rem;
-    font-size: 1.5rem;
-    line-height: 1.2;
+    /* Font size must be em - so that it changes in articles or text that has dynamic font sizes on smaller screens */
+    font-size: 1.2em; 
+    line-height: 1.3;
     padding-inline-start: 1rem;
     border-inline-start-width: 0.25rem;
     border-inline-start-color: var(--prose-quote-borders);
   }
 
+  /* The same as above - for the moment */
+  @media (min-width: 48rem) {
+    .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      font-size: 1.2em;
+      line-height: 1.3;
+    }
+  }
+
   .prose :where(blockquote p:first-of-type):not( :where([class~="not-prose"], [class~="not-prose"] *))::before {
     content: open-quote;
   }
@@ -366,7 +375,7 @@
 
   .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--prose-pre-code);
-    background-color: var(--prose-pre-bg);
+    background-color: var(--prose-pre-background);
     overflow-x: auto;
     font-weight: 400;
     line-height: 1.7142857;
@@ -394,11 +403,4 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-
-  @media (min-width: 48rem) {
-    .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-      font-size: 1.7rem;
-      line-height: 1.2;
-    }
-  }
 }

package/src/styles/typography/quote.stories.tsx

@@ -4,7 +4,7 @@ export const Quote = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
           <h1>Heading 1</h1>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This
@@ -12,7 +12,7 @@ export const Quote = (): React.JSX.Element => {
             paragraph of text that we&apos;ll use for our typography storybook page. This is a
             paragraph of text that we&apos;ll use for our typography storybook page.
           </p>
-          <blockquote>This is some text inside a blockquote.</blockquote>
+          <blockquote>This is some text inside a blockquote. We&apos;ll make this a little longer to see how it looks when it wraps.</blockquote>
           <p>
             This is a paragraph of text that we&apos;ll use for our typography storybook page. This
             is a paragraph of text that we&apos;ll use for our typography storybook page. This is a

package/src/widgets/datepicker/datepicker.stories.tsx

@@ -12,7 +12,7 @@ export const Default = (): React.JSX.Element => {
   }
 
   return (
-    <div style={{ maxWidth: '270px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '270px', margin: '2rem auto' }}>
       <DatePicker
         onDateChange={handleDateChange}
         id="published_on"

package/src/widgets/modal/modal.stories.tsx

@@ -16,15 +16,8 @@ export default {
 export const Default = (): React.JSX.Element => {
   const { onDismiss, onOpen, isOpen, setIsOpen } = useModal()
 
-  const whiteIcon = `
-    .white-icon {
-      fill: white;  
-    }
-  `
-
   return (
-    <>
-      <style>{whiteIcon}</style>
+    <div style={{ margin: '2rem 0' }}>
       <Button
         onClick={() => {
           setIsOpen(true)
@@ -66,6 +59,6 @@ export const Default = (): React.JSX.Element => {
           </Modal.Actions>
         </Modal.Container>
       </Modal>
-    </>
+    </div>
   )
 }

package/src/widgets/search/search.stories.tsx

@@ -11,7 +11,7 @@ export default {
 
 export const Default = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       <Search variant="underlined" />
     </div>
   )

package/src/widgets/timeline/timeline.stories.tsx

@@ -19,7 +19,7 @@ export const Default = (): React.JSX.Element => (
   <div
     style={{
       maxWidth: '400px',
-      marginBottom: '24px',
+      margin: '2rem 0 24px',
       display: 'flex',
       justifyContent: 'center',
     }}