@byline/ui 1.7.1 → 1.7.2

package/dist/styles/typography.css

@@ -1,3 +1,5 @@
+@layer base, byline-base, components, byline-components, byline-functional, utilities, byline-utilities, theme, byline-theme;
+
 @layer byline-typography {
   :root {
     --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -104,295 +106,299 @@
     --prose-pre-background: #1f2937;
   }
 
-  html {
-    color: var(--prose-body);
-    font-size: 1rem;
-  }
-
-  html .not-dark {
-    color: var(--prose-body);
-  }
+  @scope (.byline-ui) {
+    :scope {
+      color: var(--prose-body);
+      font-size: 1rem;
+    }
 
-  article, .editor-text, .break-long-words {
-    overflow-wrap: anywhere;
-  }
+    .not-dark {
+      color: var(--prose-body);
+    }
 
-  article, .dynamic-text {
-    font-size: 1.25rem;
-    line-height: 1.6;
-  }
+    article, .editor-text, .break-long-words {
+      overflow-wrap: anywhere;
+    }
 
-  @media screen and (width >= 48rem) {
     article, .dynamic-text {
-      font-size: 1.125rem;
-      line-height: 1.64;
+      font-size: 1.25rem;
+      line-height: 1.6;
     }
-  }
 
-  .prose {
-    & h1, & h2, & h3, & h4, & h5 {
-      color: var(--prose-headings);
+    @media screen and (width >= 48rem) {
+      article, .dynamic-text {
+        font-size: 1.125rem;
+        line-height: 1.64;
+      }
     }
-  }
 
-  .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 {
+      & h1, & h2, & h3, & h4, & h5 {
+        color: var(--prose-headings);
+      }
+    }
 
-  .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(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(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(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(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(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(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    margin-top: 1.25em;
-    margin-bottom: 1.25em;
-  }
+    .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-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 :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+    }
 
-  .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-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 :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-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(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    color: var(--prose-links);
-    font-weight: 500;
-    text-decoration: underline;
-  }
+    .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(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    color: var(--prose-bold);
-    font-weight: 500;
-  }
+    .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      color: var(--prose-links);
+      font-weight: 500;
+      text-decoration: underline;
+    }
 
-  .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(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      color: var(--prose-bold);
+      font-weight: 500;
+    }
 
-  .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(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[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    list-style-type: upper-alpha;
-  }
+    .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: lower-alpha;
-  }
+    .prose :where(ol[type="A"]):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: 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: 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="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    list-style-type: upper-roman;
-  }
+    .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: lower-roman;
-  }
+    .prose :where(ol[type="I"]):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: 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: 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="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    list-style-type: decimal;
-  }
+    .prose :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      list-style-type: lower-roman;
+    }
 
-  .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[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      list-style-type: decimal;
+    }
 
-  .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
-    color: var(--prose-counters);
-    font-weight: 400;
-  }
+    .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(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
-    color: var(--prose-bullets);
-  }
+    .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+      color: var(--prose-counters);
+      font-weight: 400;
+    }
 
-  .prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    color: var(--prose-headings);
-    margin-top: 1.25em;
-    font-weight: 500;
-  }
+    .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+      color: var(--prose-bullets);
+    }
 
-  .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(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      color: var(--prose-headings);
+      margin-top: 1.25em;
+      font-weight: 500;
+    }
 
-  .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;
-  }
+    .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;
+    }
 
-  @media (width >= 48rem) {
     .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;
     }
-  }
 
-  .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):before {
-    content: open-quote;
-  }
+    @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:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
-    content: close-quote;
-  }
+    .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):before {
+      content: open-quote;
+    }
 
-  .prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    margin-top: 2em;
-    margin-bottom: 2em;
-  }
+    .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
+      content: close-quote;
+    }
 
-  .prose :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    margin-top: 2em;
-    margin-bottom: 2em;
-    display: block;
-  }
+    .prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
 
