@byline/ui 1.7.5 → 1.7.6

package/dist/styles/styles.css

@@ -383,93 +383,135 @@
   }
 }
 
-@layer components;
+@layer theme;
 
-@layer byline-components {
-  .component--hamburger {
-    z-index: 200;
-    cursor: pointer;
-    width: 42px;
-    height: 34px;
-    font: inherit;
-    color: inherit;
-    text-transform: none;
-    background-color: #0000;
-    border: 0;
-    border-radius: 4px;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    transition-property: opacity, filter;
-    transition-duration: .15s;
-    transition-timing-function: ease;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-  }
+@layer byline-theme {
+  @scope (.byline-ui) {
+    input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, textarea:autofill:hover, textarea:autofill:focus, select:autofill, select:autofill:hover, select:autofill:focus {
+      -webkit-text-fill-color: black;
+      color: #000;
+      background-color: #fad9a7;
+      border: 1px solid #d89d3d;
+      transition: background-color 5000s ease-in-out;
+      -webkit-box-shadow: inset 0 0 0 1000px #fff2dc;
+      box-shadow: inset 0 0 0 1000px #fff2dc;
+    }
 
-  .component--hamburger:active, .component--hamburger:focus {
-    border: .5px dashed #fff;
-    border-radius: 4px;
-    outline: none;
+    .dark input:autofill, .dark input:autofill:hover, .dark input:autofill:focus, .dark textarea:autofill, .dark textarea:autofill:hover, .dark textarea:autofill:focus, .dark select:autofill, .dark select:autofill:hover, .dark select:autofill:focus, [data-theme="dark"] input:autofill, [data-theme="dark"] input:autofill:hover, [data-theme="dark"] input:autofill:focus, [data-theme="dark"] textarea:autofill, [data-theme="dark"] textarea:autofill:hover, [data-theme="dark"] textarea:autofill:focus, [data-theme="dark"] select:autofill, [data-theme="dark"] select:autofill:hover, [data-theme="dark"] select:autofill:focus {
+      border: 1px solid var(--theme-600);
+      -webkit-text-fill-color: white;
+      -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+      box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+      color: #fff;
+      background-color: #64646480;
+      transition: background-color 5000s ease-in-out;
+    }
   }
 
-  .component--hamburger .box {
-    width: 24px;
-    height: 24px;
-    display: block;
-    position: relative;
+  :root {
+    --scroll-bar-thumb: var(--theme-400);
+    --scroll-bar-track: var(--theme-600);
   }
 
-  .component--hamburger .inner {
-    margin-top: -1px;
-    transition-duration: 75ms;
-    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
-    display: block;
-    top: 50%;
+  :root.dark, :root[data-theme="dark"] {
+    --scroll-bar-thumb: var(--canvas-700);
+    --scroll-bar-track: var(--canvas-900);
   }
 
-  .component--hamburger .inner, .component--hamburger .inner:before, .component--hamburger .inner:after {
-    border-radius: 0;
-    width: 24px;
-    height: 2px;
-    transition-property: transform;
-    transition-duration: .15s;
-    transition-timing-function: ease;
-    position: absolute;
-  }
+  @scope (.byline-ui) {
+    ::-webkit-scrollbar {
+      width: .6em;
+      height: .6em;
+    }
 
-  .component--hamburger .inner:before, .component--hamburger .inner:after {
-    content: "";
-    display: block;
-  }
+    ::-webkit-scrollbar-thumb {
+      background: var(--scroll-bar-thumb);
+    }
 
-  .component--hamburger .inner:before {
-    transition: top 75ms .12s, opacity 75ms;
-    top: -8px;
-  }
+    ::-webkit-scrollbar-track {
+      background: var(--scroll-bar-track);
+    }
 
-  .component--hamburger .inner:after {
-    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
-    bottom: -8px;
-  }
+    ::-webkit-scrollbar-corner {
+      background: var(--scroll-bar-track);
+    }
 
-  .component--hamburger.is_active .inner {
-    transition-delay: .12s;
-    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
-    transform: rotate(45deg);
-  }
+    :scope {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+    }
 
-  .component--hamburger.is_active .inner:before {
-    opacity: 0;
-    transition: top 75ms, opacity 75ms .12s;
-    top: 0;
+    .component--scroller, .dark .component--scroller, [data-theme="dark"] .component--scroller {
+      --scroll-bar-thumb: var(--scroll-bar-thumb);
+      --scroll-bar-track: var(--scroll-bar-track);
+    }
+
+    .component--scroller {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+      overflow-y: auto;
+    }
   }
 
-  .component--hamburger.is_active .inner:after {
-    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
-    bottom: 0;
-    transform: rotate(-90deg);
+  @scope (.byline-ui) {
+    :scope {
+      color: var(--text);
+      font-size: 1rem;
+    }
+
+    .not-dark {
+      color: var(--text);
+    }
+
+    ::selection {
+      background-color: var(--theme-600);
+      color: #fff;
+    }
+
+    .dark ::selection, [data-theme="dark"] ::selection {
+      background-color: var(--theme-200);
+      color: var(--gray-900);
+    }
+
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      line-height: 1.125;
+    }
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.125;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1.1;
+    }
+
+    h4 {
+      font-size: 1rem;
+      font-weight: 600;
+      line-height: 1.1;
+    }
+
+    .external-link:after {
+      content: "";
+      background-image: url("/external-link-light.svg");
+      background-position: 20%;
+      background-repeat: no-repeat;
+      background-size: 65%;
+      width: 1.1rem;
+      height: 1.1rem;
+      margin-right: -5px;
+      display: inline-block;
+    }
+
+    .dark .external-link:after, [data-theme="dark"] .external-link:after {
+      background-image: url("/external-link-dark.svg");
+    }
   }
 }
 
@@ -1448,139 +1490,97 @@
   }
 }
 
-@layer utilities, byline-utilities, theme;
-
-@layer byline-theme {
-  @scope (.byline-ui) {
-    input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, textarea:autofill:hover, textarea:autofill:focus, select:autofill, select:autofill:hover, select:autofill:focus {
-      -webkit-text-fill-color: black;
-      color: #000;
-      background-color: #fad9a7;
-      border: 1px solid #d89d3d;
-      transition: background-color 5000s ease-in-out;
-      -webkit-box-shadow: inset 0 0 0 1000px #fff2dc;
-      box-shadow: inset 0 0 0 1000px #fff2dc;
-    }
+@layer components;
 
-    .dark input:autofill, .dark input:autofill:hover, .dark input:autofill:focus, .dark textarea:autofill, .dark textarea:autofill:hover, .dark textarea:autofill:focus, .dark select:autofill, .dark select:autofill:hover, .dark select:autofill:focus, [data-theme="dark"] input:autofill, [data-theme="dark"] input:autofill:hover, [data-theme="dark"] input:autofill:focus, [data-theme="dark"] textarea:autofill, [data-theme="dark"] textarea:autofill:hover, [data-theme="dark"] textarea:autofill:focus, [data-theme="dark"] select:autofill, [data-theme="dark"] select:autofill:hover, [data-theme="dark"] select:autofill:focus {
-      border: 1px solid var(--theme-600);
-      -webkit-text-fill-color: white;
-      -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
-      box-shadow: 0 0 0px 1000px var(--theme-600) inset;
-      color: #fff;
-      background-color: #64646480;
-      transition: background-color 5000s ease-in-out;
-    }
+@layer byline-components {
+  .component--hamburger {
+    z-index: 200;
+    cursor: pointer;
+    width: 42px;
+    height: 34px;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: #0000;
+    border: 0;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    transition-property: opacity, filter;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    display: flex;
+    position: relative;
+    overflow: hidden;
   }
 
-  :root {
-    --scroll-bar-thumb: var(--theme-400);
-    --scroll-bar-track: var(--theme-600);
+  .component--hamburger:active, .component--hamburger:focus {
+    border: .5px dashed #fff;
+    border-radius: 4px;
+    outline: none;
   }
 
-  :root.dark, :root[data-theme="dark"] {
-    --scroll-bar-thumb: var(--canvas-700);
-    --scroll-bar-track: var(--canvas-900);
+  .component--hamburger .box {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
   }
 
-  @scope (.byline-ui) {
-    ::-webkit-scrollbar {
-      width: .6em;
-      height: .6em;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: var(--scroll-bar-thumb);
-    }
-
-    ::-webkit-scrollbar-track {
-      background: var(--scroll-bar-track);
-    }
-
-    ::-webkit-scrollbar-corner {
-      background: var(--scroll-bar-track);
-    }
-
-    :scope {
-      scrollbar-width: thin;
-      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
-    }
-
-    .component--scroller, .dark .component--scroller, [data-theme="dark"] .component--scroller {
-      --scroll-bar-thumb: var(--scroll-bar-thumb);
-      --scroll-bar-track: var(--scroll-bar-track);
-    }
-
-    .component--scroller {
-      scrollbar-width: thin;
-      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
-      overflow-y: auto;
-    }
+  .component--hamburger .inner {
+    margin-top: -1px;
+    transition-duration: 75ms;
+    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+    display: block;
+    top: 50%;
   }
 
-  @scope (.byline-ui) {
-    :scope {
-      color: var(--text);
-      font-size: 1rem;
-    }
-
-    .not-dark {
-      color: var(--text);
-    }
-
-    ::selection {
-      background-color: var(--theme-600);
-      color: #fff;
-    }
-
-    .dark ::selection, [data-theme="dark"] ::selection {
-      background-color: var(--theme-200);
-      color: var(--gray-900);
-    }
+  .component--hamburger .inner, .component--hamburger .inner:before, .component--hamburger .inner:after {
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
 
-    h1 {
-      font-size: 1.75rem;
-      font-weight: 600;
-      line-height: 1.125;
-    }
+  .component--hamburger .inner:before, .component--hamburger .inner:after {
+    content: "";
+    display: block;
+  }
 
-    h2 {
-      font-size: 1.5rem;
-      font-weight: 600;
-      line-height: 1.125;
-    }
+  .component--hamburger .inner:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
 
-    h3 {
-      font-size: 1.25rem;
-      font-weight: 600;
-      line-height: 1.1;
-    }
+  .component--hamburger .inner:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
 
-    h4 {
-      font-size: 1rem;
-      font-weight: 600;
-      line-height: 1.1;
-    }
+  .component--hamburger.is_active .inner {
+    transition-delay: .12s;
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+    transform: rotate(45deg);
+  }
 
-    .external-link:after {
-      content: "";
-      background-image: url("/external-link-light.svg");
-      background-position: 20%;
-      background-repeat: no-repeat;
-      background-size: 65%;
-      width: 1.1rem;
-      height: 1.1rem;
-      margin-right: -5px;
-      display: inline-block;
-    }
+  .component--hamburger.is_active .inner:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
 
-    .dark .external-link:after, [data-theme="dark"] .external-link:after {
-      background-image: url("/external-link-dark.svg");
-    }
+  .component--hamburger.is_active .inner:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
   }
 }
 
-@layer byline-typography;
+@layer utilities, byline-utilities, byline-typography;
 
 .component--fade-in-lift {
   opacity: 0;

package/dist/styles/typography.css

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

package/dist/widgets/datepicker/datepicker_module.css

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

package/dist/widgets/drawer/drawer_module.css

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

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

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

package/dist/widgets/modal/modal_module.css

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

package/dist/widgets/timeline/timeline_module.css

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

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "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.5",
-    "@byline/client": "1.7.5",
-    "@byline/core": "1.7.5"
+    "@byline/core": "1.7.6",
+    "@byline/admin": "1.7.6",
+    "@byline/client": "1.7.6"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   .combo-button-wrapper,
   :global(.infonomic-combo-button-wrapper) {

package/src/components/button/control-buttons.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 @layer byline-components {
   .stop-button,
   .play-button,

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

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

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

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

package/src/components/chips/chip.module.css

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .chip,

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

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

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

@@ -1,6 +1,6 @@
-@layer base, byline-base, components, byline-components,
-  byline-functional, utilities, byline-utilities,
-  theme, byline-theme, byline-typography;
+@layer base, byline-base, theme, byline-theme,
+  byline-functional, components, byline-components,
+  utilities, byline-utilities, byline-typography;
 
 @layer byline-components {
   .dropdown-content,