@byline/ui 1.10.2 → 1.11.0

package/src/widgets/drawer/drawer.module.css

@@ -12,7 +12,7 @@
   /* Backdrop overlay (replaces previous Overlay component) */
 
   .backdrop,
-  :global(.infonomic-drawer-backdrop) {
+  :global(.byline-drawer-backdrop) {
     position: fixed;
     top: 0;
     left: 0;
@@ -29,15 +29,15 @@
 
   :global(.dark) .backdrop,
   :global([data-theme="dark"]) .backdrop,
-  :global(.dark .infonomic-drawer-backdrop),
-  :global([data-theme="dark"] .infonomic-drawer-backdrop) {
+  :global(.dark .byline-drawer-backdrop),
+  :global([data-theme="dark"] .byline-drawer-backdrop) {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
   /* Drawer wrapper / popup — the sliding panel itself */
 
   .drawer-wrapper,
-  :global(.infonomic-drawer-wrapper) {
+  :global(.byline-drawer-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -66,14 +66,14 @@
   /* Container (inner wrapper, no longer needs positioning) */
 
   .drawer-container,
-  :global(.infonomic-drawer-container) {
+  :global(.byline-drawer-container) {
     height: 100%;
   }
 
   /* Width variant: narrow */
 
   .drawer-narrow,
-  :global(.infonomic-drawer-narrow) {
+  :global(.byline-drawer-narrow) {
     width: calc(100% - 32px);
     max-width: 400px;
   }
@@ -112,7 +112,7 @@
   /* Sub-component styles */
 
   .drawer-top-actions,
-  :global(.infonomic-drawer-top-actions) {
+  :global(.byline-drawer-top-actions) {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -124,7 +124,7 @@
   }
 
   .drawer-header,
-  :global(.infonomic-drawer-header) {
+  :global(.byline-drawer-header) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -137,13 +137,13 @@
 
   .drawer-header h2,
   .drawer-header h3,
-  :global(.infonomic-drawer-header h2),
-  :global(.infonomic-drawer-header h3) {
+  :global(.byline-drawer-header h2),
+  :global(.byline-drawer-header h3) {
     margin: 0;
   }
 
   .drawer-content,
-  :global(.infonomic-drawer-content) {
+  :global(.byline-drawer-content) {
     padding: var(--spacing-12);
   }
 }

package/src/widgets/drawer/drawer.tsx

@@ -68,12 +68,12 @@ const Drawer = ({
     >
       <BaseDrawer.Portal>
         <BaseDrawer.Backdrop
-          className={cx('infonomic-drawer-backdrop', styles.backdrop)}
+          className={cx('byline-drawer-backdrop', styles.backdrop)}
           style={hasTopOffset ? { top: topOffset } : undefined}
         />
         <BaseDrawer.Popup
           className={cx(
-            'infonomic-drawer-wrapper',
+            'byline-drawer-wrapper',
             styles['drawer-wrapper'],
             typedStyles[`drawer-${width}`],
             typedStyles[`drawer-depth-${depth.toString()}`],

package/src/widgets/modal/modal-actions.tsx

@@ -23,7 +23,7 @@ export const ModalActions = function ModalActions({
     <div
       ref={ref}
       {...rest}
-      className={cx('infonomic-modal-actions', styles['modal-actions'], className)}
+      className={cx('byline-modal-actions', styles['modal-actions'], className)}
     >
       {children}
     </div>

package/src/widgets/modal/modal-container.tsx

@@ -22,7 +22,7 @@ export const ModalContainer = function ModalContainer({
   return (
     <div
       ref={ref}
-      className={cx('infonomic-modal-container', styles['modal-container'], className)}
+      className={cx('byline-modal-container', styles['modal-container'], className)}
       {...rest}
     >
       {children}

package/src/widgets/modal/modal-content.tsx

@@ -23,7 +23,7 @@ export const ModalContent = function ModalContent({
     <div
       ref={ref}
       {...rest}
-      className={cx('infonomic-modal-content', styles['modal-content'], className)}
+      className={cx('byline-modal-content', styles['modal-content'], className)}
     >
       {children}
     </div>

package/src/widgets/modal/modal-header.tsx

@@ -19,7 +19,7 @@ export const ModalHeader = function ModalHeader({
 }: ModalHeaderProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
-  const classes = cx('infonomic-modal-header', styles['modal-header'], 'prose', className)
+  const classes = cx('byline-modal-header', styles['modal-header'], 'prose', className)
   return (
     <div style={{ overflowWrap: 'anywhere' }} ref={ref} {...rest} className={classes}>
       {children}

package/src/widgets/modal/modal.module.css

@@ -12,7 +12,7 @@
   /* Backdrop overlay */
 
   .backdrop,
-  :global(.infonomic-modal-backdrop) {
+  :global(.byline-modal-backdrop) {
     position: fixed;
     top: 0;
     left: 0;
@@ -29,15 +29,15 @@
 
   :global(.dark) .backdrop,
   :global([data-theme="dark"]) .backdrop,
-  :global(.dark .infonomic-modal-backdrop),
-  :global([data-theme="dark"] .infonomic-modal-backdrop) {
+  :global(.dark .byline-modal-backdrop),
+  :global([data-theme="dark"] .byline-modal-backdrop) {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
   /* Modal wrapper / popup — the dialog surface */
 
   .modal-wrapper,
-  :global(.infonomic-modal-wrapper) {
+  :global(.byline-modal-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -57,7 +57,7 @@
 
   @media screen and (min-width: 40rem) {
     .modal-wrapper,
-    :global(.infonomic-modal-wrapper) {
+    :global(.byline-modal-wrapper) {
       justify-content: center;
     }
   }
@@ -65,7 +65,7 @@
   /* Container — the visible dialog box */
 
   .modal-container,
-  :global(.infonomic-modal-container) {
+  :global(.byline-modal-container) {
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-md);
@@ -81,7 +81,7 @@
 
   @media screen and (min-width: 40rem) {
     .modal-container,
-    :global(.infonomic-modal-container) {
+    :global(.byline-modal-container) {
       max-height: calc(100vh - 24px);
       min-height: auto;
       width: auto;
@@ -91,7 +91,7 @@
   /* Sub-component styles */
 
   .modal-header,
-  :global(.infonomic-modal-header) {
+  :global(.byline-modal-header) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -104,13 +104,13 @@
 
   .modal-header h2,
   .modal-header h3,
-  :global(.infonomic-modal-header h2),
-  :global(.infonomic-modal-header h3) {
+  :global(.byline-modal-header h2),
+  :global(.byline-modal-header h3) {
     margin: 0;
   }
 
   .modal-content,
-  :global(.infonomic-modal-content) {
+  :global(.byline-modal-content) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -122,7 +122,7 @@
   }
 
   .modal-actions,
-  :global(.infonomic-modal-actions) {
+  :global(.byline-modal-actions) {
     display: flex;
     align-items: center;
     justify-content: flex-end;

package/src/widgets/modal/modal.tsx

@@ -68,8 +68,8 @@ function Modal({
         disablePointerDismissal={closeOnOverlayClick !== true}
       >
         <Dialog.Portal>
-          <Dialog.Backdrop className={cx('infonomic-modal-backdrop', styles.backdrop)} />
-          <Dialog.Popup className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}>
+          <Dialog.Backdrop className={cx('byline-modal-backdrop', styles.backdrop)} />
+          <Dialog.Popup className={cx('byline-modal-wrapper', styles['modal-wrapper'])}>
             {children}
           </Dialog.Popup>
         </Dialog.Portal>

package/src/widgets/search/search.tsx

@@ -153,6 +153,7 @@ export function Search({
               role="button"
               intent="noeffect"
               variant="text"
+              style={{ outline: 'none' }}
               ripple={false}
               arial-label={ariaLabelForSearch}
               size="xs"
@@ -169,6 +170,7 @@ export function Search({
             <IconButton
               role="button"
               intent="noeffect"
+              style={{ outline: 'none' }}
               variant="text"
               arial-label={ariaLabelForClear}
               size="xs"

package/src/widgets/timeline/timeline.module.css

@@ -11,12 +11,12 @@
 
 @layer byline-components {
   .timeline,
-  :global(.infonomic-timeline) {
+  :global(.byline-timeline) {
     margin-left: var(--spacing-8);
   }
 
   .timeline-root,
-  :global(.infonomic-timeline-root) {
+  :global(.byline-timeline-root) {
     position: relative;
     list-style: none;
     margin-left: var(--spacing-8);
@@ -27,13 +27,13 @@
   }
 
   .timeline-item,
-  :global(.infonomic-timeline-item) {
+  :global(.byline-timeline-item) {
     margin: 0 0 var(--spacing-16) var(--spacing-20);
   }
 
   /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
   .timeline-icon,
-  :global(.infonomic-timeline-icon) {
+  :global(.byline-timeline-icon) {
     position: absolute;
     display: flex;
     align-items: center;
@@ -50,7 +50,7 @@
   }
 
   .timeline-icon svg,
-  :global(.infonomic-timeline-icon svg) {
+  :global(.byline-timeline-icon svg) {
     display: block;
     width: 60%;
     color: white;
@@ -58,7 +58,7 @@
 
   /* 'text-[1.5rem] sm:text-[1.57rem] leading-[1.2] !m-0 font-semibold' */
   .timeline-heading,
-  :global(.infonomic-timeline-heading) {
+  :global(.byline-timeline-heading) {
     font-size: 1.5rem;
     line-height: 1.2;
     margin: 0;
@@ -67,7 +67,7 @@
 
   /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
   .timeline-date,
-  :global(.infonomic-timeline-date) {
+  :global(.byline-timeline-date) {
     display: block;
     margin-top: var(--spacing-8);
     margin-bottom: var(--spacing-8);
@@ -79,7 +79,7 @@
 
   /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
   .timeline-content,
-  :global(.infonomic-timeline-content) {
+  :global(.byline-timeline-content) {
     margin: 0;
     margin-bottom: var(--spacing-16);
     font-size: 1.125rem;
@@ -91,14 +91,14 @@
     }
   }
 
-  /* 🌙 Dark via `.dark` class. We rely on the 
+  /* 🌙 Dark via `.dark` class. We rely on the
   * consuming application to detect a user's preferred
   * color scheme - either by header or cookie, and set
   * a root html class accordingly
   */
   :global(.dark),
   :global([data-theme="dark"]) {
-    :global(.infonomic-timeline-icon),
+    :global(.byline-timeline-icon),
     .timeline-icon {
       border-color: var(--canvas-600);
     }