@byline/ui 1.7.6 → 1.8.0

package/dist/components/accordion/accordion_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.item-iZzmBc, .infonomic-accordion-item) {
@@ -51,5 +51,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/avatar/avatar_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.avatar-root-WYOuF_, .infonomic-avatar-root) {
@@ -34,5 +34,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/badge/badge_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.badge-8xVidp, .infonomic-badge) {
@@ -49,5 +49,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/button/button-group_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.button-group-uqvOi8, .infonomic-button-group) {
@@ -15,5 +15,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/button/button_module.css

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

package/dist/components/button/combo-button_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.combo-button-wrapper-nRtH6j, .infonomic-combo-button-wrapper) {
@@ -50,5 +50,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/button/control-buttons_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.stop-button-krMTsl, .play-button-GfHYHO, .directional-button-kGS8rA, .infonomic-stop-button, .infonomic-play-button, .infonomic-directional-button) {
@@ -107,5 +107,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/button/copy-button_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.copy-button-container-vCNz8o, .infonomic-copy-button-container) {
@@ -47,5 +47,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/card/card_module.css

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

package/dist/components/chips/chip_module.css

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

package/dist/components/container/container_module.css

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

package/dist/components/dropdown/dropdown_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .infonomic-dropdown-content, .infonomic-dropdown-subcontent) {
@@ -109,5 +109,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/hamburger/hamburger_module.css

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

package/dist/components/inputs/autocomplete_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.autocomplete-wrapper-JirsmI, .infonomic-autocomplete-wrapper) {
@@ -310,5 +310,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/calendar_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   .day-picker-HSdX8f {
@@ -221,5 +221,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/checkbox-group_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.infonomic-checkbox-group, .checkbox-group-hPRXiQ) {
@@ -8,5 +8,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/checkbox_module.css

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

package/dist/components/inputs/error-text_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.text-DoybHX, .infonomic-error-text) {
@@ -19,5 +19,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/help-text_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.text-tefb0a, .infonomic-help-text) {
@@ -19,5 +19,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/input-adornment_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.adornment-JKPOkF, .infonomic-input-adornment) {
@@ -17,5 +17,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/input_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.input-wrapper-OJAKML, .infonomic-input-wrapper) {
@@ -257,5 +257,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/label_module.css

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

package/dist/components/inputs/radio-group_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.column-Ca6c3z, .infonomic-radio-group-column) {
@@ -158,5 +158,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/select_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.positioner-Mjx718, .infonomic-select-positioner) {
@@ -139,5 +139,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/inputs/text-area_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.text-area-TY2VVE, .infonomic-text-area) {
@@ -17,5 +17,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/notifications/alert_module.css

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

package/dist/components/notifications/toast_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.viewport-x4CvHl, .infonomic-toast-viewport) {
@@ -210,5 +210,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/pager/pagination_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.pagination-root-yB674z, .infonomic-pagination-root) {
@@ -101,5 +101,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/scroll-area/scroll-area_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.root-XJbuOo, .infonomic-scroll-area) {
@@ -61,5 +61,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/scroll-to-top/scroll-to-top_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.scroll-to-top-WYqAAl, .infonomic-scroll-to-top) {
@@ -98,5 +98,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/section/section_module.css

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

package/dist/components/shimmer/shimmer_module.css

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

package/dist/components/table/table_module.css

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

package/dist/components/tabs/tabs_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.tabs-root-H5dXfK, .infonomic-tabs-root) {
@@ -54,5 +54,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/components/tooltip/tooltip_module.css

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

package/dist/forms/form-renderer.js

@@ -487,6 +487,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                                 useAsPath: useAsPath,
                                 collectionPath: collectionPath ?? '',
                                 defaultLocale: defaultLocale,
+                                activeLocale: contentLocale,
                                 mode: mode
                             }),
                             (layout.sidebar ?? []).map((name)=>renderItem(name))

package/dist/forms/path-widget.d.ts

@@ -5,6 +5,15 @@ export interface PathWidgetProps {
     collectionPath: string;
     /** Default content locale, forwarded to the slugifier as context. */
     defaultLocale: string;
+    /**
+     * The locale currently being edited in the form. When this differs
+     * from `defaultLocale` (i.e. the editor is editing a translation),
+     * the widget renders read-only — phase 1 paths are default-locale
+     * territory, and the lifecycle drops translation-locale path changes
+     * with a warn. Locking the input prevents the warn path being hit
+     * through the admin form and gives editors a clear cue.
+     */
+    activeLocale: string;
     /** `'create'` shows the live derived preview as placeholder text. */
     mode: 'create' | 'edit';
 }