-  .prose :where(video):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(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(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
 
-  .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(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(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(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 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    background-color: initial;
-    font-weight: inherit;
-    color: inherit;
-    font-family: inherit;
-    font-size: 1em;
-    line-height: inherit;
-    padding: 0;
-    border-width: 0;
-    border-radius: 0;
-    padding: 0;
-  }
+    .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;
+    }
 
-  html, .font-sans {
-    font-family: var(--font-sans);
+    .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+      background-color: initial;
+      font-weight: inherit;
+      color: inherit;
+      font-family: inherit;
+      font-size: 1em;
+      line-height: inherit;
+      padding: 0;
+      border-width: 0;
+      border-radius: 0;
+      padding: 0;
+    }
   }
 
-  .font-display {
-    font-family: var(--font-display);
-  }
+  @scope (.byline-ui) {
+    :scope, .font-sans {
+      font-family: var(--font-sans);
+    }
 
-  .font-serif {
-    font-family: var(--font-serif);
-  }
+    .font-display {
+      font-family: var(--font-display);
+    }
 
-  .font-mono {
-    font-family: var(--font-mono);
+    .font-serif {
+      font-family: var(--font-serif);
+    }
+
+    .font-mono {
+      font-family: var(--font-mono);
+    }
   }
 }

package/dist/widgets/datepicker/datepicker_module.css

@@ -1,4 +1,4 @@
-@layer byline-base, byline-utilities, byline-theme;
+@layer base, byline-base, components;
 
 @layer byline-components {
   :is(.container-u5_VUp, .infonomic-datepicker-container) {
@@ -186,3 +186,5 @@
   }
 }
 
+@layer byline-functional, utilities, byline-utilities, theme, byline-theme, byline-typography;
+

package/dist/widgets/drawer/drawer_module.css

@@ -1,4 +1,4 @@
-@layer byline-base, byline-utilities, byline-theme;
+@layer base, byline-base, components;
 
 @layer byline-components {
   :is(.backdrop-Ga1s55, .infonomic-drawer-backdrop) {
@@ -127,3 +127,5 @@
   }
 }
 
+@layer byline-functional, utilities, byline-utilities, theme, byline-theme, byline-typography;
+

package/dist/widgets/image-lightbox/image-lightbox_module.css

@@ -1,4 +1,4 @@
-@layer byline-base, byline-utilities, byline-theme;
+@layer base, byline-base, components;
 
 @layer byline-components {
   .container-E7tMnX {
@@ -80,3 +80,5 @@
   }
 }
 
+@layer byline-functional, utilities, byline-utilities, theme, byline-theme, byline-typography;
+

package/dist/widgets/modal/modal_module.css

@@ -1,4 +1,4 @@
-@layer byline-base, byline-utilities, byline-theme;
+@layer base, byline-base, components;
 
 @layer byline-components {
   :is(.backdrop-BgKon2, .infonomic-modal-backdrop) {
@@ -116,3 +116,5 @@
   }
 }
 
+@layer byline-functional, utilities, byline-utilities, theme, byline-theme, byline-typography;
+

package/dist/widgets/timeline/timeline_module.css

@@ -1,4 +1,4 @@
-@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+@layer base, byline-base, components;
 
 @layer byline-components {
   :is(.timeline-qJOU85, .infonomic-timeline) {
@@ -81,3 +81,5 @@
   }
 }
 
+@layer byline-functional, utilities, byline-utilities, theme, byline-theme, byline-typography;
+

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -65,9 +65,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.2",
     "zod-form-data": "^3.0.1",
-    "@byline/admin": "1.7.1",
-    "@byline/core": "1.7.1",
-    "@byline/client": "1.7.1"
+    "@byline/core": "1.7.2",
+    "@byline/admin": "1.7.2",
+    "@byline/client": "1.7.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/accordion/accordion.module.css

@@ -1,5 +1,6 @@
-@layer byline-base, byline-utilities, byline-theme, byline-components;
-
+@layer base, byline-base, components, byline-components,
+  byline-functional, utilities, byline-utilities,
+  theme, byline-theme, byline-typography;
 @layer byline-components {
   .item,
   :global(.infonomic-accordion-item) {

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

@@ -1,9 +1,6 @@
-@layer byline-base,
-  byline-functional,
-  byline-utilities,
-  byline-theme,
-  byline-typography,
-  byline-components;
+@layer base, byline-base, components, byline-components,
+  byline-functional, utilities, byline-utilities,
+  theme, byline-theme, byline-typography;
 
 @layer byline-components {
   /* relative inline-flex h-10 w-10 rounded-full */