@infonomic/uikit 6.5.1 → 6.7.0

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .button,
   :global(.infonomic-button) {
     border: none;
@@ -114,10 +113,14 @@ infonomic-components;
   .filled[disabled],
   :global(.infonomic-button-filled):disabled,
   :global(.infonomic-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));
-    color: var(--button-variant-filled-foreground-disabled,
-        oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-filled-disabled,
+      oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-foreground-disabled,
+      oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -145,10 +148,14 @@ infonomic-components;
   .filled-weak[disabled],
   :global(.infonomic-button-filled-weak):disabled,
   :global(.infonomic-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));
-    color: var(--button-variant-filled-weak-foreground-disabled,
-        oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-filled-weak-disabled,
+      oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-weak-foreground-disabled,
+      oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   .outlined,
@@ -162,10 +169,14 @@ infonomic-components;
   .outlined[disabled],
   :global(.infonomic-button-outlined):disabled,
   :global(.infonomic-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));
-    color: var(--button-variant-outlined-foreground-disabled,
-        oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+    border-color: var(
+      --button-variant-outlined-border-disabled,
+      oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --button-variant-outlined-foreground-disabled,
+      oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
   }
 
   .outlined:hover,
@@ -183,9 +194,11 @@ infonomic-components;
   .gradient,
   :global(.infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:disabled,
@@ -193,18 +206,24 @@ infonomic-components;
   :global(.infonomic-button-gradient):disabled,
   :global(.infonomic-button-gradient)[disabled] {
     background: unset;
-    background-color: var(--button-variant-gradient-disabled,
-        oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
-    color: var(--button-variant-gradient-foreground-disabled,
-        oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-gradient-disabled,
+      oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-gradient-foreground-disabled,
+      oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   .gradient:hover,
   :global(.infonomic-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:focus,
@@ -276,7 +295,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-primary-end);
     --button-variant-gradient-foreground: var(--gradient-primary-foreground);
     --button-variant-gradient-disabled: var(--gradient-primary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
   }
 
   .secondary,
@@ -315,7 +334,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-secondary-end);
     --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
     --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
   }
 
   .noeffect,
@@ -343,7 +362,7 @@ infonomic-components;
     --button-variant-outlined-border: var(--stroke-noeffect);
     --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
     --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
 
     /* Text */
     --button-variant-text: var(--fill-noeffect-text);
@@ -355,7 +374,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-noeffect-end);
     --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
     --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
   }
 
   .success,
@@ -394,7 +413,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-success-end);
     --button-variant-gradient-foreground: var(--gradient-success-foreground);
     --button-variant-gradient-disabled: var(--gradient-success-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
   }
 
   .info,
@@ -433,7 +452,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-info-end);
     --button-variant-gradient-foreground: var(--gradient-info-foreground);
     --button-variant-gradient-disabled: var(--gradient-info-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
   }
 
   .warning,
@@ -472,7 +491,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-warning-end);
     --button-variant-gradient-foreground: var(--gradient-warning-foreground);
     --button-variant-gradient-disabled: var(--gradient-warning-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
   }
 
   .danger,
@@ -511,7 +530,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-danger-end);
     --button-variant-gradient-foreground: var(--gradient-danger-foreground);
     --button-variant-gradient-disabled: var(--gradient-danger-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
   }
 
   /* Full width */
@@ -520,4 +539,4 @@ infonomic-components;
     width: 100%;
     display: flex;
   }
-}
+}

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .combo-button-wrapper,
   :global(.infonomic-combo-button-wrapper) {
     display: flex;
@@ -48,5 +47,6 @@
   }
 
   .combo-button-options-item,
-  :global(.infonomic-combo-button-options-item) {}
-}
+  :global(.infonomic-combo-button-options-item) {
+  }
+}

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

