@byline/ui 1.10.2 → 1.11.0

package/src/components/inputs/checkbox.module.css

@@ -11,13 +11,13 @@
 
 @layer byline-components {
   .container,
-  :global(.infonomic-checkbox-container) {
+  :global(.byline-checkbox-container) {
     width: 100%;
     padding: 0;
   }
 
   .component,
-  :global(.infonomic-checkbox-component) {
+  :global(.byline-checkbox-component) {
     display: flex;
     width: 100%;
     padding: 0;
@@ -26,12 +26,12 @@
   }
 
   .reverse,
-  :global(.infonomic-checkbox-reverse) {
+  :global(.byline-checkbox-reverse) {
     flex-direction: row-reverse;
   }
 
   .checkbox,
-  :global(.infonomic-checkbox) {
+  :global(.byline-checkbox) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -42,24 +42,24 @@
   }
 
   .checkbox[data-checked],
-  :global(.infonomic-checkbox)[data-checked] {
+  :global(.byline-checkbox)[data-checked] {
     outline-color: var(--ring-color);
   }
 
   .checkbox[data-disabled],
-  :global(.infonomic-checkbox)[data-disabled] {
+  :global(.byline-checkbox)[data-disabled] {
     pointer-events: none;
   }
 
   .indicator,
-  :global(.infonomic-checkbox-indicator) {
+  :global(.byline-checkbox-indicator) {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .icon,
-  :global(.infonomic-checkbox-icon) {
+  :global(.byline-checkbox-icon) {
     width: 20px;
     height: 20px;
     color: var(--checkbox-icon-color);
@@ -75,7 +75,7 @@
 
   /* Style for the "checked" state — animation overrides the transition for bouncy entry */
   .indicator[data-checked] .icon,
-  :global(.infonomic-checkbox-indicator)[data-checked] :global(.infonomic-checkbox-icon) {
+  :global(.byline-checkbox-indicator)[data-checked] :global(.byline-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
@@ -83,13 +83,13 @@
 
   /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
   .indicator[data-unchecked] .icon,
-  :global(.infonomic-checkbox-indicator)[data-unchecked] :global(.infonomic-checkbox-icon) {
+  :global(.byline-checkbox-indicator)[data-unchecked] :global(.byline-checkbox-icon) {
     opacity: 0;
     transform: scale(0.8);
   }
 
   .label,
-  :global(.infonomic-checkbox-label) {
+  :global(.byline-checkbox-label) {
     margin-left: 0.25rem;
     cursor: pointer;
     font-weight: 500;
@@ -97,12 +97,12 @@
   }
 
   .checkbox[data-disabled] ~ .label,
-  :global(.infonomic-checkbox)[data-disabled] ~ :global(.infonomic-checkbox-label) {
+  :global(.byline-checkbox)[data-disabled] ~ :global(.byline-checkbox-label) {
     pointer-events: none;
   }
 
   .errorText,
-  :global(.infonomic-dropdown-error-text) {
+  :global(.byline-dropdown-error-text) {
     margin-top: 0.25rem;
     font-size: 0.875rem;
     color: red;
@@ -110,83 +110,83 @@
 
   /* Sizes */
   .sm,
-  :global(.infonomic-checkbox-sm) {
+  :global(.byline-checkbox-sm) {
     width: 16px;
     height: 16px;
   }
 
   .sm .icon,
-  :global(.infonomic-checkbox-sm) :global(.infonomic-checkbox-icon) {
+  :global(.byline-checkbox-sm) :global(.byline-checkbox-icon) {
     width: 16px;
     height: 16px;
   }
 
   .sm ~ .label,
-  :global(.infonomic-checkbox-sm) ~ :global(.infonomic-checkbox-label) {
+  :global(.byline-checkbox-sm) ~ :global(.byline-checkbox-label) {
     font-size: 0.85rem;
   }
 
   .md,
-  :global(.infonomic-checkbox-md) {
+  :global(.byline-checkbox-md) {
     width: 18px;
     height: 18px;
   }
 
   .md .icon,
-  :global(.infonomic-checkbox-md) :global(.infonomic-checkbox-icon) {
+  :global(.byline-checkbox-md) :global(.byline-checkbox-icon) {
     width: 18px;
     height: 18px;
   }
 
   .md ~ .label,
-  :global(.infonomic-checkbox-md) ~ :global(.infonomic-checkbox-label) {
+  :global(.byline-checkbox-md) ~ :global(.byline-checkbox-label) {
     font-size: 0.875rem;
   }
 
   .lg,
-  :global(.infonomic-checkbox-lg) {
+  :global(.byline-checkbox-lg) {
     width: 20px;
     height: 20px;
   }
 
   .lg .icon,
-  :global(.infonomic-checkbox-lg) :global(.infonomic-checkbox-icon) {
+  :global(.byline-checkbox-lg) :global(.byline-checkbox-icon) {
     width: 22px;
     height: 22px;
   }
 
   .lg ~ .label,
-  :global(.infonomic-checkbox-lg) ~ :global(.infonomic-checkbox-label) {
+  :global(.byline-checkbox-lg) ~ :global(.byline-checkbox-label) {
     font-size: 1rem;
   }
 
   /* Variants */
   .outlined,
-  :global(.infonomic-checkbox-outlined) {
+  :global(.byline-checkbox-outlined) {
     border: 2px solid var(--checkbox-variant-outlined-border);
     --checkbox-icon-color: white;
   }
 
   .outlined[data-checked],
-  :global(.infonomic-checkbox-outlined)[data-checked] {
+  :global(.byline-checkbox-outlined)[data-checked] {
     --ring-color: var(--checkbox-variant-outline-ring-color);
     background-color: var(--checkbox-variant-outlined);
   }
 
   .filled,
-  :global(.infonomic-checkbox-filled) {
+  :global(.byline-checkbox-filled) {
     background-color: var(--checkbox-variant-filled);
     --checkbox-icon-color: white;
   }
 
   .filled[data-checked],
-  :global(.infonomic-checkbox-filled)[data-checked] {
+  :global(.byline-checkbox-filled)[data-checked] {
     --ring-color: var(--checkbox-variant-outline-ring-color);
   }
 
   /* Intents */
   .primary,
-  :global(.infonomic-checkbox-primary) {
+  :global(.byline-checkbox-primary) {
     --checkbox-variant-outlined-border: var(--fill-primary-strong);
     --checkbox-variant-outlined: var(--fill-primary-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
@@ -196,7 +196,7 @@
   }
 
   .secondary,
-  :global(.infonomic-checkbox-secondary) {
+  :global(.byline-checkbox-secondary) {
     --checkbox-variant-outlined-border: var(--fill-secondary-strong);
     --checkbox-variant-outlined: var(--fill-secondary-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
@@ -206,7 +206,7 @@
   }
 
   .noeffect,
-  :global(.infonomic-checkbox-noeffect) {
+  :global(.byline-checkbox-noeffect) {
     --checkbox-variant-outlined-border: var(--fill-noeffect-strong);
     --checkbox-variant-outlined: var(--fill-noeffect-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
@@ -216,7 +216,7 @@
   }
 
   .success,
-  :global(.infonomic-checkbox-success) {
+  :global(.byline-checkbox-success) {
     --checkbox-variant-outlined-border: var(--fill-success-strong);
     --checkbox-variant-outlined: var(--fill-success-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
@@ -226,7 +226,7 @@
   }
 
   .info,
-  :global(.infonomic-checkbox-info) {
+  :global(.byline-checkbox-info) {
     --checkbox-variant-outlined-border: var(--fill-info-strong);
     --checkbox-variant-outlined: var(--fill-info-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
@@ -236,7 +236,7 @@
   }
 
   .warning,
-  :global(.infonomic-checkbox-warning) {
+  :global(.byline-checkbox-warning) {
     --checkbox-variant-outlined-border: var(--fill-warning-strong);
     --checkbox-variant-outlined: var(--fill-warning-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
@@ -246,7 +246,7 @@
   }
 
   .danger,
-  :global(.infonomic-checkbox-danger) {
+  :global(.byline-checkbox-danger) {
     --checkbox-variant-outlined-border: var(--fill-danger-strong);
     --checkbox-variant-outlined: var(--fill-danger-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);

package/src/components/inputs/checkbox.tsx

@@ -56,9 +56,9 @@ export const Checkbox = function Checkbox({
   ref?: React.RefObject<HTMLButtonElement>
 }): React.JSX.Element {
   return (
-    <div className={cx('infonomic-checkbox-container', styles.container, containerClasses)}>
+    <div className={cx('byline-checkbox-container', styles.container, containerClasses)}>
       <div
-        className={cx('infonomic-checkbox-component', styles.component, componentClasses, {
+        className={cx('byline-checkbox-component', styles.component, componentClasses, {
           [styles.reverse]: reverse,
         })}
       >
@@ -69,10 +69,10 @@ export const Checkbox = function Checkbox({
           nativeButton
           render={<button type="button" />}
           className={cx(
-            'infonomic-checkbox',
-            `infonomic-checkbox-${variant}`,
-            `infonomic-checkbox-${size}`,
-            `infonomic-checkbox-${intent}`,
+            'byline-checkbox',
+            `byline-checkbox-${variant}`,
+            `byline-checkbox-${size}`,
+            `byline-checkbox-${intent}`,
             styles.checkbox,
             styles[variant],
             styles[size],
@@ -84,17 +84,14 @@ export const Checkbox = function Checkbox({
         >
           <CheckboxPrimitive.Indicator
             keepMounted
-            className={cx('infonomic-checkbox-indicator', styles.indicator)}
+            className={cx('byline-checkbox-indicator', styles.indicator)}
           >
             <CheckIcon className={styles.icon} />
           </CheckboxPrimitive.Indicator>
         </CheckboxPrimitive.Root>
 
         {label != null && (
-          <label
-            htmlFor={id}
-            className={cx('infonomic-checkbox-label', styles.label, labelClasses)}
-          >
+          <label htmlFor={id} className={cx('byline-checkbox-label', styles.label, labelClasses)}>
             {label}
           </label>
         )}

package/src/components/inputs/error-text.module.css

@@ -11,23 +11,23 @@
 
 @layer byline-components {
   .text,
-  :global(.infonomic-error-text) {
+  :global(.byline-error-text) {
     font-size: 0.875rem;
     color: var(--text-danger);
   }
 
   .sm,
-  :global(.infonomic-error-text-sm) {
+  :global(.byline-error-text-sm) {
     font-size: 0.85rem;
   }
 
   .md,
-  :global(.infonomic-error-text-md) {
+  :global(.byline-error-text-md) {
     font-size: 0.875rem;
   }
 
   .lg,
-  :global(.infonomic-error-text-lg) {
+  :global(.byline-error-text-lg) {
     font-size: 0.9rem;
   }
 }

package/src/components/inputs/help-text.module.css

@@ -11,23 +11,23 @@
 
 @layer byline-components {
   .text,
-  :global(.infonomic-help-text) {
+  :global(.byline-help-text) {
     font-size: 0.875rem;
     color: var(--muted);
   }
 
   .sm,
-  :global(.infonomic-help-text-sm) {
+  :global(.byline-help-text-sm) {
     font-size: 0.85rem;
   }
 
   .md,
-  :global(.infonomic-help-text-md) {
+  :global(.byline-help-text-md) {
     font-size: 0.875rem;
   }
 
   .lg,
-  :global(.infonomic-help-text-lg) {
+  :global(.byline-help-text-lg) {
     font-size: 0.9rem;
   }
 }

package/src/components/inputs/help-text.tsx

@@ -12,8 +12,6 @@ interface HelpTextProps {
 
 export function HelpText({ className, size, text }: HelpTextProps): React.JSX.Element {
   return (
-    <p className={cx('infonomic-help-text', styles.text, size && styles[size], className)}>
-      {text}
-    </p>
+    <p className={cx('byline-help-text', styles.text, size && styles[size], className)}>{text}</p>
   )
 }

package/src/components/inputs/input-adornment.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .adornment,
-  :global(.infonomic-input-adornment) {
+  :global(.byline-input-adornment) {
     display: flex;
     align-items: center;
     line-height: 0;
@@ -19,12 +19,12 @@
   }
 
   .start,
-  :global(.infonomic-input-adornment-start) {
+  :global(.byline-input-adornment-start) {
     justify-content: flex-start;
   }
 
   .end,
-  :global(.infonomic-input-adornment-end) {
+  :global(.byline-input-adornment-end) {
     justify-content: flex-end;
   }
 }

package/src/components/inputs/input-adornment.tsx

@@ -22,8 +22,8 @@ export function InputAdornment({
   return (
     <div
       className={cx(
-        'infonomic-input-adornment',
-        `infonomic-input-adornment-${position}`,
+        'byline-input-adornment',
+        `byline-input-adornment-${position}`,
         styles.adornment,
         { [styles.start]: position === 'start' },
         { [styles.end]: position === 'end' },

package/src/components/inputs/input.module.css

@@ -11,14 +11,14 @@
 
 @layer byline-components {
   .input-wrapper,
-  :global(.infonomic-input-wrapper) {
+  :global(.byline-input-wrapper) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
   }
 
   .input-container,
-  :global(.infonomic-input-container) {
+  :global(.byline-input-container) {
     position: relative;
     width: 100%;
     padding: 0;
@@ -28,7 +28,7 @@
   }
 
   .input,
-  :global(.infonomic-input) {
+  :global(.byline-input) {
     border: none;
     outline: 1px solid transparent;
     outline-offset: 2px;
@@ -43,20 +43,20 @@
 
   .input:focus,
   .input:active,
-  :global(.infonomic-input):focus,
-  :global(.infonomic-input):active {
+  :global(.byline-input):focus,
+  :global(.byline-input):active {
     outline-color: var(--ring-color);
   }
 
   .input:disabled,
   .input[disabled],
-  :global(.infonomic-input):disabled,
-  :global(.infonomic-input)[disabled] {
+  :global(.byline-input):disabled,
+  :global(.byline-input)[disabled] {
     pointer-events: none;
   }
 
   .label,
-  :global(.infonomic-input-label) {
+  :global(.byline-input-label) {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--label-color);
@@ -64,7 +64,7 @@
 
   /* Sizes */
   .sm,
-  :global(.infonomic-input-sm) {
+  :global(.byline-input-sm) {
     min-height: 32px;
     font-size: 0.875rem;
     line-height: 0;
@@ -72,7 +72,7 @@
   }
 
   .md,
-  :global(.infonomic-input-md) {
+  :global(.byline-input-md) {
     min-height: 36px;
     font-size: 1rem;
     line-height: 0;
@@ -80,7 +80,7 @@
   }
 
   .lg,
-  :global(.infonomic-input-lg) {
+  :global(.byline-input-lg) {
     min-height: 40px;
     font-size: 1.175rem;
     line-height: 0;
@@ -89,50 +89,50 @@
 
   .start-adornment,
   .end-adornment,
-  :global(.infonomic-input-start-adornment),
-  :global(.infonomic-input-end-adornment) {
+  :global(.byline-input-start-adornment),
+  :global(.byline-input-end-adornment) {
     position: absolute;
     display: flex;
     align-items: center;
   }
 
   .start-adornment,
-  :global(.infonomic-input-start-adornment) {
+  :global(.byline-input-start-adornment) {
     left: 5px;
   }
 
   .end-adornment,
-  :global(.infonomic-input-end-adornment) {
+  :global(.byline-input-end-adornment) {
     right: 5px;
   }
 
   .help-text,
-  :global(.infonomic-input-help-text) {
+  :global(.byline-input-help-text) {
     font-size: 0.75rem;
     color: var(--help-text-color);
   }
 
   /* Variants */
   .outlined,
-  :global(.infonomic-input-outlined) {
+  :global(.byline-input-outlined) {
     border: 1px solid var(--input-variant-outlined-border);
     background-color: transparent;
   }
 
   .outlined:hover,
-  :global(.infonomic-input-outlined):hover {
+  :global(.byline-input-outlined):hover {
     border: 1px solid var(--input-variant-outlined-hover-border);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.infonomic-input-outlined):focus,
-  :global(.infonomic-input-outlined):active {
+  :global(.byline-input-outlined):focus,
+  :global(.byline-input-outlined):active {
     --ring-color: var(--input-variant-outline-ring-color);
   }
 
   .underlined,
-  :global(.infonomic-input-underlined) {
+  :global(.byline-input-underlined) {
     border-bottom: 1px solid var(--input-variant-underlined-border);
     border-radius: 0;
     gap: var(--gap-1);
@@ -141,86 +141,86 @@
 
   /* Sizes */
   .underlined.sm,
-  :global(.infonomic-input-underlined.input-sm) {
+  :global(.byline-input-underlined.input-sm) {
     padding: 0.25rem 0.1rem;
     min-height: 26px;
   }
 
   .underlined.md,
-  :global(.infonomic-input-underlined.input-md) {
+  :global(.byline-input-underlined.input-md) {
     padding: 0.25rem 0.1rem;
     min-height: 30px;
   }
 
   .underlined.lg,
-  :global(.infonomic-input-underlined.input-lg) {
+  :global(.byline-input-underlined.input-lg) {
     padding: 0 0.1rem;
     min-height: 34px;
   }
 
   .underlined:hover,
-  :global(.infonomic-input-underlined):hover {
+  :global(.byline-input-underlined):hover {
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
   .underlined:focus,
   .underlined:active,
-  :global(.infonomic-input-underlined):focus,
-  :global(.infonomic-input-underlined):active {
+  :global(.byline-input-underlined):focus,
+  :global(.byline-input-underlined):active {
     outline: none;
   }
 
   .filled,
-  :global(.infonomic-input-filled) {
+  :global(.byline-input-filled) {
     background-color: var(--input-variant-filled);
   }
 
   /* Error classes last, so that they override all
     of the above */
   .error,
-  :global(.infonomic-input-error) {
+  :global(.byline-input-error) {
     border: 1px solid var(--field-border-invalid);
   }
 
   .error:hover,
-  :global(.infonomic-input-error):hover {
+  :global(.byline-input-error):hover {
     border: 1px solid var(--field-border-invalid);
   }
 
   .error:focus,
   .error:active,
-  :global(.infonomic-input-error):focus,
-  :global(.infonomic-input-error):active {
+  :global(.byline-input-error):focus,
+  :global(.byline-input-error):active {
     --ring-color: var(--field-ring-invalid);
   }
 
   .underlined.start-adornment-padding,
   .start-adornment-padding,
-  :global(.infonomic-input-underlined.input-start-adornment-padding),
-  :global(.infonomic-input-start-adornment-padding) {
+  :global(.byline-input-underlined.input-start-adornment-padding),
+  :global(.byline-input-start-adornment-padding) {
     padding-left: 2rem;
   }
 
   .underlined.end-adornment-padding,
   .end-adornment-padding,
-  :global(.infonomic-input-underlined.input-end-adornment-padding),
-  :global(.infonomic-input-end-adornment-padding) {
+  :global(.byline-input-underlined.input-end-adornment-padding),
+  :global(.byline-input-end-adornment-padding) {
     padding-right: 2rem;
   }
 
   .underlined.start-adornment,
-  :global(.infonomic-input-underlined.input-start-adornment) {
+  :global(.byline-input-underlined.input-start-adornment) {
     left: 0;
   }
 
   .underlined.end-adornment,
-  :global(.infonomic-input-underlined.input-end-adornment) {
+  :global(.byline-input-underlined.input-end-adornment) {
     right: 0;
   }
 
   /* Intents */
   .primary,
-  :global(.infonomic-input-primary) {
+  :global(.byline-input-primary) {
     --input-variant-outlined-border: var(--stroke-primary);
     --input-variant-outlined-hover-border: var(--stroke-primary-hover);
     --input-variant-outline-ring-color: var(--ring-primary);
@@ -230,7 +230,7 @@
   }
 
   .secondary,
-  :global(.infonomic-input-secondary) {
+  :global(.byline-input-secondary) {
     --input-variant-outlined-border: var(--stroke-secondary);
     --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
     --input-variant-outline-ring-color: var(--ring-secondary);
@@ -240,7 +240,7 @@
   }
 
   .noeffect,
-  :global(.infonomic-input-noeffect) {
+  :global(.byline-input-noeffect) {
     --input-variant-outlined-border: var(--stroke-noeffect);
     --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
     --input-variant-outline-ring-color: var(--ring-noeffect);
@@ -250,7 +250,7 @@
   }
 
   .success,
-  :global(.infonomic-input-success) {
+  :global(.byline-input-success) {
     --input-variant-outlined-border: var(--stroke-success);
     --input-variant-outlined-hover-border: var(--stroke-success-hover);
     --input-variant-outline-ring-color: var(--ring-success);
@@ -260,7 +260,7 @@
   }
 
   .info,
-  :global(.infonomic-input-info) {
+  :global(.byline-input-info) {
     --input-variant-outlined-border: var(--stroke-info);
     --input-variant-outlined-hover-border: var(--stroke-info-hover);
     --input-variant-outline-ring-color: var(--ring-info);
@@ -270,7 +270,7 @@
   }
 
   .warning,
-  :global(.infonomic-input-warning) {
+  :global(.byline-input-warning) {
     --input-variant-outlined-border: var(--stroke-warning);
     --input-variant-outlined-hover-border: var(--stroke-warning-hover);
     --input-variant-outline-ring-color: var(--ring-warning);
@@ -280,7 +280,7 @@
   }
 
   .danger,
-  :global(.infonomic-input-danger) {
+  :global(.byline-input-danger) {
     --input-variant-outlined-border: var(--stroke-danger);
     --input-variant-outlined-hover-border: var(--stroke-danger-hover);
     --input-variant-outline-ring-color: var(--ring-danger);