@byline/ui 1.10.1 → 1.10.3

package/src/components/notifications/alert.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .alert,
-  :global(.infonomic-alert) {
+  :global(.byline-alert) {
     display: flex;
     align-items: start;
     width: 100%;
@@ -28,14 +28,14 @@
   }
 
   .alert-with-title,
-  :global(.infonomic-alert-with-title) {
+  :global(.byline-alert-with-title) {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
 
   .icon,
-  :global(.infonomic-alert-icon) {
+  :global(.byline-alert-icon) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,7 +46,7 @@
   }
 
   .close,
-  :global(.infonomic-alert-close) {
+  :global(.byline-alert-close) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -61,13 +61,13 @@
   }
 
   .fade,
-  :global(.infonomic-alert-fade) {
+  :global(.byline-alert-fade) {
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
   }
 
   .header,
-  :global(.infonomic-alert-header) {
+  :global(.byline-alert-header) {
     display: flex;
     align-items: start;
     width: 100%;
@@ -76,7 +76,7 @@
   }
 
   .title,
-  :global(.infonomic-alert-title) {
+  :global(.byline-alert-title) {
     display: flex;
     font-weight: bold;
     font-size: 1.2rem;
@@ -85,55 +85,55 @@
   }
 
   .content,
-  :global(.infonomic-alert-content) {
+  :global(.byline-alert-content) {
     padding-top: 1px;
     font-size: var(--font-size-sm);
   }
 
   .content:first-child,
-  :global(.infonomic-alert-content:first-child) {
+  :global(.byline-alert-content:first-child) {
     margin-top: 0;
   }
 
   /* Intents */
   .primary,
-  :global(.infonomic-alert-primary) {
+  :global(.byline-alert-primary) {
     --alert-border: var(--stroke-primary);
     --alert-background: var(--fill-primary-weak);
   }
 
   .secondary,
-  :global(.infonomic-alert-secondary) {
+  :global(.byline-alert-secondary) {
     --alert-border: var(--stroke-secondary);
     --alert-background: var(--fill-secondary-weak);
   }
 
   .noeffect,
-  :global(.infonomic-alert-noeffect) {
+  :global(.byline-alert-noeffect) {
     --alert-border: var(--stroke-noeffect);
     --alert-background: var(--fill-noeffect-weak);
   }
 
   .success,
-  :global(.infonomic-alert-success) {
+  :global(.byline-alert-success) {
     --alert-border: var(--stroke-success);
     --alert-background: var(--fill-success-weak);
   }
 
   .info,
-  :global(.infonomic-alert-info) {
+  :global(.byline-alert-info) {
     --alert-border: var(--stroke-info);
     --alert-background: var(--fill-info-weak);
   }
 
   .warning,
-  :global(.infonomic-alert-warning) {
+  :global(.byline-alert-warning) {
     --alert-border: var(--stroke-warning);
     --alert-background: var(--fill-warning-weak);
   }
 
   .danger,
-  :global(.infonomic-alert-danger) {
+  :global(.byline-alert-danger) {
     --alert-border: var(--stroke-danger);
     --alert-background: var(--fill-danger-weak);
   }

package/src/components/notifications/alert.tsx

@@ -66,8 +66,8 @@ export const Alert = function Alert({
     <div
       ref={ref}
       className={cx(
-        'infonomic-alert',
-        `infonomic-alert-${intent}`,
+        'byline-alert',
+        `byline-alert-${intent}`,
         styles.alert,
         styles[intent],
         className,
@@ -78,10 +78,10 @@ export const Alert = function Alert({
       {...rest}
     >
       {title != null ? (
-        <div className={cx('infonomic-alert-with-title', styles['alert-with-title'])}>
-          <div className={cx('infonomic-alert-header', styles.header)}>
-            {icon && <Icon className={cx('infonomic-alert-icon', styles.icon)} />}
-            <div className={cx('infonomic-alert-title', styles.title)}>
+        <div className={cx('byline-alert-with-title', styles['alert-with-title'])}>
+          <div className={cx('byline-alert-header', styles.header)}>
+            {icon && <Icon className={cx('byline-alert-icon', styles.icon)} />}
+            <div className={cx('byline-alert-title', styles.title)}>
               <span>{title}</span>
             </div>
             {close === true && (
@@ -89,7 +89,7 @@ export const Alert = function Alert({
                 intent={intent}
                 variant="filled"
                 aria-label="Close"
-                className={cx('infonomic-alert-close', styles.close)}
+                className={cx('byline-alert-close', styles.close)}
                 type="button"
                 onClick={handleOnClose}
                 {...rest}
@@ -98,18 +98,18 @@ export const Alert = function Alert({
               </Button>
             )}
           </div>
-          <div className={cx('infonomic-alert-content', styles.content)}>{children}</div>
+          <div className={cx('byline-alert-content', styles.content)}>{children}</div>
         </div>
       ) : (
         <>
-          {icon && <Icon className={cx('infonomic-alert-icon', styles.icon)} />}
-          <div className={cx('infonomic-alert-content', styles.content)}>{children}</div>
+          {icon && <Icon className={cx('byline-alert-icon', styles.icon)} />}
+          <div className={cx('byline-alert-content', styles.content)}>{children}</div>
           {close === true && (
             <Button
               intent={intent}
               variant="filled"
               aria-label="Close"
-              className={cx('infonomic-alert-close', styles.close)}
+              className={cx('byline-alert-close', styles.close)}
               type="button"
               onClick={handleOnClose}
               {...rest}

package/src/components/notifications/toast.module.css

@@ -16,7 +16,7 @@
      ============================================ */
 
   .viewport,
-  :global(.infonomic-toast-viewport) {
+  :global(.byline-toast-viewport) {
     --viewport-padding: 16px;
     position: fixed;
     display: flex;
@@ -29,28 +29,28 @@
   /* Mobile: full-width at all positions */
 
   .top-left,
-  :global(.infonomic-toast-top-left) {
+  :global(.byline-toast-top-left) {
     top: 88px;
     right: var(--viewport-padding);
     left: var(--viewport-padding);
   }
 
   .top-right,
-  :global(.infonomic-toast-top-right) {
+  :global(.byline-toast-top-right) {
     top: 88px;
     right: var(--viewport-padding);
     left: var(--viewport-padding);
   }
 
   .bottom-left,
-  :global(.infonomic-toast-bottom-left) {
+  :global(.byline-toast-bottom-left) {
     bottom: var(--viewport-padding);
     right: var(--viewport-padding);
     left: var(--viewport-padding);
   }
 
   .bottom-right,
-  :global(.infonomic-toast-bottom-right) {
+  :global(.byline-toast-bottom-right) {
     bottom: var(--viewport-padding);
     right: var(--viewport-padding);
     left: var(--viewport-padding);
@@ -58,7 +58,7 @@
 
   @media (min-width: 48rem) {
     .bottom-right,
-    :global(.infonomic-toast-bottom-right) {
+    :global(.byline-toast-bottom-right) {
       bottom: var(--viewport-padding);
       right: var(--viewport-padding);
       left: auto;
@@ -67,7 +67,7 @@
     }
 
     .bottom-left,
-    :global(.infonomic-toast-bottom-left) {
+    :global(.byline-toast-bottom-left) {
       bottom: var(--viewport-padding);
       left: var(--viewport-padding);
       right: auto;
@@ -76,7 +76,7 @@
     }
 
     .top-left,
-    :global(.infonomic-toast-top-left) {
+    :global(.byline-toast-top-left) {
       top: 88px;
       left: var(--viewport-padding);
       right: auto;
@@ -86,7 +86,7 @@
     }
 
     .top-right,
-    :global(.infonomic-toast-top-right) {
+    :global(.byline-toast-top-right) {
       top: 88px;
       right: var(--viewport-padding);
       bottom: auto;
@@ -101,7 +101,7 @@
      ============================================ */
 
   .root,
-  :global(.infonomic-toast-root) {
+  :global(.byline-toast-root) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
@@ -122,7 +122,7 @@
 
   /* Entry animation */
   .root[data-starting-style],
-  :global(.infonomic-toast-root[data-starting-style]) {
+  :global(.byline-toast-root[data-starting-style]) {
     opacity: 0;
     transform: translateY(calc(100% + var(--viewport-padding)));
   }
@@ -130,16 +130,25 @@
   @media (min-width: 48rem) {
     .viewport.top-right .root[data-starting-style],
     .viewport.bottom-right .root[data-starting-style],
-    :global(.infonomic-toast-viewport.top-right .infonomic-toast-root[data-starting-style]),
-    :global(.infonomic-toast-viewport.bottom-right .infonomic-toast-root[data-starting-style]) {
+    :global(
+      .byline-toast-viewport.top-right .byline-toast-root[data-starting-style]
+    ),
+    :global(
+      .byline-toast-viewport.bottom-right
+        .byline-toast-root[data-starting-style]
+    ) {
       opacity: 0;
       transform: translateX(calc(100% + var(--viewport-padding)));
     }
 
     .viewport.top-left .root[data-starting-style],
     .viewport.bottom-left .root[data-starting-style],
-    :global(.infonomic-toast-viewport.top-left .infonomic-toast-root[data-starting-style]),
-    :global(.infonomic-toast-viewport.bottom-left .infonomic-toast-root[data-starting-style]) {
+    :global(
+      .byline-toast-viewport.top-left .byline-toast-root[data-starting-style]
+    ),
+    :global(
+      .byline-toast-viewport.bottom-left .byline-toast-root[data-starting-style]
+    ) {
       opacity: 0;
       transform: translateX(calc(-100% - var(--viewport-padding)));
     }
@@ -147,22 +156,26 @@
 
   /* Exit animation */
   .root[data-ending-style],
-  :global(.infonomic-toast-root[data-ending-style]) {
+  :global(.byline-toast-root[data-ending-style]) {
     opacity: 0;
   }
 
   .root[data-ending-style][data-swipe-direction="right"],
-  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="right"]) {
-    transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
+  :global(.byline-toast-root[data-ending-style][data-swipe-direction="right"]) {
+    transform: translateX(
+      calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding))
+    );
   }
 
   .root[data-ending-style][data-swipe-direction="left"],
-  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="left"]) {
-    transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
+  :global(.byline-toast-root[data-ending-style][data-swipe-direction="left"]) {
+    transform: translateX(
+      calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding))
+    );
   }
 
   .root[data-ending-style][data-swipe-direction="down"],
-  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="down"]) {
+  :global(.byline-toast-root[data-ending-style][data-swipe-direction="down"]) {
     transform: translateY(calc(var(--toast-swipe-movement-y, 0) + 150%));
   }
 
@@ -171,7 +184,7 @@
      ============================================ */
 
   .content,
-  :global(.infonomic-toast-content) {
+  :global(.byline-toast-content) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
@@ -182,7 +195,7 @@
      ============================================ */
 
   .header,
-  :global(.infonomic-toast-header) {
+  :global(.byline-toast-header) {
     display: flex;
     padding: 0 16px 0 12px;
     align-items: start;
@@ -191,7 +204,7 @@
   }
 
   .close,
-  :global(.infonomic-toast-close) {
+  :global(.byline-toast-close) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -206,12 +219,12 @@
   }
 
   .close svg,
-  :global(.infonomic-toast-close svg) {
+  :global(.byline-toast-close svg) {
     fill: white;
   }
 
   .title,
-  :global(.infonomic-toast-title) {
+  :global(.byline-toast-title) {
     display: flex;
     padding: 0 12px 0 8px;
     align-items: start;
@@ -222,7 +235,7 @@
   }
 
   .description,
-  :global(.infonomic-toast-description) {
+  :global(.byline-toast-description) {
     margin: 0;
     padding: 0 8px 0 12px;
     font-size: var(--font-size-sm);
@@ -230,7 +243,7 @@
   }
 
   .action,
-  :global(.infonomic-toast-action) {
+  :global(.byline-toast-action) {
     display: flex;
     justify-content: end;
     padding: 0 12px 0 12px;

package/src/components/notifications/toast.tsx

@@ -55,7 +55,7 @@ export function ToastViewport({ position = 'bottom-right', className }: ToastVie
   return (
     <ToastPrimitive.Portal>
       <ToastPrimitive.Viewport
-        className={cx('infonomic-toast-viewport', styles.viewport, styles[position], className)}
+        className={cx('byline-toast-viewport', styles.viewport, styles[position], className)}
       >
         {toasts.map((toast) => (
           <ToastItem key={toast.id} toast={toast} />
@@ -78,10 +78,10 @@ function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData
     <ToastPrimitive.Root
       toast={toast}
       swipeDirection={swipeDirection}
-      className={cx('infonomic-toast', styles.root)}
+      className={cx('byline-toast', styles.root)}
     >
-      <ToastPrimitive.Content className={cx('infonomic-toast-content', styles.content)}>
-        <div className={cx('infonomic-toast-header', styles.header)}>
+      <ToastPrimitive.Content className={cx('byline-toast-content', styles.content)}>
+        <div className={cx('byline-toast-header', styles.header)}>
           <time dateTime={eventDateRef.current.toISOString()} className="text-sm">
             {new Intl.DateTimeFormat('default', {
               hour12: true,
@@ -97,7 +97,7 @@ function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData
                   tabIndex={0}
                   variant="filled"
                   aria-label="Close"
-                  className={cx('infonomic-toast-close', styles.close)}
+                  className={cx('byline-toast-close', styles.close)}
                   type="button"
                 />
               }
@@ -106,13 +106,11 @@ function ToastItem({ toast }: { toast: ToastPrimitive.Root.ToastObject<ToastData
             </ToastPrimitive.Close>
           )}
         </div>
-        <ToastPrimitive.Title className={cx('infonomic-toast-title', styles.title)}>
+        <ToastPrimitive.Title className={cx('byline-toast-title', styles.title)}>
           {icon && Icon && <Icon />}
           {toast.title}
         </ToastPrimitive.Title>
-        <ToastPrimitive.Description
-          className={cx('infonomic-toast-description', styles.description)}
-        >
+        <ToastPrimitive.Description className={cx('byline-toast-description', styles.description)}>
           {toast.description}
         </ToastPrimitive.Description>
       </ToastPrimitive.Content>

package/src/components/pager/pagination.module.css

@@ -11,14 +11,14 @@
 
 @layer byline-components {
   .pagination-root,
-  :global(.infonomic-pagination-root) {
+  :global(.byline-pagination-root) {
     display: flex;
     padding: 0;
     align-items: center;
   }
 
   .pagination-items,
-  :global(.infonomic-pagination-items) {
+  :global(.byline-pagination-items) {
     display: flex;
     align-items: center;
     list-style: none;
@@ -26,18 +26,18 @@
 
   .pagination-items.dashboard li,
   .pagination-items.default li,
-  :global(.infonomic-pagination-items.dashboard) li,
-  :global(.infonomic-pagination-items.default) li {
+  :global(.byline-pagination-items.dashboard) li,
+  :global(.byline-pagination-items.default) li {
     margin-right: -1px;
   }
 
   .pagination-items.classic li,
-  :global(.infonomic-pagination-items.classic) li {
+  :global(.byline-pagination-items.classic) li {
     margin-right: 0;
   }
 
   .pagination-items.classic,
-  :global(.infonomic-pagination-items.classic) {
+  :global(.byline-pagination-items.classic) {
     gap: 6px;
   }
 

package/src/components/pager/pagination.tsx

@@ -231,7 +231,7 @@ const Root = ({
       data-testid={dataTestId}
       ref={ref}
       className={cx(
-        'infonomic-pagination-root',
+        'byline-pagination-root',
         styles['pagination-root'],
         'pagination-root',
         className
@@ -241,7 +241,7 @@ const Root = ({
     >
       <ul
         className={cx(
-          'infonomic-pagination-items',
+          'byline-pagination-items',
           styles['pagination-items'],
           styles[variant],
           itemsClassName

package/src/components/scroll-area/scroll-area.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .root,
-  :global(.infonomic-scroll-area) {
+  :global(.byline-scroll-area) {
     border-radius: 4px;
     overflow: hidden;
     background-color: inherit;
@@ -19,14 +19,14 @@
   }
 
   .viewport,
-  :global(.infonomic-scroll-area-viewport) {
+  :global(.byline-scroll-area-viewport) {
     width: 100%;
     height: 100%;
     border-radius: inherit;
   }
 
   .scrollbar,
-  :global(.infonomic-scroll-area-scrollbar) {
+  :global(.byline-scroll-area-scrollbar) {
     display: flex;
     /* ensures no selection */
     user-select: none;
@@ -51,7 +51,7 @@
   }
 
   .thumb,
-  :global(.infonomic-scroll-area-thumb) {
+  :global(.byline-scroll-area-thumb) {
     flex: 1;
     background: var(--surface-panel-scrollbar-thumb);
     border-radius: var(--border-radius-sm);
@@ -72,7 +72,7 @@
   }
 
   .corner,
-  :global(.infonomic-scroll-area-corner) {
+  :global(.byline-scroll-area-corner) {
     background: var(--surface-panel-scrollbar);
   }
 }

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

@@ -10,23 +10,23 @@ interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitiv
 export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
   <ScrollAreaPrimitive.Root
     style={style}
-    className={cx('infonomic-scroll-area', styles.root, className)}
+    className={cx('byline-scroll-area', styles.root, className)}
   >
-    <ScrollAreaPrimitive.Viewport className={cx('infonomic-scroll-area-viewport', styles.viewport)}>
+    <ScrollAreaPrimitive.Viewport className={cx('byline-scroll-area-viewport', styles.viewport)}>
       <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
     </ScrollAreaPrimitive.Viewport>
     <ScrollAreaPrimitive.Scrollbar
-      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      className={cx('byline-scroll-area-scrollbar', styles.scrollbar)}
       orientation="vertical"
     >
-      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
+      <ScrollAreaPrimitive.Thumb className={cx('byline-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
     <ScrollAreaPrimitive.Scrollbar
-      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      className={cx('byline-scroll-area-scrollbar', styles.scrollbar)}
       orientation="horizontal"
     >
-      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
+      <ScrollAreaPrimitive.Thumb className={cx('byline-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
-    <ScrollAreaPrimitive.Corner className={cx('infonomic-scroll-area-corner', styles.corner)} />
+    <ScrollAreaPrimitive.Corner className={cx('byline-scroll-area-corner', styles.corner)} />
   </ScrollAreaPrimitive.Root>
 )

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -10,7 +10,7 @@
   byline-utilities;
 @layer byline-components {
   .scroll-to-top,
-  :global(.infonomic-scroll-to-top) {
+  :global(.byline-scroll-to-top) {
     display: flex;
     position: fixed;
     width: 0;
@@ -37,28 +37,28 @@
   }
 
   .scroll-to-top span,
-  :global(.infonomic-scroll-to-top span) {
+  :global(.byline-scroll-to-top span) {
     width: 18px;
     padding-bottom: 3px;
   }
 
   .scroll-to-top span svg path,
-  :global(.infonomic-scroll-to-top span svg path) {
+  :global(.byline-scroll-to-top span svg path) {
     stroke: none;
     fill: var(--text-on-primary-strong);
   }
 
   .scroll-to-top:hover,
   .scroll-to-top:focus,
-  :global(.infonomic-scroll-to-top:hover),
-  :global(.infonomic-scroll-to-top:focus) {
+  :global(.byline-scroll-to-top:hover),
+  :global(.byline-scroll-to-top:focus) {
     color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong-hover);
     transform: translateY(-5px);
   }
 
   .scroll-to-top-shown,
-  :global(.infonomic-scroll-to-top-shown) {
+  :global(.byline-scroll-to-top-shown) {
     min-width: 0;
     opacity: 1;
     visibility: visible;
@@ -72,18 +72,18 @@
 
   @media screen and (min-width: 587px) {
     .scroll-to-top,
-    :global(.infonomic-scroll-to-top) {
+    :global(.byline-scroll-to-top) {
       bottom: 45px;
       right: 45px;
     }
 
     .scroll-to-top span,
-    :global(.infonomic-scroll-to-top span) {
+    :global(.byline-scroll-to-top span) {
       width: 18px;
     }
 
     .scroll-to-top-shown,
-    :global(.infonomic-scroll-to-top-shown) {
+    :global(.byline-scroll-to-top-shown) {
       width: 42px;
       height: 42px;
       border-radius: 21px;

package/src/components/scroll-to-top/scroll-to-top.tsx

@@ -61,10 +61,10 @@ export function ScrollToTop({
       aria-label={ariaLabel}
       onClick={handleOnClick}
       className={cx(
-        'infonomic-scroll-to-top',
+        'byline-scroll-to-top',
         styles['scroll-to-top'],
         {
-          'infonomic-scroll-to-top-shown': show,
+          'byline-scroll-to-top-shown': show,
           [styles['scroll-to-top-shown']]: show,
         },
         className

package/src/components/section/section.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .section,
-  :global(.infonomic-section) {
+  :global(.byline-section) {
     width: 100%;
     position: relative;
   }

package/src/components/section/section.tsx

@@ -16,7 +16,7 @@ export const Section = function Section({
   ref?: React.RefObject<HTMLElement>
 }): React.JSX.Element {
   return (
-    <section className={cx('infonomic-section', styles.section, className)} ref={ref} {...rest}>
+    <section className={cx('byline-section', styles.section, className)} ref={ref} {...rest}>
       {children}
     </section>
   )