@@ -55,13 +55,7 @@ export const ComboButton = ({
       <DropdownComponent.Root>
         <DropdownComponent.Trigger
           className={cx('combo-button-trigger', styles['combo-button-trigger'], triggerClassName)}
-          render={
-            <Button
-              disabled={disabled || optionsDisabled}
-              intent={intent}
-              {...rest}
-            />
-          }
+          render={<Button disabled={disabled || optionsDisabled} intent={intent} {...rest} />}
         >
           <ChevronDownIcon width="16px" height="16px" />
         </DropdownComponent.Trigger>

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

@@ -32,7 +32,12 @@ export function CopyButton({
   svgClassName,
   ...rest
 }: CopyButtonProps): React.JSX.Element {
-  const [copied, setCopied] = useState<boolean | undefined>(undefined)
+  // Track copied-feedback and hover-open as separate booleans so the
+  // tooltip's `open` prop is always a boolean. Passing `undefined` -> `true`
+  // makes Base UI's Tooltip switch from uncontrolled to controlled and emits
+  // a React warning in consumer apps.
+  const [copied, setCopied] = useState(false)
+  const [hoverOpen, setHoverOpen] = useState(false)
 
   const handleCopied = (): void => {
     // TODO: Permissions check?
@@ -52,14 +57,12 @@ export function CopyButton({
   }
 
   useEffect(() => {
-    if (copied === true) {
-      setTimeout(() => {
-        setCopied(undefined)
-      }, 900)
-    }
-  })
+    if (!copied) return
+    const timer = setTimeout(() => setCopied(false), 900)
+    return () => clearTimeout(timer)
+  }, [copied])
 
-  const tooltipText = copied != null && copied ? copiedText : hoverText
+  const tooltipText = copied ? copiedText : hoverText
 
   return (
     <div
@@ -69,7 +72,18 @@ export function CopyButton({
         containerClassName
       )}
     >
-      <Tooltip side="top" sideOffset={2} text={tooltipText} open={copied}>
+      <Tooltip
+        side="top"
+        sideOffset={2}
+        text={tooltipText}
+        open={copied || hoverOpen}
+        onOpenChange={(next) => {
+          // While the "Copied!" feedback is showing, ignore hover-close so
+          // the tooltip stays visible for the full confirmation window.
+          if (copied && !next) return
+          setHoverOpen(next)
+        }}
+      >
         <Button
           variant={variant}
           size={size}

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

@@ -14,7 +14,7 @@
     width: 100%;
     max-width: 100%;
     color: var(--foreground);
-    background: var(--canvas-25);
+    background: var(--surface-panel);
     border-width: var(--border-width-thin);
     border-color: var(--border-color);
     border-style: var(--border-style-solid);
@@ -22,14 +22,6 @@
     box-shadow: var(--shadow-sm);
   }
 
-  :global(.dark),
-  :global([data-theme="dark"]) {
-    .card,
-    :global(.infonomic-card) {
-      background: var(--canvas-800);
-    }
-  }
-
   .card-hover,
   :global(.infonomic-card-hover) {
     transition: background 0.2s ease-in-out;

package/src/components/chips/chip.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .chip,
   :global(.infonomic-chip) {
     --chip-font-size: 0.9rem;
@@ -148,10 +147,14 @@ infonomic-components;
   .filled[disabled],
   :global(.infonomic-chip-filled):disabled,
   :global(.infonomic-chip-filled)[disabled] {
-    background-color: var(--chip-variant-filled-disabled,
-        oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--chip-variant-filled-foreground-disabled,
-        oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --chip-variant-filled-disabled,
+      oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --chip-variant-filled-foreground-disabled,
+      oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -179,10 +182,14 @@ infonomic-components;
   .filled-weak[disabled],
   :global(.infonomic-chip-filled-weak):disabled,
   :global(.infonomic-chip-filled-weak)[disabled] {
-    background-color: var(--chip-variant-filled-weak-disabled,
-        oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--chip-variant-filled-weak-foreground-disabled,
-        oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --chip-variant-filled-weak-disabled,
+      oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --chip-variant-filled-weak-foreground-disabled,
+      oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -199,10 +206,14 @@ infonomic-components;
   .outlined[disabled],
   :global(.infonomic-chip-outlined):disabled,
   :global(.infonomic-chip-outlined)[disabled] {
-    border-color: var(--chip-variant-outlined-border-disabled,
-        oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
-    color: var(--chip-variant-outlined-foreground-disabled,
-        oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+    border-color: var(
+      --chip-variant-outlined-border-disabled,
+      oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --chip-variant-outlined-foreground-disabled,
+      oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
   }
 
   .outlined:hover,
@@ -283,10 +294,10 @@ infonomic-components;
 
     /* Filled Weak */
     --chip-variant-filled-weak: var(--fill-secondary-weak);
-    --chip-variant-filled-weak-foreground: var(--text-on-secondary);
+    --chip-variant-filled-weak-foreground: var(--text-on-secondary-weak);
     --chip-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
     --chip-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
-    --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-disabled);
+    --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
 
     /* Outlined */
     --chip-variant-outlined: var(--fill-secondary-outlined);
@@ -431,4 +442,4 @@ infonomic-components;
     --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
     --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
   }
-}
+}

package/src/components/chips/chip.stories.tsx

@@ -63,7 +63,7 @@ export const Variants: Story = {
               selected={true}
             >{`${capitalize(variant)} with icon`}</Chip>
             {(variant === 'removable' || variant === 'selectable-removable') && (
-              <Chip variant={variant} onRemove={() => { }}>
+              <Chip variant={variant} onRemove={() => {}}>
                 {`${capitalize(variant)} with remove`}
               </Chip>
             )}
@@ -102,7 +102,7 @@ export const Removable: Story = {
         <Chip
           variant="removable"
           intent="primary"
-          onRemove={() => { }}
+          onRemove={() => {}}
           startIcon={<CalendarIcon height="16px" width="16px" />}
         >
           Removable chip

package/src/components/chips/chip.tsx

@@ -61,7 +61,7 @@ export const Chip = ({
     }
 
     if (onClick) {
-      ; (onClick as React.MouseEventHandler<HTMLElement>)(event)
+      ;(onClick as React.MouseEventHandler<HTMLElement>)(event)
     }
 
     if (isSelectable && onToggle) {
@@ -77,7 +77,7 @@ export const Chip = ({
     if ((event.key === 'Enter' || event.key === ' ') && isCustomElement) {
       event.preventDefault()
       if (onClick) {
-        ; (onClick as React.MouseEventHandler<HTMLElement>)(
+        ;(onClick as React.MouseEventHandler<HTMLElement>)(
           event as unknown as React.MouseEvent<HTMLElement>
         )
       }

package/src/components/dropdown/dropdown.tsx

@@ -7,10 +7,7 @@ import cx from 'classnames'
 
 import styles from './dropdown.module.css'
 
-function Root({
-  children,
-  ...rest
-}: React.ComponentProps<typeof Menu.Root>): React.JSX.Element {
+function Root({ children, ...rest }: React.ComponentProps<typeof Menu.Root>): React.JSX.Element {
   return <Menu.Root {...rest}>{children}</Menu.Root>
 }
 
@@ -23,11 +20,7 @@ const Trigger = ({
   ref?: React.RefObject<React.ComponentRef<'button'>>
 }): React.JSX.Element => {
   return (
-    <Menu.Trigger
-      className={cx('infonomic-dropdown-trigger', className)}
-      ref={ref}
-      {...rest}
-    >
+    <Menu.Trigger className={cx('infonomic-dropdown-trigger', className)} ref={ref} {...rest}>
       {children}
     </Menu.Trigger>
   )
@@ -90,11 +83,7 @@ const Group = ({
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <Menu.Group
-      ref={ref}
-      className={cx('infonomic-dropdown-group', className)}
-      {...rest}
-    >
+    <Menu.Group ref={ref} className={cx('infonomic-dropdown-group', className)} {...rest}>
       {children}
     </Menu.Group>
   )
@@ -130,11 +119,7 @@ const Label = ({
   ref?: React.RefObject<React.ComponentRef<'div'>>
 }): React.JSX.Element => {
   return (
-    <Menu.GroupLabel
-      ref={ref}
-      className={cx('infonomic-dropdown-label', className)}
-      {...rest}
-    >
+    <Menu.GroupLabel ref={ref} className={cx('infonomic-dropdown-label', className)} {...rest}>
       {children}
     </Menu.GroupLabel>
   )

package/src/components/hamburger/hamburger.module.css

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   .hamburger,
   :global(.infonomic-hamburger) {
     --hamburger-color: currentColor;
@@ -139,4 +138,4 @@ infonomic-components;
     --hamburger-color: var(--foreground, #1a1a1a);
     --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
   }
-}
+}

package/src/components/hamburger/hamburger.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<typeof HamburgerComponent> = {
 export default meta
 
 export const Hamburger = (): React.JSX.Element => {
-
   const [open, setOpen] = useState(false)
 
   return (

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

@@ -1,12 +1,11 @@
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
-
   /* ── Wrapper ── */
 
   .autocomplete-wrapper,
@@ -139,19 +138,19 @@ infonomic-components;
 
   .error,
   :global(.infonomic-autocomplete-input-error) {
-    border: 1px solid var(--red-400);
+    border: 1px solid var(--field-border-invalid);
   }
 
   .error:hover,
   :global(.infonomic-autocomplete-input-error):hover {
-    border: 1px solid var(--red-400);
+    border: 1px solid var(--field-border-invalid);
   }
 
   .error:focus,
   .error:active,
   :global(.infonomic-autocomplete-input-error):focus,
   :global(.infonomic-autocomplete-input-error):active {
-    --ring-color: var(--red-300);
+    --ring-color: var(--field-ring-invalid);
   }
 
   /* ── Intents ── */
@@ -368,4 +367,4 @@ infonomic-components;
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/src/components/inputs/autocomplete.tsx

@@ -57,7 +57,13 @@ export function Autocomplete<Item = string>({
   ...rest
 }: AutocompleteProps<Item>) {
   return (
-    <div className={cx('infonomic-autocomplete-wrapper', styles['autocomplete-wrapper'], wrapperClassName)}>
+    <div
+      className={cx(
+        'infonomic-autocomplete-wrapper',
+        styles['autocomplete-wrapper'],
+        wrapperClassName
+      )}
+    >
       <AutocompletePrimitive.Root items={items} {...rest}>
         {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
         <AutocompletePrimitive.Input
@@ -80,7 +86,7 @@ export function Autocomplete<Item = string>({
             styles[intent],
             { [styles.error]: error },
             className,
-            inputClassName,
+            inputClassName
           )}
         />
 
@@ -93,7 +99,7 @@ export function Autocomplete<Item = string>({
               className={cx(
                 'infonomic-autocomplete-popup',
                 styles.popup,
-                inputSize != null && styles[`popup-${inputSize}`],
+                inputSize != null && styles[`popup-${inputSize}`]
               )}
             >
               <AutocompletePrimitive.Empty
@@ -170,4 +176,4 @@ export const AutocompleteSeparator = ({
   )
 }
 
-AutocompleteSeparator.displayName = 'AutocompleteSeparator'
+AutocompleteSeparator.displayName = 'AutocompleteSeparator'

package/src/components/inputs/calendar.stories.tsx

@@ -45,12 +45,12 @@ export const Calendar = (): React.JSX.Element => {
             }
           }}
           onDayClick={() => setIsOpen(false)}
-        // fromYear={2000}
-        // toYear={new Date().getFullYear()}
-        // disabled={(date: Date) =>
-        //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
-        //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
-        // }
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
         />
         <div style={{ paddingLeft: '1rem', paddingTop: '1rem' }}>
           {date ? `${format(date, 'PPPp')}` : 'No date selected'}
@@ -95,12 +95,12 @@ export const Multiple = (): React.JSX.Element => {
             }
           }}
           onDayClick={() => setIsOpen(false)}
-        // fromYear={2000}
-        // toYear={new Date().getFullYear()}
-        // disabled={(date: Date) =>
-        //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
-        //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
-        // }
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
         />
       </div>
     </div>
@@ -128,12 +128,12 @@ export const Range = (): React.JSX.Element => {
             }
           }}
           onDayClick={() => setIsOpen(false)}
-        // fromYear={2000}
-        // toYear={new Date().getFullYear()}
-        // disabled={(date: Date) =>
-        //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
-        //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
-        // }
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
         />
       </div>
     </div>