@byline/ui 1.10.2 → 1.11.0

package/src/components/table/table.tsx

@@ -14,7 +14,7 @@ function Table({
 }: TableProps & {
   ref?: React.RefObject<HTMLTableElement>
 }): React.JSX.Element {
-  const classes = cx(styles.table, 'infonomic-table', className)
+  const classes = cx(styles.table, 'byline-table', className)
 
   return (
     <table ref={ref} className={classes} {...rest}>
@@ -33,10 +33,10 @@ function Container({
 }: TableContainerProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
-  const classes = cx(styles['table-container'], 'infonomic-table-container', className)
+  const classes = cx(styles['table-container'], 'byline-table-container', className)
   return (
     <div ref={ref} className={classes} {...rest}>
-      <div className={cx('infonomic-table-scroller', styles['table-scroller'])}>{children}</div>
+      <div className={cx('byline-table-scroller', styles['table-scroller'])}>{children}</div>
     </div>
   )
 }
@@ -52,7 +52,7 @@ function Body({
   ref?: React.RefObject<HTMLTableSectionElement>
 }): React.JSX.Element {
   return (
-    <tbody ref={ref} className={cx('infonomic-table-body', className)} {...rest}>
+    <tbody ref={ref} className={cx('byline-table-body', className)} {...rest}>
       {children}
     </tbody>
   )
@@ -68,7 +68,7 @@ function Header({
 }: TableHeaderProps & {
   ref?: React.RefObject<HTMLTableSectionElement>
 }): React.JSX.Element {
-  const classes = cx(styles['table-header'], 'infonomic-table-header', className)
+  const classes = cx(styles['table-header'], 'byline-table-header', className)
 
   return (
     <thead ref={ref} className={classes} {...rest}>
@@ -87,7 +87,7 @@ function Row({
 }: TableRowProps & {
   ref?: React.RefObject<HTMLTableRowElement>
 }): React.JSX.Element {
-  const classes = cx(styles['table-row'], 'infonomic-table-row', className)
+  const classes = cx(styles['table-row'], 'byline-table-row', className)
 
   return (
     <tr ref={ref} className={classes} {...rest}>
@@ -108,7 +108,7 @@ function HeadingCell({
 }): React.JSX.Element {
   const classes = cx(
     styles['table-heading-cell'],
-    'infonomic-table-heading-cell',
+    'byline-table-heading-cell',
     'not-prose',
     className
   )
@@ -129,7 +129,7 @@ function Cell({
 }: TableCellProps & {
   ref?: React.RefObject<HTMLTableCellElement>
 }): React.JSX.Element {
-  const classes = cx(styles['table-cell'], 'infonomic-table-cell', className)
+  const classes = cx(styles['table-cell'], 'byline-table-cell', className)
 
   return (
     <td ref={ref} className={classes} {...rest}>

package/src/components/tabs/tabs.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .tabs-root,
-  :global(.infonomic-tabs-root) {
+  :global(.byline-tabs-root) {
     display: flex;
     padding: var(--spacing-8);
     flex-direction: column;
@@ -21,7 +21,7 @@
   }
 
   .tabs-list,
-  :global(.infonomic-tabs-list) {
+  :global(.byline-tabs-list) {
     display: flex;
     width: 100%;
     gap: var(--gap-2);
@@ -36,7 +36,7 @@
   }
 
   .tabs-trigger,
-  :global(.infonomic-tabs-trigger) {
+  :global(.byline-tabs-trigger) {
     align-items: center;
     justify-content: center;
     white-space: nowrap;
@@ -48,7 +48,7 @@
   }
 
   .tabs-content,
-  :global(.infonomic-tabs-content) {
+  :global(.byline-tabs-content) {
     margin-top: var(--spacing-8);
     padding: 6px;
     outline: none;

package/src/components/tabs/tabs.tsx

@@ -16,7 +16,7 @@ const Tabs = ({
 }) => (
   <TabsPrimitive.Root
     ref={ref}
-    className={cx(styles['tabs-root'], 'infonomic-tabs-root', className)}
+    className={cx(styles['tabs-root'], 'byline-tabs-root', className)}
     {...props}
   />
 )
@@ -31,7 +31,7 @@ const TabsList = ({
 }) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cx(styles['tabs-list'], 'infonomic-tabs-list', className)}
+    className={cx(styles['tabs-list'], 'byline-tabs-list', className)}
     {...props}
   />
 )
@@ -46,7 +46,7 @@ const TabsTrigger = ({
 }) => (
   <TabsPrimitive.Tab
     ref={ref}
-    className={cx(styles['tabs-trigger'], 'infonomic-tabs-trigger', className)}
+    className={cx(styles['tabs-trigger'], 'byline-tabs-trigger', className)}
     {...props}
   />
 )
@@ -63,7 +63,7 @@ const TabsContent = ({
   <TabsPrimitive.Panel
     ref={ref}
     keepMounted={keepMounted}
-    className={cx(styles['tabs-content'], 'infonomic-tabs-content', className)}
+    className={cx(styles['tabs-content'], 'byline-tabs-content', className)}
     {...props}
   />
 )

package/src/components/tooltip/tooltip.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .tooltip,
-  :global(.infonomic-tooltip) {
+  :global(.byline-tooltip) {
     font-size: 0.75rem;
     line-height: 1;
     color: var(--surface-item-text);
@@ -46,7 +46,7 @@
   }
 
   .tooltip-arrow,
-  :global(.infonomic-tooltip-arrow) {
+  :global(.byline-tooltip-arrow) {
     display: flex;
 
     &[data-side="top"] {

package/src/components/tooltip/tooltip.tsx

@@ -67,9 +67,9 @@ export const Tooltip = function Tooltip({
         <TooltipPrimitive.Trigger render={children} />
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Positioner ref={ref} side={side} sideOffset={sideOffset}>
-            <TooltipPrimitive.Popup className={cx(styles.tooltip, 'infonomic-tooltip')}>
+            <TooltipPrimitive.Popup className={cx(styles.tooltip, 'byline-tooltip')}>
               <TooltipPrimitive.Arrow
-                className={cx(styles['tooltip-arrow'], 'infonomic-tooltip-arrow')}
+                className={cx(styles['tooltip-arrow'], 'byline-tooltip-arrow')}
               >
                 <ArrowSvg />
               </TooltipPrimitive.Arrow>

package/src/fields/checkbox/checkbox-field.module.css

@@ -0,0 +1,4 @@
+:global(.byline-field-checkbox),
+.field-checkbox {
+  margin: 0;
+}

package/src/fields/checkbox/checkbox-field.tsx

@@ -10,6 +10,7 @@ import type { CheckboxField as FieldType } from '@byline/core'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
 import { Checkbox } from '../../uikit.js'
+import styles from './checkbox-field.module.css'
 
 export const CheckboxField = ({
   field,
@@ -32,7 +33,7 @@ export const CheckboxField = ({
   const checked = value ?? fieldValue ?? defaultValue ?? false
 
   return (
-    <div className={`byline-field-checkbox ${field.name}`}>
+    <div className={`byline-field-checkbox ${field.name} ${styles['field-checkbox']}`}>
       <Checkbox
         id={id ?? fieldPath}
         name={field.name}

package/src/forms/form-context.tsx

@@ -52,6 +52,7 @@ interface FormContextType {
   runFieldHooks: (fields: Field[]) => Promise<FormError[]>
   validateForm: (fields: Field[]) => FormError[]
   errors: FormError[]
+  getErrors: () => FormError[]
   clearErrors: () => void
   setFieldError: (field: string, message: string) => void
   clearFieldError: (field: string) => void
@@ -520,6 +521,7 @@ export const FormProvider = ({
         runFieldHooks,
         validateForm,
         errors: errorsRef.current,
+        getErrors: () => errorsRef.current,
         clearErrors,
         setFieldError,
         clearFieldError,
@@ -562,9 +564,15 @@ export const useFormStore = () => {
 }
 
 export const useFieldError = (name: string) => {
-  const { errors, subscribeErrors } = useFormContext()
+  const { getErrors, subscribeErrors } = useFormContext()
+  // Seed from the live errors ref via getErrors() rather than the context's
+  // `errors` snapshot — the snapshot is bound at FormProvider's first render
+  // and goes stale as soon as validateForm replaces errorsRef.current. Fields
+  // mounted after validation has already run (e.g. switching to a tab whose
+  // error badge is non-zero) would otherwise initialise to undefined and miss
+  // the existing error until something else fires notifyErrorListeners.
   const [error, setError] = useState<string | undefined>(
-    errors.find((e) => e.field === name)?.message
+    () => getErrors().find((e) => e.field === name)?.message
   )
 
   useEffect(() => {

package/src/icons/source/icon-infonomic.svg

@@ -1,4 +1,4 @@
-<svg data-name="infonomic-icon"
+<svg data-name="byline-icon"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
   <defs>
@@ -40,4 +40,4 @@
   <path d="M436.21,178.4c.68-1,4.69-7.09,4.85-7.34.46-.71,4.89-8.17,5.18-8.68,38.11-67.56,27.78-139,18.78-147C451.83,3.74,361.31,40.33,370.19,48.31,411.55,28.15,452,24.85,455.1,27.42c4.63,3.85,12.22,91.46-38.4,152.11-29,34.76-86.92,80-106.27,94.77-4.1,3.13-6,7-5.38,10.37,1.93,11.12,4.74,36.2-6.5,48-14.68,15.45-67,33-70.56,27.84s53.54-49.8,16.51-81.23c-4.91-4.16-9.69-5.83-14.54-8.22l.58-.05.08.86c-31.77-7.59-57.56,40.82-62.5,38.58-5.69-2.58,1.9-57.17,14.47-74.38a25.2,25.2,0,0,1,7.11-6.45h0s-17.83,4.52-25.59,34.08c-5.47,20.86-6.35,47.39-6.39,61.21,0,5.77-7.47,6.32-7.29-3,.21-10.48-1.76-23.93-13.51-34.46-20-17.94-44.4-5.17-51.67-.11-1.55,1.08-3.09-1.63-3.5-3.26-6.14-24.67-21.64-34.24-21.64-34.24C59.73,168.36,125.14,97.53,169.25,75.8A218.31,218.31,0,0,0,25,286.64c29.43,6.51,38.81,32.9,41.79,48.63,1.34,7.06,3,4,4.74.48,5.52-11.33,16.24-23.12,34.35-21.5,25.51,2.29,29.92,26.9,30.78,38.8.28,4,3.25,5.2,5.33,4,22.45-13.36,82.2-65.62,82.2-65.62s3.28-3.29,7.25-3.07a8,8,0,0,1,4.28,1.76c5.59,4.66.73,11.51.73,11.51s-40.77,68-49.88,92.51c-.84,2.26.9,4.77,4.86,4.34.36,0,.71-.26,1.1-.3h0a74.82,74.82,0,0,1,9.47-.1c12.43.51,28,5.08,33.2,23.71,4.87,17.5-4.8,30.19-15,37.66-3.17,2.33-5.87,4.55,1.33,4.59,16.07.09,44.17,4.42,55.85,32.33,10.5-1.64,20.94-3.29,31.4-7.33h0s-.22.12-.18.11c.68-.21,15.14-5,24.25-9.37.12-.05,0-.32.17-.33h0a207.63,207.63,0,0,0,55.56-35.75c29.25-24.79,41.58-41,54.6-74.54A218.22,218.22,0,0,0,436.21,178.4ZM313.13,451.63v.05c-15-9.82-32.77-7.85-41-6.17-2.87.59-2.95-1.67-2.27-3.09,9.28-19.34,1.95-38.85-10.07-46.69-15.18-9.89-37.53-4.54-38.94-6.1-2.62-2.9,3.69-11,3.69-11,24.4-4.56,55-18,77.92-30.55s21.36-43.67,18.56-54.36,5.37-13.79,5.37-13.79c35.34-23,76.85-65.66,97.22-87.62l-.12.21S488,363.72,313.13,451.63Z" fill="url(#e82ad6d9-f6de-470e-9cc8-5c1e25860ae0)"/>
   <path d="M171.89,307.66s16.44-49.68,27.18-55.37,48.65,7.88,46.05,11c-.65.78-2.63,1.43-5.49,2.1-8.55,2-24.91,4.13-36.35,10.09C188,283.41,171.82,315.53,171.89,307.66Z" fill="url(#a031a507-2f2b-46ac-8fd0-d46923b5cede)"/>
   <path d="M24.87,286.91C28.47,405.21,124.8,500,243.09,500A219.07,219.07,0,0,0,277,497.36c-12-27.17-39.24-31.58-55.11-31.67-7.2,0-4.49-2.26-1.32-4.61,10.18-7.55,19.87-20.33,15-38-6.87-24.9-31.94-24.79-43.83-23.48-4,.44-5.72-2.28-4.88-4.57,9.12-24.71,49.93-93.46,49.93-93.46s4.87-6.92-.73-11.63-11.54,1.32-11.54,1.32-59.83,52.8-82.31,66.29c-2.08,1.25-5,0-5.34-4-.86-12-5.28-36.88-30.82-39.2-18.14-1.65-28.87,10.26-34.4,21.71-1.73,3.57-3.4,6.65-4.74-.48-3-15.89-12.38-42.57-41.85-49.15Z" fill="url(#a9106638-56d4-4f79-8812-bed67cfca285)"/>
-</svg>
+</svg>

package/src/loaders/ellipses.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .loader-ellipsis,
-  :global(.infonomic-loader-ellipsis) {
+  :global(.byline-loader-ellipsis) {
     --_size: var(--loader-ellipsis-size, 80px);
     --_color: var(--loader-ellipsis-color, var(--loader-color, currentColor));
     display: inline-block;
@@ -21,7 +21,7 @@
   }
 
   .loader-ellipsis-dot,
-  :global(.infonomic-loader-ellipsis-dot) {
+  :global(.byline-loader-ellipsis-dot) {
     position: absolute;
     top: 41.25%;
     width: 16.25%;

package/src/loaders/ellipses.tsx

@@ -27,13 +27,13 @@ export function LoaderEllipsis({
     <div
       // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
       key={index}
-      className={cx('infonomic-loader-ellipsis-dot', styles['loader-ellipsis-dot'])}
+      className={cx('byline-loader-ellipsis-dot', styles['loader-ellipsis-dot'])}
     />
   ))
 
   return (
     <div
-      className={cx('infonomic-loader-ellipsis', styles['loader-ellipsis'], className)}
+      className={cx('byline-loader-ellipsis', styles['loader-ellipsis'], className)}
       style={ellipsisStyle}
       {...rest}
     >

package/src/loaders/ring.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .loader-ring,
-  :global(.infonomic-loader-ring) {
+  :global(.byline-loader-ring) {
     --_size: var(--loader-ring-size, 60px);
     --_color: var(--loader-ring-color, var(--loader-color, currentColor));
     display: inline-block;
@@ -21,7 +21,7 @@
   }
 
   .loader-ring-arc,
-  :global(.infonomic-loader-ring-arc) {
+  :global(.byline-loader-ring-arc) {
     box-sizing: border-box;
     display: block;
     position: absolute;

package/src/loaders/ring.tsx

@@ -28,14 +28,14 @@ export function LoaderRing({
       <div
         // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
         key={index}
-        className={cx('infonomic-loader-ring-arc', styles['loader-ring-arc'])}
+        className={cx('byline-loader-ring-arc', styles['loader-ring-arc'])}
       />
     )
   })
 
   return (
     <div
-      className={cx('infonomic-loader-ring', styles['loader-ring'], className)}
+      className={cx('byline-loader-ring', styles['loader-ring'], className)}
       style={ringStyle}
       {...rest}
     >

package/src/loaders/spinner.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .loader-spinner,
-  :global(.infonomic-loader-spinner) {
+  :global(.byline-loader-spinner) {
     --_size: var(--loader-spinner-size, 56px);
     --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
     display: inline-block;
@@ -21,13 +21,13 @@
   }
 
   .loader-spinner-blade,
-  :global(.infonomic-loader-spinner-blade) {
+  :global(.byline-loader-spinner-blade) {
     transform-origin: calc(var(--_size) * 0.5) calc(var(--_size) * 0.5714);
     animation: loader-spinner 1.2s linear infinite;
   }
 
   .loader-spinner-blade-inner,
-  :global(.infonomic-loader-spinner-blade-inner) {
+  :global(.byline-loader-spinner-blade-inner) {
     display: block;
     position: absolute;
     top: 0;

package/src/loaders/spinner.tsx

@@ -18,13 +18,10 @@ export function LoaderSpinner({
       // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
       <div
         key={index}
-        className={cx('infonomic-loader-spinner-blade', styles['loader-spinner-blade'])}
+        className={cx('byline-loader-spinner-blade', styles['loader-spinner-blade'])}
       >
         <div
-          className={cx(
-            'infonomic-loader-spinner-blade-inner',
-            styles['loader-spinner-blade-inner']
-          )}
+          className={cx('byline-loader-spinner-blade-inner', styles['loader-spinner-blade-inner'])}
         />
       </div>
     )
@@ -42,7 +39,7 @@ export function LoaderSpinner({
 
   return (
     <div
-      className={cx('infonomic-loader-spinner', styles['loader-spinner'], className)}
+      className={cx('byline-loader-spinner', styles['loader-spinner'], className)}
       style={spinnerStyle}
       {...rest}
     >

package/src/styles/styles.css

@@ -17,3 +17,15 @@
 .byline-ui {
   isolation: isolate;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/widgets/datepicker/datepicker.module.css

@@ -10,19 +10,19 @@
   byline-utilities;
 @layer byline-components {
   .container,
-  :global(.infonomic-datepicker-container) {
+  :global(.byline-datepicker-container) {
     position: relative;
   }
 
   .input,
   .input-wrapper,
-  :global(.infonomic-datepicker-input),
-  :global(.infonomic-datepicker-input-wrapper) {
+  :global(.byline-datepicker-input),
+  :global(.byline-datepicker-input-wrapper) {
     width: 100%;
   }
 
   .content,
-  :global(.infonomic-datepicker-content) {
+  :global(.byline-datepicker-content) {
     width: 100%;
     z-index: 50;
     border-radius: 4px;
@@ -66,14 +66,14 @@
   }
 
   .content-components,
-  :global(.infonomic-datepicker-content-components) {
+  :global(.byline-datepicker-content-components) {
     display: flex;
     width: 100%;
     gap: var(--spacing-8);
   }
 
   .status-and-actions,
-  :global(.infonomic-datepicker-status-and-actions) {
+  :global(.byline-datepicker-status-and-actions) {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -82,7 +82,7 @@
   }
 
   .content-status,
-  :global(.infonomic-datepicker-content-status) {
+  :global(.byline-datepicker-content-status) {
     display: flex;
     align-items: center;
     padding-left: var(--spacing-16);
@@ -93,7 +93,7 @@
   }
 
   .content-actions,
-  :global(.infonomic-datepicker-content-actions) {
+  :global(.byline-datepicker-content-actions) {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -105,18 +105,18 @@
   }
 
   .content-actions-button,
-  :global(.infonomic-datepicker-content-actions-button) {
+  :global(.byline-datepicker-content-actions-button) {
     /* min-width: 100px; */
     --ring-color: var(--violet-7);
   }
 
   .arrow,
-  :global(.infonomic-datepicker-arrow) {
+  :global(.byline-datepicker-arrow) {
     fill: var(--gray-50);
   }
 
   .close,
-  :global(.infonomic-datepicker-close) {
+  :global(.byline-datepicker-close) {
     all: unset;
     font-family: inherit;
     border-radius: 100%;
@@ -140,19 +140,19 @@
   }
 
   .time-picker-container,
-  :global(.infonomic-datepicker-time-picker-container) {
+  :global(.byline-datepicker-time-picker-container) {
     width: 80px;
     margin: 0.6rem 0.5rem 1rem 0;
   }
 
   .time-picker-scroll-area,
-  :global(.infonomic-datepicker-time-picker-scroll-area) {
+  :global(.byline-datepicker-time-picker-scroll-area) {
     height: 280px;
     padding-right: var(--spacing-16);
   }
 
   .time-picker,
-  :global(.infonomic-datepicker-time-picker) {
+  :global(.byline-datepicker-time-picker) {
     display: flex;
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
@@ -161,7 +161,7 @@
   }
 
   .time-picker-button,
-  :global(.infonomic-datepicker-time-picker-button) {
+  :global(.byline-datepicker-time-picker-button) {
     width: 100%;
   }
 

package/src/widgets/datepicker/datepicker.tsx

@@ -136,7 +136,7 @@ export function DatePicker({
   })
 
   return (
-    <div className={cx('infonomic-datepicker-container', styles.container, containerClassName)}>
+    <div className={cx('byline-datepicker-container', styles.container, containerClassName)}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-8)' }}>
         <Input
           id={id}
@@ -148,9 +148,9 @@ export function DatePicker({
           intent={intent}
           inputSize={inputSize}
           ref={inputRef}
-          className={cx('infonomic-datepicker-input', styles.input, inputClassName)}
+          className={cx('byline-datepicker-input', styles.input, inputClassName)}
           inputWrapperClassName={cx(
-            'infonomic-datepicker-input-wrapper',
+            'byline-datepicker-input-wrapper',
             styles['input-wrapper'],
             inputWrapperClassName
           )}
@@ -207,13 +207,10 @@ export function DatePicker({
         <Popover.Portal>
           <Popover.Positioner sideOffset={5}>
             <Popover.Popup
-              className={cx('infonomic-datepicker-content', styles.content, contentClassName)}
+              className={cx('byline-datepicker-content', styles.content, contentClassName)}
             >
               <div
-                className={cx(
-                  'infonomic-datepicker-content-components',
-                  styles['content-components']
-                )}
+                className={cx('byline-datepicker-content-components', styles['content-components'])}
               >
                 <div ref={calendarRef}>
                   <Calendar
@@ -284,25 +281,18 @@ export function DatePicker({
                 )}
               </div>
               <div
-                className={cx(
-                  'infonomic-datepicker-status-and-actions',
-                  styles['status-and-actions']
-                )}
+                className={cx('byline-datepicker-status-and-actions', styles['status-and-actions'])}
               >
-                <div
-                  className={cx('infonomic-datepicker-content-status', styles['content-status'])}
-                >
+                <div className={cx('byline-datepicker-content-status', styles['content-status'])}>
                   {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
                 </div>
-                <div
-                  className={cx('infonomic-datepicker-content-actions', styles['content-actions'])}
-                >
+                <div className={cx('byline-datepicker-content-actions', styles['content-actions'])}>
                   <div>
                     <Button
                       variant="outlined"
                       size="sm"
                       className={cx(
-                        'infonomic-datepicker-content-actions-button',
+                        'byline-datepicker-content-actions-button',
                         styles['content-actions-button']
                       )}
                       onClick={() => {
@@ -320,7 +310,7 @@ export function DatePicker({
                       size="sm"
                       intent="noeffect"
                       className={cx(
-                        'infonomic-datepicker-content-actions-button',
+                        'byline-datepicker-content-actions-button',
                         styles['content-actions-button']
                       )}
                       onClick={() => {
@@ -333,7 +323,7 @@ export function DatePicker({
                       variant="outlined"
                       size="sm"
                       className={cx(
-                        'infonomic-datepicker-content-actions-button',
+                        'byline-datepicker-content-actions-button',
                         styles['content-actions-button']
                       )}
                       onClick={() => {

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

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

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

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

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

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

package/src/widgets/drawer/drawer-top-actions.tsx

@@ -19,7 +19,7 @@ export const DrawerTopActions = function DrawerHeader({
 }: DrawerTopActionProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
-  const classes = cx('infonomic-drawer-top-actions', styles['drawer-top-actions'], className)
+  const classes = cx('byline-drawer-top-actions', styles['drawer-top-actions'], className)
   return (
     <div style={{ whiteSpace: 'nowrap' }} ref={ref} {...rest} className={classes}>
       {children}