@byline/ui 1.10.2 → 1.11.0

package/dist/forms/form-context.d.ts

@@ -41,6 +41,7 @@ interface FormContextType {
     runFieldHooks: (fields: Field[]) => Promise<FormError[]>;
     validateForm: (fields: Field[]) => FormError[];
     errors: FormError[];
+    getErrors: () => FormError[];
     clearErrors: () => void;
     setFieldError: (field: string, message: string) => void;
     clearFieldError: (field: string) => void;

package/dist/forms/form-context.js

@@ -330,6 +330,7 @@ const FormProvider = ({ children, initialData = {} })=>{
             runFieldHooks,
             validateForm,
             errors: errorsRef.current,
+            getErrors: ()=>errorsRef.current,
             clearErrors,
             setFieldError,
             clearFieldError,
@@ -359,8 +360,8 @@ const useSystemPath = ()=>{
 };
 const useFormStore = ()=>useFormContext();
 const useFieldError = (name)=>{
-    const { errors, subscribeErrors } = useFormContext();
-    const [error, setError] = useState(errors.find((e)=>e.field === name)?.message);
+    const { getErrors, subscribeErrors } = useFormContext();
+    const [error, setError] = useState(()=>getErrors().find((e)=>e.field === name)?.message);
     useEffect(()=>{
         const unsubscribe = subscribeErrors((currentErrors)=>{
             const fieldError = currentErrors.find((e)=>e.field === name);

package/dist/loaders/ellipses.js

@@ -10,10 +10,10 @@ function LoaderEllipsis({ color, size, className, style, ...rest }) {
     const circles = [
         ...Array(4)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            className: classnames('infonomic-loader-ellipsis-dot', ellipses_module["loader-ellipsis-dot"])
+            className: classnames('byline-loader-ellipsis-dot', ellipses_module["loader-ellipsis-dot"])
         }, index));
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('infonomic-loader-ellipsis', ellipses_module["loader-ellipsis"], className),
+        className: classnames('byline-loader-ellipsis', ellipses_module["loader-ellipsis"], className),
         style: ellipsisStyle,
         ...rest,
         children: circles

package/dist/loaders/ellipses_module.css

@@ -1,7 +1,7 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.loader-ellipsis-KxN5UN, .infonomic-loader-ellipsis) {
+  :is(.loader-ellipsis-KxN5UN, .byline-loader-ellipsis) {
     --_size: var(--loader-ellipsis-size, 80px);
     --_color: var(--loader-ellipsis-color, var(--loader-color, currentColor));
     width: var(--_size);
@@ -10,7 +10,7 @@
     position: relative;
   }
 
-  :is(.loader-ellipsis-dot-o11IHe, .infonomic-loader-ellipsis-dot) {
+  :is(.loader-ellipsis-dot-o11IHe, .byline-loader-ellipsis-dot) {
     background: var(--_color);
     border-radius: 50%;
     width: 16.25%;

package/dist/loaders/ring.js

@@ -10,10 +10,10 @@ function LoaderRing({ color, size, className, style, ...rest }) {
     const circles = [
         ...Array(4)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            className: classnames('infonomic-loader-ring-arc', ring_module["loader-ring-arc"])
+            className: classnames('byline-loader-ring-arc', ring_module["loader-ring-arc"])
         }, index));
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('infonomic-loader-ring', ring_module["loader-ring"], className),
+        className: classnames('byline-loader-ring', ring_module["loader-ring"], className),
         style: ringStyle,
         ...rest,
         children: circles

package/dist/loaders/ring_module.css

@@ -1,7 +1,7 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.loader-ring-qd6bmX, .infonomic-loader-ring) {
+  :is(.loader-ring-qd6bmX, .byline-loader-ring) {
     --_size: var(--loader-ring-size, 60px);
     --_color: var(--loader-ring-color, var(--loader-color, currentColor));
     width: var(--_size);
@@ -10,7 +10,7 @@
     position: relative;
   }
 
-  :is(.loader-ring-arc-MS2FMV, .infonomic-loader-ring-arc) {
+  :is(.loader-ring-arc-MS2FMV, .byline-loader-ring-arc) {
     box-sizing: border-box;
     width: calc(var(--_size) * .8);
     height: calc(var(--_size) * .8);

package/dist/loaders/spinner.js

@@ -5,9 +5,9 @@ function LoaderSpinner({ color, size, className, style, ...rest }) {
     const circles = [
         ...Array(12)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            className: classnames('infonomic-loader-spinner-blade', spinner_module["loader-spinner-blade"]),
+            className: classnames('byline-loader-spinner-blade', spinner_module["loader-spinner-blade"]),
             children: /*#__PURE__*/ jsx("div", {
-                className: classnames('infonomic-loader-spinner-blade-inner', spinner_module["loader-spinner-blade-inner"])
+                className: classnames('byline-loader-spinner-blade-inner', spinner_module["loader-spinner-blade-inner"])
             })
         }, index));
     const spinnerStyle = {
@@ -16,7 +16,7 @@ function LoaderSpinner({ color, size, className, style, ...rest }) {
     if (null != size) spinnerStyle['--loader-spinner-size'] = 'number' == typeof size ? `${size}px` : size;
     if (color) spinnerStyle['--loader-spinner-color'] = color;
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('infonomic-loader-spinner', spinner_module["loader-spinner"], className),
+        className: classnames('byline-loader-spinner', spinner_module["loader-spinner"], className),
         style: spinnerStyle,
         ...rest,
         children: circles

package/dist/loaders/spinner_module.css

@@ -1,7 +1,7 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.loader-spinner-QHtGI_, .infonomic-loader-spinner) {
+  :is(.loader-spinner-QHtGI_, .byline-loader-spinner) {
     --_size: var(--loader-spinner-size, 56px);
     --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
     width: var(--_size);
@@ -10,12 +10,12 @@
     position: relative;
   }
 
-  :is(.loader-spinner-blade-DQvsAd, .infonomic-loader-spinner-blade) {
+  :is(.loader-spinner-blade-DQvsAd, .byline-loader-spinner-blade) {
     transform-origin: calc(var(--_size) * .5) calc(var(--_size) * .5714);
     animation: 1.2s linear infinite loader-spinner-QHtGI_;
   }
 
-  :is(.loader-spinner-blade-inner-rWTE9U, .infonomic-loader-spinner-blade-inner) {
+  :is(.loader-spinner-blade-inner-rWTE9U, .byline-loader-spinner-blade-inner) {
     top: 0;
     left: calc(var(--_size) * .4464);
     width: calc(var(--_size) * .0893);

package/dist/styles/styles.css

@@ -1599,3 +1599,15 @@
 .byline-ui {
   isolation: isolate;
 }
+
+.sr-only {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}

package/dist/widgets/datepicker/datepicker.js

@@ -47,7 +47,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
         }
     });
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('infonomic-datepicker-container', datepicker_module.container, containerClassName),
+        className: classnames('byline-datepicker-container', datepicker_module.container, containerClassName),
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: {
@@ -65,8 +65,8 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                     intent: intent,
                     inputSize: inputSize,
                     ref: inputRef,
-                    className: classnames('infonomic-datepicker-input', datepicker_module.input, inputClassName),
-                    inputWrapperClassName: classnames('infonomic-datepicker-input-wrapper', datepicker_module["input-wrapper"], inputWrapperClassName),
+                    className: classnames('byline-datepicker-input', datepicker_module.input, inputClassName),
+                    inputWrapperClassName: classnames('byline-datepicker-input-wrapper', datepicker_module["input-wrapper"], inputWrapperClassName),
                     onKeyDown: handleOnKeyDown,
                     onClick: (e)=>{
                         e.preventDefault();
@@ -135,10 +135,10 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                         children: /*#__PURE__*/ jsx(Popover.Positioner, {
                             sideOffset: 5,
                             children: /*#__PURE__*/ jsxs(Popover.Popup, {
-                                className: classnames('infonomic-datepicker-content', datepicker_module.content, contentClassName),
+                                className: classnames('byline-datepicker-content', datepicker_module.content, contentClassName),
                                 children: [
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('infonomic-datepicker-content-components', datepicker_module["content-components"]),
+                                        className: classnames('byline-datepicker-content-components', datepicker_module["content-components"]),
                                         children: [
                                             /*#__PURE__*/ jsx("div", {
                                                 ref: calendarRef,
@@ -196,20 +196,20 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('infonomic-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
+                                        className: classnames('byline-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
                                         children: [
                                             /*#__PURE__*/ jsx("div", {
-                                                className: classnames('infonomic-datepicker-content-status', datepicker_module["content-status"]),
+                                                className: classnames('byline-datepicker-content-status', datepicker_module["content-status"]),
                                                 children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
                                             }),
                                             /*#__PURE__*/ jsxs("div", {
-                                                className: classnames('infonomic-datepicker-content-actions', datepicker_module["content-actions"]),
+                                                className: classnames('byline-datepicker-content-actions', datepicker_module["content-actions"]),
                                                 children: [
                                                     /*#__PURE__*/ jsx("div", {
                                                         children: /*#__PURE__*/ jsx(Button, {
                                                             variant: "outlined",
                                                             size: "sm",
-                                                            className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                            className: classnames('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                             onClick: ()=>{
                                                                 const today = new Date();
                                                                 setDate(today);
@@ -228,7 +228,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                             /*#__PURE__*/ jsx(Button, {
                                                                 size: "sm",
                                                                 intent: "noeffect",
-                                                                className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                                className: classnames('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                                 onClick: ()=>{
                                                                     setIsOpen(false);
                                                                 },
@@ -237,7 +237,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                             /*#__PURE__*/ jsx(Button, {
                                                                 variant: "outlined",
                                                                 size: "sm",
-                                                                className: classnames('infonomic-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                                className: classnames('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                                 onClick: ()=>{
                                                                     setIsOpen(false);
                                                                     handleOnDateChange(date);

package/dist/widgets/datepicker/datepicker_module.css

@@ -1,15 +1,15 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.container-u5_VUp, .infonomic-datepicker-container) {
+  :is(.container-u5_VUp, .byline-datepicker-container) {
     position: relative;
   }
 
-  :is(.input-SaODq9, .input-wrapper-qwAckv, .infonomic-datepicker-input, .infonomic-datepicker-input-wrapper) {
+  :is(.input-SaODq9, .input-wrapper-qwAckv, .byline-datepicker-input, .byline-datepicker-input-wrapper) {
     width: 100%;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content) {
+  :is(.content-UK9iLF, .byline-datepicker-content) {
     z-index: 50;
     width: 100%;
     padding-top: var(--spacing-16);
@@ -25,23 +25,23 @@
     animation-timing-function: cubic-bezier(.16, 1, .3, 1);
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content):focus {
+  :is(.content-UK9iLF, .byline-datepicker-content):focus {
     box-shadow: var(--shadow-md);
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="top"] {
+  :is(.content-UK9iLF, .byline-datepicker-content)[data-open][data-side="top"] {
     animation-name: slideDownAndFade-dohHTE;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="right"] {
+  :is(.content-UK9iLF, .byline-datepicker-content)[data-open][data-side="right"] {
     animation-name: slideLeftAndFade-ugM6Hs;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="bottom"] {
+  :is(.content-UK9iLF, .byline-datepicker-content)[data-open][data-side="bottom"] {
     animation-name: slideUpAndFade-bAwQJS;
   }
 
-  :is(.content-UK9iLF, .infonomic-datepicker-content)[data-open][data-side="left"] {
+  :is(.content-UK9iLF, .byline-datepicker-content)[data-open][data-side="left"] {
     animation-name: slideRightAndFade-o0jl7q;
   }
 
@@ -49,13 +49,13 @@
     background: var(--canvas-800);
   }
 
-  :is(.content-components-jcG649, .infonomic-datepicker-content-components) {
+  :is(.content-components-jcG649, .byline-datepicker-content-components) {
     gap: var(--spacing-8);
     width: 100%;
     display: flex;
   }
 
-  :is(.status-and-actions-Px_b57, .infonomic-datepicker-status-and-actions) {
+  :is(.status-and-actions-Px_b57, .byline-datepicker-status-and-actions) {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
@@ -63,7 +63,7 @@
     display: flex;
   }
 
-  :is(.content-status-XRGKXg, .infonomic-datepicker-content-status) {
+  :is(.content-status-XRGKXg, .byline-datepicker-content-status) {
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-8);
     font-size: var(--font-size-sm);
@@ -73,7 +73,7 @@
     display: flex;
   }
 
-  :is(.content-actions-GVU14S, .infonomic-datepicker-content-actions) {
+  :is(.content-actions-GVU14S, .byline-datepicker-content-actions) {
     margin-top: var(--spacing-12);
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-6);
@@ -84,15 +84,15 @@
     display: flex;
   }
 
-  :is(.content-actions-button-YCN1ho, .infonomic-datepicker-content-actions-button) {
+  :is(.content-actions-button-YCN1ho, .byline-datepicker-content-actions-button) {
     --ring-color: var(--violet-7);
   }
 
-  :is(.arrow-mhGcHb, .infonomic-datepicker-arrow) {
+  :is(.arrow-mhGcHb, .byline-datepicker-arrow) {
     fill: var(--gray-50);
   }
 
-  :is(.close-bJApom, .infonomic-datepicker-close) {
+  :is(.close-bJApom, .byline-datepicker-close) {
     all: unset;
     width: 25px;
     height: 25px;
@@ -107,25 +107,25 @@
     right: 5px;
   }
 
-  :is(.close-bJApom, .infonomic-datepicker-close):hover {
+  :is(.close-bJApom, .byline-datepicker-close):hover {
     background-color: var(--primary-400);
   }
 
-  :is(.close-bJApom, .infonomic-datepicker-close):focus {
+  :is(.close-bJApom, .byline-datepicker-close):focus {
     box-shadow: 0 0 0 2px var(--primary-600);
   }
 
-  :is(.time-picker-container-sVEGKe, .infonomic-datepicker-time-picker-container) {
+  :is(.time-picker-container-sVEGKe, .byline-datepicker-time-picker-container) {
     width: 80px;
     margin: .6rem .5rem 1rem 0;
   }
 
-  :is(.time-picker-scroll-area-q5TiRD, .infonomic-datepicker-time-picker-scroll-area) {
+  :is(.time-picker-scroll-area-q5TiRD, .byline-datepicker-time-picker-scroll-area) {
     height: 280px;
     padding-right: var(--spacing-16);
   }
 
-  :is(.time-picker-Xhertk, .infonomic-datepicker-time-picker) {
+  :is(.time-picker-Xhertk, .byline-datepicker-time-picker) {
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
     flex-direction: column;
@@ -133,7 +133,7 @@
     display: flex;
   }
 
-  :is(.time-picker-button-WA4IUz, .infonomic-datepicker-time-picker-button) {
+  :is(.time-picker-button-WA4IUz, .byline-datepicker-time-picker-button) {
     width: 100%;
   }
 

package/dist/widgets/drawer/drawer-container.js

@@ -5,7 +5,7 @@ import drawer_module from "./drawer.module.js";
 function DrawerContainer({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('infonomic-drawer-container', drawer_module["drawer-container"], className),
+        className: classnames('byline-drawer-container', drawer_module["drawer-container"], className),
         ...rest,
         children: children
     });

package/dist/widgets/drawer/drawer-content.js

@@ -6,7 +6,7 @@ function DrawerContent({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('infonomic-drawer-content', drawer_module["drawer-content"], className),
+        className: classnames('byline-drawer-content', drawer_module["drawer-content"], className),
         children: children
     });
 }

package/dist/widgets/drawer/drawer-header.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import drawer_module from "./drawer.module.js";
 const drawer_header_DrawerHeader = function({ ref, children, className, ...rest }) {
-    const classes = classnames('infonomic-drawer-header', drawer_module["drawer-header"], className);
+    const classes = classnames('byline-drawer-header', drawer_module["drawer-header"], className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             overflowWrap: 'anywhere'

package/dist/widgets/drawer/drawer-top-actions.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import drawer_module from "./drawer.module.js";
 const DrawerTopActions = function({ ref, children, className, ...rest }) {
-    const classes = classnames('infonomic-drawer-top-actions', drawer_module["drawer-top-actions"], className);
+    const classes = classnames('byline-drawer-top-actions', drawer_module["drawer-top-actions"], className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             whiteSpace: 'nowrap'

package/dist/widgets/drawer/drawer.js

@@ -35,13 +35,13 @@ const drawer_Drawer = ({ id, isOpen, onDismiss, closeOnOverlayClick, children, w
         children: /*#__PURE__*/ jsxs(Drawer.Portal, {
             children: [
                 /*#__PURE__*/ jsx(Drawer.Backdrop, {
-                    className: classnames('infonomic-drawer-backdrop', drawer_module.backdrop),
+                    className: classnames('byline-drawer-backdrop', drawer_module.backdrop),
                     style: hasTopOffset ? {
                         top: topOffset
                     } : void 0
                 }),
                 /*#__PURE__*/ jsx(Drawer.Popup, {
-                    className: classnames('infonomic-drawer-wrapper', drawer_module["drawer-wrapper"], typedStyles[`drawer-${width}`], typedStyles[`drawer-depth-${depth.toString()}`], className),
+                    className: classnames('byline-drawer-wrapper', drawer_module["drawer-wrapper"], typedStyles[`drawer-${width}`], typedStyles[`drawer-depth-${depth.toString()}`], className),
                     style: hasTopOffset ? {
                         top: topOffset
                     } : void 0,

package/dist/widgets/drawer/drawer_module.css

@@ -1,7 +1,7 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.backdrop-Ga1s55, .infonomic-drawer-backdrop) {
+  :is(.backdrop-Ga1s55, .byline-drawer-backdrop) {
     background-color: #f5f5f559;
     transition: opacity .2s;
     position: fixed;
@@ -20,15 +20,15 @@
     background-color: #00000080;
   }
 
-  .dark .infonomic-drawer-backdrop {
+  .dark .byline-drawer-backdrop {
     background-color: #00000080;
   }
 
-  [data-theme="dark"] .infonomic-drawer-backdrop {
+  [data-theme="dark"] .byline-drawer-backdrop {
     background-color: #00000080;
   }
 
-  :is(.drawer-wrapper-q0hBzd, .infonomic-drawer-wrapper) {
+  :is(.drawer-wrapper-q0hBzd, .byline-drawer-wrapper) {
     background-color: var(--surface-panel);
     box-shadow: var(--shadow-md);
     flex-direction: column;
@@ -53,11 +53,11 @@
     transition: none;
   }
 
-  :is(.drawer-container-ssf1qn, .infonomic-drawer-container) {
+  :is(.drawer-container-ssf1qn, .byline-drawer-container) {
     height: 100%;
   }
 
-  :is(.drawer-narrow-lsLgHp, .infonomic-drawer-narrow) {
+  :is(.drawer-narrow-lsLgHp, .byline-drawer-narrow) {
     width: calc(100% - 32px);
     max-width: 400px;
   }
@@ -88,7 +88,7 @@
     }
   }
 
-  :is(.drawer-top-actions-FiHu4U, .infonomic-drawer-top-actions) {
+  :is(.drawer-top-actions-FiHu4U, .byline-drawer-top-actions) {
     padding-top: var(--spacing-12);
     padding-left: var(--spacing-12);
     padding-right: var(--spacing-12);
@@ -99,7 +99,7 @@
     display: flex;
   }
 
-  :is(.drawer-header-BtfxvF, .infonomic-drawer-header) {
+  :is(.drawer-header-BtfxvF, .byline-drawer-header) {
     justify-content: space-between;
     align-items: center;
     gap: var(--gap-3);
@@ -114,15 +114,15 @@
     margin: 0;
   }
 
-  .infonomic-drawer-header h2 {
+  .byline-drawer-header h2 {
     margin: 0;
   }
 
-  .infonomic-drawer-header h3 {
+  .byline-drawer-header h3 {
     margin: 0;
   }
 
-  :is(.drawer-content-QQqzOR, .infonomic-drawer-content) {
+  :is(.drawer-content-QQqzOR, .byline-drawer-content) {
     padding: var(--spacing-12);
   }
 }

package/dist/widgets/modal/modal-actions.js

@@ -6,7 +6,7 @@ const modal_actions_ModalActions = function({ ref, children, className, ...rest
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('infonomic-modal-actions', modal_module["modal-actions"], className),
+        className: classnames('byline-modal-actions', modal_module["modal-actions"], className),
         children: children
     });
 };

package/dist/widgets/modal/modal-container.js

@@ -5,7 +5,7 @@ import modal_module from "./modal.module.js";
 const modal_container_ModalContainer = function({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('infonomic-modal-container', modal_module["modal-container"], className),
+        className: classnames('byline-modal-container', modal_module["modal-container"], className),
         ...rest,
         children: children
     });

package/dist/widgets/modal/modal-content.js

@@ -6,7 +6,7 @@ const modal_content_ModalContent = function({ ref, children, className, ...rest
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('infonomic-modal-content', modal_module["modal-content"], className),
+        className: classnames('byline-modal-content', modal_module["modal-content"], className),
         children: children
     });
 };

package/dist/widgets/modal/modal-header.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import modal_module from "./modal.module.js";
 const modal_header_ModalHeader = function({ ref, children, className, ...rest }) {
-    const classes = classnames('infonomic-modal-header', modal_module["modal-header"], 'prose', className);
+    const classes = classnames('byline-modal-header', modal_module["modal-header"], 'prose', className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             overflowWrap: 'anywhere'

package/dist/widgets/modal/modal.js

@@ -39,10 +39,10 @@ function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
             children: /*#__PURE__*/ jsxs(Dialog.Portal, {
                 children: [
                     /*#__PURE__*/ jsx(Dialog.Backdrop, {
-                        className: classnames('infonomic-modal-backdrop', modal_module.backdrop)
+                        className: classnames('byline-modal-backdrop', modal_module.backdrop)
                     }),
                     /*#__PURE__*/ jsx(Dialog.Popup, {
-                        className: classnames('infonomic-modal-wrapper', modal_module["modal-wrapper"]),
+                        className: classnames('byline-modal-wrapper', modal_module["modal-wrapper"]),
                         children: children
                     })
                 ]

package/dist/widgets/modal/modal_module.css

@@ -1,7 +1,7 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.backdrop-BgKon2, .infonomic-modal-backdrop) {
+  :is(.backdrop-BgKon2, .byline-modal-backdrop) {
     background-color: #f5f5f559;
     transition: opacity .2s;
     position: fixed;
@@ -20,15 +20,15 @@
     background-color: #00000080;
   }
 
-  .dark .infonomic-modal-backdrop {
+  .dark .byline-modal-backdrop {
     background-color: #00000080;
   }
 
-  [data-theme="dark"] .infonomic-modal-backdrop {
+  [data-theme="dark"] .byline-modal-backdrop {
     background-color: #00000080;
   }
 
-  :is(.modal-wrapper-wF5Mv1, .infonomic-modal-wrapper) {
+  :is(.modal-wrapper-wF5Mv1, .byline-modal-wrapper) {
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
@@ -43,12 +43,12 @@
   }
 
   @media screen and (min-width: 40rem) {
-    :is(.modal-wrapper-wF5Mv1, .infonomic-modal-wrapper) {
+    :is(.modal-wrapper-wF5Mv1, .byline-modal-wrapper) {
       justify-content: center;
     }
   }
 
-  :is(.modal-container-PPkPyj, .infonomic-modal-container) {
+  :is(.modal-container-PPkPyj, .byline-modal-container) {
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
     background-color: var(--surface-panel);
@@ -63,14 +63,14 @@
   }
 
   @media screen and (min-width: 40rem) {
-    :is(.modal-container-PPkPyj, .infonomic-modal-container) {
+    :is(.modal-container-PPkPyj, .byline-modal-container) {
       width: auto;
       min-height: auto;
       max-height: calc(100vh - 24px);
     }
   }
 
-  :is(.modal-header-ewl_k2, .infonomic-modal-header) {
+  :is(.modal-header-ewl_k2, .byline-modal-header) {
     justify-content: space-between;
     align-items: center;
     gap: var(--gap-3);
@@ -85,15 +85,15 @@
     margin: 0;
   }
 
-  .infonomic-modal-header h2 {
+  .byline-modal-header h2 {
     margin: 0;
   }
 
-  .infonomic-modal-header h3 {
+  .byline-modal-header h3 {
     margin: 0;
   }
 
-  :is(.modal-content-eDnix2, .infonomic-modal-content) {
+  :is(.modal-content-eDnix2, .byline-modal-content) {
     gap: var(--gap-3);
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-16);
@@ -104,7 +104,7 @@
     display: flex;
   }
 
-  :is(.modal-actions-FxnG8C, .infonomic-modal-actions) {
+  :is(.modal-actions-FxnG8C, .byline-modal-actions) {
     justify-content: flex-end;
     align-items: center;
     gap: var(--gap-3);