@@ -22,4 +31,4 @@ export interface PathWidgetProps {
  * Stable override handles: `.byline-form-path`, `.byline-form-path-header`,
  * `.byline-form-path-regenerate`.
  */
-export declare const PathWidget: ({ useAsPath, collectionPath, defaultLocale, mode }: PathWidgetProps) => import("react").JSX.Element;
+export declare const PathWidget: ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode, }: PathWidgetProps) => import("react").JSX.Element;

package/dist/forms/path-widget.js

@@ -11,10 +11,11 @@ function coerceToString(value) {
     if (value instanceof Date) return value.toISOString();
     return String(value);
 }
-const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
+const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode })=>{
     const { setSystemPath } = useFormContext();
     const systemPath = useSystemPath();
     const sourceValue = useFieldValue(useAsPath ?? '');
+    const isReadOnly = activeLocale !== defaultLocale;
     const livePreview = useMemo(()=>{
         if (!useAsPath) return '';
         const asString = coerceToString(sourceValue);
@@ -52,13 +53,16 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
         defaultLocale,
         collectionPath
     ]);
-    const hint = inputValue.length > 0 && formatted !== inputValue ? `Suggested: "${formatted}"` : void 0;
-    const placeholder = 'create' === mode && livePreview.length > 0 ? `Will be saved as "${livePreview}"` : void 0;
+    const validationHint = inputValue.length > 0 && formatted !== inputValue ? `Suggested: "${formatted}"` : void 0;
+    const readOnlyHint = isReadOnly ? `Path is set in the default locale ("${defaultLocale}") and applies across translations.` : void 0;
+    const hint = readOnlyHint ?? validationHint;
+    const placeholder = !isReadOnly && 'create' === mode && livePreview.length > 0 ? `Will be saved as "${livePreview}"` : void 0;
     const srDescription = [
         'System-managed URL path for this document.',
         placeholder,
         hint
     ].filter(Boolean).join(' ');
+    const showRegenerate = !isReadOnly && useAsPath && livePreview.length > 0 && livePreview !== systemPath;
     return /*#__PURE__*/ jsxs("div", {
         className: "byline-form-path",
         children: [
@@ -70,7 +74,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
                         htmlFor: "system-path",
                         label: "Path"
                     }),
-                    useAsPath && livePreview.length > 0 && livePreview !== systemPath && /*#__PURE__*/ jsxs("button", {
+                    showRegenerate && /*#__PURE__*/ jsxs("button", {
                         type: "button",
                         onClick: handleRegenerate,
                         className: classnames('byline-form-path-regenerate', path_widget_module.regenerate),
@@ -89,6 +93,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
                 placeholder: placeholder,
                 onChange: (e)=>handleChange(e.target.value),
                 helpText: hint,
+                readOnly: isReadOnly,
                 "aria-describedby": "system-path-description"
             }),
             /*#__PURE__*/ jsx("span", {

package/dist/icons/icons_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   .element-root-UxROLs {
@@ -161,5 +161,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/loaders/ellipses_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.loader-ellipsis-KxN5UN, .infonomic-loader-ellipsis) {
@@ -71,5 +71,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/loaders/ring_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.loader-ring-qd6bmX, .infonomic-loader-ring) {
@@ -47,5 +47,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/loaders/spinner_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.loader-spinner-QHtGI_, .infonomic-loader-spinner) {
@@ -97,5 +97,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/styles/reset.css

@@ -212,4 +212,4 @@
   }
 }
 
-@layer theme, byline-theme, byline-functional, components, byline-components, utilities, byline-utilities, byline-typography;
+@layer theme, byline-theme, byline-functional, byline-typography, components, byline-components, utilities, byline-utilities;

package/dist/styles/styles.css

@@ -1490,7 +1490,7 @@
   }
 }
 
-@layer components;
+@layer byline-typography, components;
 
 @layer byline-components {
   .component--hamburger {
@@ -1580,7 +1580,7 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 
 .component--fade-in-lift {
   opacity: 0;

package/dist/styles/typography.css

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