@byline/ui 1.10.2 → 1.11.0

package/dist/widgets/search/search.js

@@ -73,6 +73,9 @@ function Search({ variant, inputSize, inputClassName, intent, className, onClear
                     role: "button",
                     intent: "noeffect",
                     variant: "text",
+                    style: {
+                        outline: 'none'
+                    },
                     ripple: false,
                     "arial-label": ariaLabelForSearch,
                     size: "xs",
@@ -90,6 +93,9 @@ function Search({ variant, inputSize, inputClassName, intent, className, onClear
                 children: /*#__PURE__*/ jsx(IconButton, {
                     role: "button",
                     intent: "noeffect",
+                    style: {
+                        outline: 'none'
+                    },
                     variant: "text",
                     "arial-label": ariaLabelForClear,
                     size: "xs",

package/dist/widgets/timeline/timeline_module.css

@@ -1,11 +1,11 @@
 @layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
-  :is(.timeline-qJOU85, .infonomic-timeline) {
+  :is(.timeline-qJOU85, .byline-timeline) {
     margin-left: var(--spacing-8);
   }
 
-  :is(.timeline-root-kIek3q, .infonomic-timeline-root) {
+  :is(.timeline-root-kIek3q, .byline-timeline-root) {
     margin-left: var(--spacing-8);
     padding-left: var(--spacing-8);
     border-left-width: var(--border-width-thin);
@@ -15,11 +15,11 @@
     position: relative;
   }
 
-  :is(.timeline-item-VoOzOk, .infonomic-timeline-item) {
+  :is(.timeline-item-VoOzOk, .byline-timeline-item) {
     margin: 0 0 var(--spacing-16) var(--spacing-20);
   }
 
-  :is(.timeline-icon-xO1p1F, .infonomic-timeline-icon) {
+  :is(.timeline-icon-xO1p1F, .byline-timeline-icon) {
     color: #fff;
     background-color: var(--primary-600);
     border-width: 6px;
@@ -41,20 +41,20 @@
     display: block;
   }
 
-  .infonomic-timeline-icon svg {
+  .byline-timeline-icon svg {
     color: #fff;
     width: 60%;
     display: block;
   }
 
-  :is(.timeline-heading-bPWlJ4, .infonomic-timeline-heading) {
+  :is(.timeline-heading-bPWlJ4, .byline-timeline-heading) {
     font-size: 1.5rem;
     line-height: 1.2;
     font-weight: var(--font-weight-semibold);
     margin: 0;
   }
 
-  :is(.timeline-date-U7Pr_G, .infonomic-timeline-date) {
+  :is(.timeline-date-U7Pr_G, .byline-timeline-date) {
     margin-top: var(--spacing-8);
     margin-bottom: var(--spacing-8);
     font-size: .9em;
@@ -64,19 +64,19 @@
     display: block;
   }
 
-  :is(.timeline-content-rwFfPc, .infonomic-timeline-content) {
+  :is(.timeline-content-rwFfPc, .byline-timeline-content) {
     margin: 0;
     margin-bottom: var(--spacing-16);
     font-size: 1.125rem;
     font-weight: var(--font-weight-normal);
   }
 
-  :is(.timeline-content-rwFfPc, .infonomic-timeline-content) p {
+  :is(.timeline-content-rwFfPc, .byline-timeline-content) p {
     margin: 0;
     margin-bottom: var(--spacing-16);
   }
 
-  :is(:is(.dark, [data-theme="dark"]) .infonomic-timeline-icon, :is(.dark, [data-theme="dark"]) .timeline-icon-xO1p1F) {
+  :is(:is(.dark, [data-theme="dark"]) .byline-timeline-icon, :is(.dark, [data-theme="dark"]) .timeline-icon-xO1p1F) {
     border-color: var(--canvas-600);
   }
 }

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.10.2",
+  "version": "1.11.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -65,9 +65,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.3",
     "zod-form-data": "^3.0.1",
-    "@byline/admin": "1.10.2",
-    "@byline/client": "1.10.2",
-    "@byline/core": "1.10.2"
+    "@byline/client": "1.11.0",
+    "@byline/admin": "1.11.0",
+    "@byline/core": "1.11.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/accordion/accordion.module.css

@@ -10,19 +10,19 @@
   byline-utilities;
 @layer byline-components {
   .item,
-  :global(.infonomic-accordion-item) {
+  :global(.byline-accordion-item) {
     overflow: hidden;
     margin-top: 1px;
   }
 
   .header,
-  :global(.infonomic-accordion-header) {
+  :global(.byline-accordion-header) {
     margin: 0;
     display: flex;
   }
 
   .trigger,
-  :global(.infonomic-accordion-trigger) {
+  :global(.byline-accordion-trigger) {
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -30,7 +30,7 @@
   }
 
   .content,
-  :global(.infonomic-accordion-content) {
+  :global(.byline-accordion-content) {
     overflow: hidden;
 
     &[data-open] {

package/src/components/accordion/accordion.tsx

@@ -28,7 +28,7 @@ const Root = ({
   return (
     <AccordionPrimitive.Root
       ref={ref}
-      className={cx('infonomic-accordion-root', className)}
+      className={cx('byline-accordion-root', className)}
       {...props}
     >
       {children}
@@ -47,7 +47,7 @@ const Item = function AccordionItem({
 }) {
   return (
     <AccordionPrimitive.Item
-      className={cx('infonomic-accordion-item', className)}
+      className={cx('byline-accordion-item', className)}
       {...props}
       ref={ref}
     >
@@ -67,7 +67,7 @@ const Header = function AccordionHeader({
 }) {
   return (
     <AccordionPrimitive.Header
-      className={cx('infonomic-accordion-header', className)}
+      className={cx('byline-accordion-header', className)}
       {...props}
       ref={ref}
     >
@@ -88,7 +88,7 @@ const Trigger = function AccordionTrigger({
   return (
     <AccordionPrimitive.Trigger
       ref={ref}
-      className={cx('infonomic-accordion-trigger', styles.trigger, className)}
+      className={cx('byline-accordion-trigger', styles.trigger, className)}
       {...props}
     >
       {children}
@@ -107,7 +107,7 @@ const Panel = function AccordionPanel({
 }) {
   return (
     <AccordionPrimitive.Panel
-      className={cx('infonomic-accordion-content', styles.content, className)}
+      className={cx('byline-accordion-content', styles.content, className)}
       {...props}
       ref={ref}
     >

package/src/components/avatar/avatar.module.css

@@ -12,7 +12,7 @@
 @layer byline-components {
   /* relative inline-flex h-10 w-10 rounded-full */
   .avatar-root,
-  :global(.infonomic-avatar-root) {
+  :global(.byline-avatar-root) {
     position: relative;
     display: inline-flex;
     height: 100%;
@@ -21,7 +21,7 @@
   }
 
   .avatar-image,
-  :global(.infonomic-avatar-image) {
+  :global(.byline-avatar-image) {
     height: 100%;
     width: 100%;
     border-radius: 50%;
@@ -29,7 +29,7 @@
   }
 
   .avatar-fallback,
-  :global(.infonomic-avatar-fallback) {
+  :global(.byline-avatar-fallback) {
     display: flex;
     height: 100%;
     width: 100%;
@@ -40,7 +40,7 @@
   }
 
   .avatar-text,
-  :global(.infonomic-avatar-text) {
+  :global(.byline-avatar-text) {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     text-transform: uppercase;

package/src/components/avatar/avatar.tsx

@@ -11,17 +11,17 @@ const url = 'https://picsum.photos/150'
 
 export const Avatar = ({ initials }: { initials: string }): React.JSX.Element => {
   return (
-    <AvatarPrimitive.Root className={cx('infonomic-avatar-root', styles['avatar-root'])}>
+    <AvatarPrimitive.Root className={cx('byline-avatar-root', styles['avatar-root'])}>
       <AvatarPrimitive.Image
         src={url}
         alt="Avatar"
-        className={cx('infonomic-avatar-image', styles['avatar-image'])}
+        className={cx('byline-avatar-image', styles['avatar-image'])}
       />
       <AvatarPrimitive.Fallback
-        className={cx('infonomic-avatar-fallback', styles['avatar-fallback'])}
+        className={cx('byline-avatar-fallback', styles['avatar-fallback'])}
         delay={600}
       >
-        <span className={cx('infonomic-avatar-text', styles['avatar-text'])}>{initials}</span>
+        <span className={cx('byline-avatar-text', styles['avatar-text'])}>{initials}</span>
       </AvatarPrimitive.Fallback>
     </AvatarPrimitive.Root>
   )

package/src/components/badge/badge.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .badge,
-  :global(.infonomic-badge) {
+  :global(.byline-badge) {
     display: inline-block;
     padding: 0.25em 0.4em;
     font-size: var(--font-size-sm);
@@ -24,43 +24,43 @@
   }
 
   .primary,
-  :global(.infonomic-badge-primary) {
+  :global(.byline-badge-primary) {
     color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong);
   }
 
   .secondary,
-  :global(.infonomic-badge-secondary) {
+  :global(.byline-badge-secondary) {
     color: var(--text-on-secondary-strong);
     background-color: var(--fill-secondary-strong);
   }
 
   .noeffect,
-  :global(.infonomic-badge-noeffect) {
+  :global(.byline-badge-noeffect) {
     color: var(--text-on-noeffect-strong);
     background-color: var(--fill-noeffect-strong);
   }
 
   .success,
-  :global(.infonomic-badge-success) {
+  :global(.byline-badge-success) {
     color: var(--text-on-success-strong);
     background-color: var(--fill-success-strong);
   }
 
   .info,
-  :global(.infonomic-badge-info) {
+  :global(.byline-badge-info) {
     color: var(--text-on-info-strong);
     background-color: var(--fill-info-strong);
   }
 
   .warning,
-  :global(.infonomic-badge-warning) {
+  :global(.byline-badge-warning) {
     color: var(--text-on-warning-strong);
     background-color: var(--fill-warning-strong);
   }
 
   .danger,
-  :global(.infonomic-badge-danger) {
+  :global(.byline-badge-danger) {
     color: var(--text-on-danger-strong);
     background-color: var(--fill-danger-strong);
   }

package/src/components/badge/badge.tsx

@@ -26,8 +26,8 @@ export const Badge = ({
     props: {
       ...rest,
       className: cx(
-        'infonomic-badge',
-        `infonomic-badge-${intent}`,
+        'byline-badge',
+        `byline-badge-${intent}`,
         styles.badge,
         styles[intent],
         className

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

@@ -10,7 +10,7 @@
   byline-utilities;
 @layer byline-components {
   .button-group,
-  :global(.infonomic-button-group) {
+  :global(.byline-button-group) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -20,7 +20,7 @@
 
   @media screen and (min-width: 40rem) {
     .button-group,
-    :global(.infonomic-button-group) {
+    :global(.byline-button-group) {
       flex-direction: row;
     }
   }

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

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .button,
-  :global(.infonomic-button) {
+  :global(.byline-button) {
     border: none;
     cursor: pointer;
     font-weight: normal;
@@ -32,27 +32,27 @@
 
   .button:disabled,
   .button[disabled],
-  :global(.infonomic-button):disabled,
-  :global(.infonomic-button)[disabled] {
+  :global(.byline-button):disabled,
+  :global(.byline-button)[disabled] {
     pointer-events: none;
   }
 
   .button:focus,
   .button:active,
-  :global(.infonomic-button):focus,
-  :global(.infonomic-button):active {
+  :global(.byline-button):focus,
+  :global(.byline-button):active {
     outline-color: var(--ring-color);
   }
 
   .button.square,
-  :global(.infonomic-button-square) {
+  :global(.byline-button-square) {
     aspect-ratio: 1 / 1;
     padding: 0;
     border-radius: var(--border-radius-sm);
   }
 
   .button.round,
-  :global(.infonomic-button-round) {
+  :global(.byline-button-round) {
     aspect-ratio: 1 / 1;
     padding: 0;
     border-radius: var(--border-radius-full);
@@ -60,35 +60,35 @@
 
   /* Sizes */
   .xs,
-  :global(.infonomic-button-xs) {
+  :global(.byline-button-xs) {
     min-height: 26px;
     font-size: 0.7rem;
     padding: 0.2rem 0.4rem;
   }
 
   .sm,
-  :global(.infonomic-button-sm) {
+  :global(.byline-button-sm) {
     min-height: 32px;
     font-size: 0.775rem;
     padding: 0.25rem 0.5rem;
   }
 
   .md,
-  :global(.infonomic-button-md) {
+  :global(.byline-button-md) {
     min-height: 38px;
     font-size: 0.95rem;
     padding: 0.625rem 1.25rem;
   }
 
   .lg,
-  :global(.infonomic-button-lg) {
+  :global(.byline-button-lg) {
     min-height: 46px;
     font-size: 1.1rem;
     padding: 0.75rem 1.5rem;
   }
 
   .xl,
-  :global(.infonomic-button-xl) {
+  :global(.byline-button-xl) {
     min-height: 54px;
     font-size: 1.2rem;
     padding: 0.75rem 1.5rem;
@@ -96,27 +96,27 @@
 
   /* Variants - Consuming Variables */
   .filled,
-  :global(.infonomic-button-filled) {
+  :global(.byline-button-filled) {
     color: var(--button-variant-filled-foreground);
     background-color: var(--button-variant-filled);
   }
 
   .filled:hover,
-  :global(.infonomic-button-filled):hover {
+  :global(.byline-button-filled):hover {
     background-color: var(--button-variant-filled-hover);
   }
 
   .filled:focus,
   .filled:active,
-  :global(.infonomic-button-filled):focus,
-  :global(.infonomic-button-filled):active {
+  :global(.byline-button-filled):focus,
+  :global(.byline-button-filled):active {
     --ring-color: var(--button-ring-color);
   }
 
   .filled:disabled,
   .filled[disabled],
-  :global(.infonomic-button-filled):disabled,
-  :global(.infonomic-button-filled)[disabled] {
+  :global(.byline-button-filled):disabled,
+  :global(.byline-button-filled)[disabled] {
     background-color: var(
       --button-variant-filled-disabled,
       oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
@@ -131,27 +131,27 @@
   /* Weak variant for close button on selected button */
 
   .filled-weak,
-  :global(.infonomic-button-filled-weak) {
+  :global(.byline-button-filled-weak) {
     color: var(--button-variant-filled-weak-foreground);
     background-color: var(--button-variant-filled-weak);
   }
 
   .filled-weak:hover,
-  :global(.infonomic-button-filled-weak):hover {
+  :global(.byline-button-filled-weak):hover {
     background-color: var(--button-variant-filled-weak-hover);
   }
 
   .filled-weak:focus,
   .filled-weak:active,
-  :global(.infonomic-button-filled-weak):focus,
-  :global(.infonomic-button-filled-weak):active {
+  :global(.byline-button-filled-weak):focus,
+  :global(.byline-button-filled-weak):active {
     --ring-color: var(--button-ring-color);
   }
 
   .filled-weak:disabled,
   .filled-weak[disabled],
-  :global(.infonomic-button-filled-weak):disabled,
-  :global(.infonomic-button-filled-weak)[disabled] {
+  :global(.byline-button-filled-weak):disabled,
+  :global(.byline-button-filled-weak)[disabled] {
     background-color: var(
       --button-variant-filled-weak-disabled,
       oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
@@ -163,7 +163,7 @@
   }
 
   .outlined,
-  :global(.infonomic-button-outlined) {
+  :global(.byline-button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
     color: var(--button-variant-outlined-foreground);
     background-color: var(--button-variant-outlined);
@@ -171,8 +171,8 @@
 
   .outlined:disabled,
   .outlined[disabled],
-  :global(.infonomic-button-outlined):disabled,
-  :global(.infonomic-button-outlined)[disabled] {
+  :global(.byline-button-outlined):disabled,
+  :global(.byline-button-outlined)[disabled] {
     border-color: var(
       --button-variant-outlined-border-disabled,
       oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
@@ -184,19 +184,19 @@
   }
 
   .outlined:hover,
-  :global(.infonomic-button-outlined):hover {
+  :global(.byline-button-outlined):hover {
     background-color: var(--button-variant-outlined-hover);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.infonomic-button-outlined):focus,
-  :global(.infonomic-button-outlined):active {
+  :global(.byline-button-outlined):focus,
+  :global(.byline-button-outlined):active {
     --ring-color: var(--button-ring-color);
   }
 
   .gradient,
-  :global(.infonomic-button-gradient) {
+  :global(.byline-button-gradient) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(
       45deg,
@@ -207,8 +207,8 @@
 
   .gradient:disabled,
   .gradient[disabled],
-  :global(.infonomic-button-gradient):disabled,
-  :global(.infonomic-button-gradient)[disabled] {
+  :global(.byline-button-gradient):disabled,
+  :global(.byline-button-gradient)[disabled] {
     background: unset;
     background-color: var(
       --button-variant-gradient-disabled,
@@ -221,7 +221,7 @@
   }
 
   .gradient:hover,
-  :global(.infonomic-button-gradient):hover {
+  :global(.byline-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(
       45deg,
@@ -232,39 +232,39 @@
 
   .gradient:focus,
   .gradient:active,
-  :global(.infonomic-button-gradient):focus,
-  :global(.infonomic-button-gradient):active {
+  :global(.byline-button-gradient):focus,
+  :global(.byline-button-gradient):active {
     --ring-color: var(--button-ring-color);
   }
 
   .text,
-  :global(.infonomic-button-text) {
+  :global(.byline-button-text) {
     background-color: var(--button-variant-text);
     color: var(--button-variant-text-foreground);
   }
 
   .text:disabled,
   .text[disabled],
-  :global(.infonomic-button-text):disabled,
-  :global(.infonomic-button-text)[disabled] {
+  :global(.byline-button-text):disabled,
+  :global(.byline-button-text)[disabled] {
     color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
   }
 
   .text:hover,
-  :global(.infonomic-button-text):hover {
+  :global(.byline-button-text):hover {
     background-color: var(--button-variant-text-hover);
   }
 
   .text:focus,
   .text:active,
-  :global(.infonomic-button-text):focus,
-  :global(.infonomic-button-text):active {
+  :global(.byline-button-text):focus,
+  :global(.byline-button-text):active {
     --ring-color: var(--button-ring-color);
   }
 
   /* Intents - Defining Variables */
   .primary,
-  :global(.infonomic-button-primary) {
+  :global(.byline-button-primary) {
     --button-ring-color: var(--ring-primary);
 
     /* Filled */
@@ -303,7 +303,7 @@
   }
 
   .secondary,
-  :global(.infonomic-button-secondary) {
+  :global(.byline-button-secondary) {
     --button-ring-color: var(--ring-secondary);
 
     /* Filled */
@@ -342,7 +342,7 @@
   }
 
   .noeffect,
-  :global(.infonomic-button-noeffect) {
+  :global(.byline-button-noeffect) {
     --button-ring-color: var(--ring-noeffect);
 
     /* Filled */
@@ -382,7 +382,7 @@
   }
 
   .success,
-  :global(.infonomic-button-success) {
+  :global(.byline-button-success) {
     --button-ring-color: var(--ring-success);
 
     /* Filled */
@@ -421,7 +421,7 @@
   }
 
   .info,
-  :global(.infonomic-button-info) {
+  :global(.byline-button-info) {
     --button-ring-color: var(--ring-info);
 
     /* Filled */
@@ -460,7 +460,7 @@
   }
 
   .warning,
-  :global(.infonomic-button-warning) {
+  :global(.byline-button-warning) {
     --button-ring-color: var(--ring-warning);
 
     /* Filled */
@@ -499,7 +499,7 @@
   }
 
   .danger,
-  :global(.infonomic-button-danger) {
+  :global(.byline-button-danger) {
     --button-ring-color: var(--ring-danger);
 
     /* Filled */
@@ -539,7 +539,7 @@
 
   /* Full width */
   .fullWidth,
-  :global(.infonomic-button-full-width) {
+  :global(.byline-button-full-width) {
     width: 100%;
     display: flex;
   }

package/src/components/button/button.tsx

@@ -38,10 +38,10 @@ export const Button = ({
   const defaultProps: Record<string, unknown> = {
     type,
     className: cx(
-      'infonomic-button',
-      `infonomic-button-${intent}`,
-      `infonomic-button-${variant}`,
-      `infonomic-button-${size}`,
+      'byline-button',
+      `byline-button-${intent}`,
+      `byline-button-${variant}`,
+      `byline-button-${size}`,
       styles.button,
       styles[variant],
       styles[size],