@byline/ui 1.10.2 → 1.10.3

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

@@ -10,7 +10,7 @@
   byline-utilities;
 @layer byline-components {
   .combo-button-wrapper,
-  :global(.infonomic-combo-button-wrapper) {
+  :global(.byline-combo-button-wrapper) {
     display: flex;
     align-items: center;
     gap: 0.075rem;
@@ -22,13 +22,13 @@
 
   .combo-button-wrapper:focus-within,
   .combo-button-wrapper:has([data-popup-open]),
-  :global(.infonomic-combo-button-wrapper):focus-within,
-  :global(.infonomic-combo-button-wrapper):has([data-popup-open]) {
+  :global(.byline-combo-button-wrapper):focus-within,
+  :global(.byline-combo-button-wrapper):has([data-popup-open]) {
     outline-color: var(--ring-color);
   }
 
   .combo-button-button,
-  :global(.infonomic-combo-button-button) {
+  :global(.byline-combo-button-button) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
@@ -39,7 +39,7 @@
   }
 
   .combo-button-trigger,
-  :global(.infonomic-combo-button-trigger) {
+  :global(.byline-combo-button-trigger) {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
@@ -50,11 +50,11 @@
   }
 
   .combo-button-options,
-  :global(.infonomic-combo-button-options) {
+  :global(.byline-combo-button-options) {
     min-width: 120px;
   }
 
   .combo-button-options-item,
-  :global(.infonomic-combo-button-options-item) {
+  :global(.byline-combo-button-options-item) {
   }
 }

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

@@ -12,9 +12,9 @@
   .stop-button,
   .play-button,
   .directional-button,
-  :global(.infonomic-stop-button),
-  :global(.infonomic-play-button),
-  :global(.infonomic-directional-button) {
+  :global(.byline-stop-button),
+  :global(.byline-play-button),
+  :global(.byline-directional-button) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -136,7 +136,7 @@
     transform: translateX(5px);
   }
 
-  /* No dark theme overrides needed! 
-   * Tokens automatically switch in .dark and respect .not-dark 
+  /* No dark theme overrides needed!
+   * Tokens automatically switch in .dark and respect .not-dark
   */
 }

package/src/components/button/control-buttons.tsx

@@ -42,7 +42,7 @@ export const DirectionalButton = ({
       type="button"
       aria-label={direction}
       className={cx(
-        'infonomic-control-button',
+        'byline-control-button',
         direction,
         size,
         styles['directional-button'],

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

@@ -11,12 +11,12 @@
 
 @layer byline-components {
   .copy-button-container,
-  :global(.infonomic-copy-button-container) {
+  :global(.byline-copy-button-container) {
     display: inline-block;
   }
 
   .copy-button svg,
-  :global(.infonomic-copy-button) svg {
+  :global(.byline-copy-button) svg {
     width: 90%;
     height: 90%;
     display: block;
@@ -24,7 +24,7 @@
 
   /* Sizes */
   .xs,
-  :global(.infonomic-copy-button-xs) {
+  :global(.byline-copy-button-xs) {
     width: 26px;
     height: 26px;
     min-height: 26px;
@@ -32,7 +32,7 @@
   }
 
   .sm,
-  :global(.infonomic-copy-button-sm) {
+  :global(.byline-copy-button-sm) {
     width: 32px;
     height: 32px;
     min-height: 32px;
@@ -40,7 +40,7 @@
   }
 
   .md,
-  :global(.infonomic-copy-button-md) {
+  :global(.byline-copy-button-md) {
     width: 38px;
     height: 38px;
     min-height: 38px;
@@ -48,7 +48,7 @@
   }
 
   .lg,
-  :global(.infonomic-copy-button-lg) {
+  :global(.byline-copy-button-lg) {
     width: 46px;
     height: 46px;
     min-height: 46px;
@@ -56,7 +56,7 @@
   }
 
   .xl,
-  :global(.infonomic-copy-button-xl) {
+  :global(.byline-copy-button-xl) {
     width: 54px;
     height: 54px;
     min-height: 54px;

package/src/components/button/copy-button.tsx

@@ -67,7 +67,7 @@ export function CopyButton({
   return (
     <div
       className={cx(
-        'infonomic-copy-button-container',
+        'byline-copy-button-container',
         styles['copy-button-container'],
         containerClassName
       )}
@@ -91,10 +91,10 @@ export function CopyButton({
           fullWidth={fullWidth}
           ripple={ripple}
           className={cx(
-            'infonomic-copy-button',
-            `infonomic-copy-button-${variant}`,
-            `infonomic-copy-button-${size}`,
-            `infonomic-copy-button-${intent}`,
+            'byline-copy-button',
+            `byline-copy-button-${variant}`,
+            `byline-copy-button-${size}`,
+            `byline-copy-button-${intent}`,
             styles[size],
             className
           )}

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

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .card,
-  :global(.infonomic-card) {
+  :global(.byline-card) {
     display: flex;
     flex-direction: column;
     text-decoration: none;
@@ -27,25 +27,25 @@
   }
 
   .card-hover,
-  :global(.infonomic-card-hover) {
+  :global(.byline-card-hover) {
     transition: background 0.2s ease-in-out;
   }
 
   .card-hover:hover,
-  :global(.infonomic-card-hover):hover {
+  :global(.byline-card-hover):hover {
     background: oklch(from var(--theme-50) 1 0.03 h);
   }
 
   :global(.dark),
   :global([data-theme="dark"]) {
     .card-hover:hover,
-    :global(.infonomic-card-hover):hover {
+    :global(.byline-card-hover):hover {
       background: oklch(from var(--canvas-800) 0.2 c h);
     }
   }
 
   .card-header,
-  :global(.infonomic-card-header) {
+  :global(.byline-card-header) {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -53,7 +53,7 @@
   }
 
   .card-title,
-  :global(.infonomic-card-title) {
+  :global(.byline-card-title) {
     color: var(--headings);
     font-size: 1.8rem;
     font-weight: bold;
@@ -62,20 +62,20 @@
   }
 
   .card-description,
-  :global(.infonomic-card-description) {
+  :global(.byline-card-description) {
     font-size: 0.875rem;
     color: var(--muted);
   }
 
   .card-content,
-  :global(.infonomic-card-content) {
+  :global(.byline-card-content) {
     flex: 1;
     padding: 1rem;
     padding-top: 0;
   }
 
   .card-footer,
-  :global(.infonomic-card-footer) {
+  :global(.byline-card-footer) {
     display: flex;
     align-items: center;
     padding: 1rem;

package/src/components/card/card.tsx

@@ -14,7 +14,7 @@ export type CardProps = useRender.ComponentProps<'div'> & {
 
 const Card = ({ className, hover, children, render, ref, ...rest }: CardProps) => {
   const hoverClasses = hover != null && hover === true ? styles['card-hover'] : undefined
-  const classes = cx('infonomic-card', styles.card, hoverClasses, className)
+  const classes = cx('byline-card', styles.card, hoverClasses, className)
 
   const element = useRender({
     defaultTagName: 'div',
@@ -39,7 +39,7 @@ interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
 const Header = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-header', styles['card-header'], className)}
+    className={cx('byline-card-header', styles['card-header'], className)}
     {...props}
   />
 )
@@ -49,7 +49,7 @@ Header.displayName = 'CardHeader'
 const Title = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref as React.Ref<HTMLDivElement>}
-    className={cx('infonomic-card-title', styles['card-title'], className)}
+    className={cx('byline-card-title', styles['card-title'], className)}
     {...props}
   />
 )
@@ -58,7 +58,7 @@ Title.displayName = 'CardTitle'
 const Description = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-description', styles['card-description'], className)}
+    className={cx('byline-card-description', styles['card-description'], className)}
     {...props}
   />
 )
@@ -67,7 +67,7 @@ Description.displayName = 'CardDescription'
 const Content = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-content', styles['card-content'], className)}
+    className={cx('byline-card-content', styles['card-content'], className)}
     {...props}
   />
 )
@@ -76,7 +76,7 @@ Content.displayName = 'CardContent'
 const Footer = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref}
-    className={cx('infonomic-card-footer', styles['card-footer'], className)}
+    className={cx('byline-card-footer', styles['card-footer'], className)}
     {...props}
   />
 )