@byline/ui 1.10.2 → 1.10.3

package/src/components/shimmer/shimmer.module.css

@@ -12,11 +12,16 @@
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {
   .shimmer,
-  :global(.infonomic-shimmer) {
+  :global(.byline-shimmer) {
     position: relative;
     overflow: hidden;
     background-color: #f0f0f0;
-    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.6),
+      transparent
+    );
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
   }
@@ -24,31 +29,36 @@
   :global(.dark),
   :global([data-theme="dark"]) {
     .shimmer,
-    :global(.infonomic-shimmer) {
+    :global(.byline-shimmer) {
       background-color: #141414;
-      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.01),
+        transparent
+      );
     }
   }
 
   .shimmerContainer,
-  :global(.infonomic-shimmer-container) {
+  :global(.byline-shimmer-container) {
     display: flex;
     flex-direction: column;
   }
 
   .rectangular,
-  :global(.infonomic-shimmer-rectangular) {
+  :global(.byline-shimmer-rectangular) {
     border-radius: 0.25rem;
   }
 
   .text,
-  :global(.infonomic-shimmer-text) {
+  :global(.byline-shimmer-text) {
     border-radius: 0.125rem;
     height: 1rem;
   }
 
   .circular,
-  :global(.infonomic-shimmer-circular) {
+  :global(.byline-shimmer-circular) {
     border-radius: 50%;
     aspect-ratio: 1;
   }

package/src/components/table/table.module.css

@@ -13,7 +13,7 @@
 @layer byline-components {
   /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
   .table-container,
-  :global(.infonomic-table-container) {
+  :global(.byline-table-container) {
     display: block;
     overflow: hidden;
     word-break: normal;
@@ -24,13 +24,13 @@
   }
 
   .table-scroller,
-  :global(.infonomic-table-scroller) {
+  :global(.byline-table-scroller) {
     overflow-x: auto;
     max-width: calc(100vw - 32px);
   }
 
   .table,
-  :global(.infonomic-table) {
+  :global(.byline-table) {
     width: 100%;
     border-collapse: collapse;
     margin: 0;
@@ -40,7 +40,7 @@
 
   /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
   .table-header,
-  :global(.infonomic-table-header) {
+  :global(.byline-table-header) {
     font-size: var(--font-size-sm);
     /* text-transform: uppercase; */
     background-color: var(--canvas-50);
@@ -48,19 +48,19 @@
 
   /* 'border-b border-solid border-canvas-200 bg-white hover:bg-canvas-100/50 dark:border-canvas-700/60 dark:bg-canvas-800/50 dark:hover:bg-canvas-700/50', */
   .table-row,
-  :global(.infonomic-table-row) {
+  :global(.byline-table-row) {
     border-bottom: 1px solid var(--canvas-50);
     background-color: white;
   }
 
   .table-row:hover,
-  :global(.infonomic-table-row:hover) {
+  :global(.byline-table-row:hover) {
     background-color: var(--canvas-50);
   }
 
   /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
   .table-heading-cell,
-  :global(.infonomic-table-heading-cell) {
+  :global(.byline-table-heading-cell) {
     white-space: nowrap;
     padding: var(--spacing-8) var(--spacing-8);
     font-size: 0.975rem;
@@ -71,7 +71,7 @@
 
   /* not-prose px-2 py-2 text-sm [&_a]:underline */
   .table-cell,
-  :global(.infonomic-table-cell) {
+  :global(.byline-table-cell) {
     padding: var(--spacing-8);
     font-size: var(--font-size-sm);
 
@@ -82,13 +82,13 @@
 
   /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
   .table-footer,
-  :global(.infonomic-table-footer) {
+  :global(.byline-table-footer) {
     font-size: var(--font-size-sm);
     /* text-transform: uppercase; */
     background-color: var(--canvas-100);
   }
 
-  /* 🌙 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
@@ -96,28 +96,28 @@
   :global(.dark),
   :global([data-theme="dark"]) {
     .table-header,
-    :global(.infonomic-table-header) {
+    :global(.byline-table-header) {
       background-color: var(--canvas-700);
     }
 
     .table-row,
-    :global(.infonomic-table-row) {
+    :global(.byline-table-row) {
       border-bottom: 1px solid var(--canvas-700);
       background-color: var(--canvas-800);
     }
 
     .table-row:hover,
-    :global(.infonomic-table-row:hover) {
+    :global(.byline-table-row:hover) {
       background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
     }
 
     .table-heading-cell,
-    :global(.infonomic-table-heading-cell) {
+    :global(.byline-table-heading-cell) {
       background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
     }
 
     .table-footer,
-    :global(.infonomic-table-footer) {
+    :global(.byline-table-footer) {
       background-color: var(--canvas-800);
     }
   }

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%;
   }