@keboola/design 13.1.3 → 14.0.0

package/dist/Breadcrumb-BnIlsoIH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb-BnIlsoIH.js","names":[],"sources":["../src/components/Breadcrumb/BreadcrumbDropdownContext.ts","../src/components/Breadcrumb/BreadcrumbDropdownGroup.tsx","../src/components/Breadcrumb/BreadcrumbDropdownItem.tsx","../src/components/Breadcrumb/BreadcrumbLink.tsx","../src/components/Breadcrumb/BreadcrumbDropdown.tsx","../src/components/Breadcrumb/BreadcrumbEllipsis.tsx","../src/components/Breadcrumb/BreadcrumbItem.tsx","../src/components/Breadcrumb/BreadcrumbList.tsx","../src/components/Breadcrumb/BreadcrumbPage.tsx","../src/components/Breadcrumb/BreadcrumbSeparator.tsx","../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { createContext, isValidElement, useCallback, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\n\n/** A fold toggle, stamped so the later of two decides. */\nexport type BreadcrumbDropdownToggle = { expanded: boolean; at: number };\n\n/**\n * Toggles keyed by the query they were made under; `''` is no search.\n *\n * - Only the toggles of the current query apply, so a search starts with every match open.\n * - Holds `''` and the latest query only.\n */\nexport type BreadcrumbDropdownToggles = Readonly<Record<string, BreadcrumbDropdownToggle>>;\n\nexport const NO_TOGGLES: BreadcrumbDropdownToggles = {};\n\n/** Records `toggle` under `scope`, keeping the toggles made without a search. */\nexport const withToggle = (\n  toggles: BreadcrumbDropdownToggles,\n  scope: string,\n  toggle: BreadcrumbDropdownToggle,\n): BreadcrumbDropdownToggles => ({ ...(toggles[''] && { '': toggles[''] }), [scope]: toggle });\n\nexport type BreadcrumbDropdownContextValue = {\n  /** Current (trimmed, lowercased) filter query. Empty string = no filtering. */\n  query: string;\n  /** An ancestor group's label matched the query — descendants render regardless of their own match. */\n  forceVisible: boolean;\n  /** Filtering is off (`filter={false}` or `shouldFilter={false}`) — items never self-hide. */\n  filterDisabled: boolean;\n  /** Report this node's visibility to the parent scope. Returns the unregister cleanup. */\n  register: (id: string, visible: boolean) => () => void;\n  /** Close the panel (fired by items on select). */\n  close: () => void;\n  /** The last expand- or collapse-all per query; a group's own toggle after it wins. */\n  allExpanded: BreadcrumbDropdownToggles;\n  setAllExpanded: (expanded: boolean, scope: string) => void;\n  /** A stamp later than every earlier one, to order a group's own toggle against `allExpanded`. */\n  stamp: () => number;\n};\n\nexport const BreadcrumbDropdownContext = createContext<BreadcrumbDropdownContextValue | null>(null);\n\nexport const matchesQuery = (text: string, query: string) => text.toLowerCase().includes(query);\n\n/** Text content of a React tree — the default filter text when no `textValue` is given. */\nexport const getNodeText = (node: ReactNode): string => {\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getNodeText).join('');\n  if (isValidElement<{ children?: ReactNode }>(node)) return getNodeText(node.props.children);\n  return '';\n};\n\nexport const normalizeQuery = (query: string) => query.trim().toLowerCase();\n\n/**\n * Visibility registry for one filtering scope (the panel root, or one group). Items and groups\n * report their visibility here; `anyVisible` drives the group header / empty-state rendering.\n */\nexport const useMatchRegistry = () => {\n  const [matches, setMatches] = useState<ReadonlyMap<string, boolean>>(new Map());\n\n  const register = useCallback((id: string, visible: boolean) => {\n    setMatches((prev) => (prev.get(id) === visible ? prev : new Map(prev).set(id, visible)));\n    return () => {\n      setMatches((prev) => {\n        if (!prev.has(id)) return prev;\n        const next = new Map(prev);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n\n  const anyVisible = useMemo(() => [...matches.values()].some(Boolean), [matches]);\n\n  return { register, anyVisible };\n};\n","import { Children, use, useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { ChevronDown, ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\nimport { isToggleAllClick } from '../Tooltip/toggleAll';\nimport { ToggleAllTooltip } from '../Tooltip/ToggleAllTooltip';\n\nimport {\n  BreadcrumbDropdownContext,\n  type BreadcrumbDropdownToggles,\n  getNodeText,\n  matchesQuery,\n  NO_TOGGLES,\n  useMatchRegistry,\n  withToggle,\n} from './BreadcrumbDropdownContext';\n\nconst headerClass = cn(\n  // layout\n  'tw:flex',\n  'tw:w-full',\n  'tw:items-center',\n  'tw:gap-2',\n  'tw:box-border',\n\n  'tw:rounded-md',\n  'tw:border-none',\n  'tw:bg-transparent',\n  'tw:px-2',\n  'tw:py-1.5',\n  'tw:text-left',\n\n  // font — single line; wrap the label in `Truncated` (design system) for ellipsis + tooltip\n  'tw:text-sm',\n  'tw:font-medium',\n  'tw:text-foreground',\n  'tw:min-w-0',\n  'tw:overflow-hidden',\n\n  // icons\n  \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n  'tw:[&_svg]:shrink-0',\n);\n\nconst collapsibleHeaderClass = cn(\n  'tw:cursor-pointer',\n  'tw:hover:bg-hover',\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n);\n\ntype BreadcrumbDropdownGroupProps = {\n  /** Group header (e.g. bucket name + stage badge). */\n  label: ReactNode;\n  /**\n   * Text the built-in filter matches against. When the group label matches, all its items stay\n   * visible. Defaults to the label's rendered text content.\n   */\n  textValue?: string;\n  /** Render the header as a toggle that expands / collapses the group's items. Default `false`. */\n  collapsible?: boolean;\n  /** Initial expanded state for `collapsible` groups. Default `true`. */\n  defaultExpanded?: boolean;\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * A labelled group of `Breadcrumb.Dropdown.Item`s (e.g. one bucket with its tables). The group\n * hides itself when neither its label nor any child matches the filter query; an active query\n * opens collapsible groups, and a fold made under it lasts until the query changes. Non-empty `collapsible` groups toggle their items behind the\n * header with an animated expand / collapse; a `collapsible` group with no items renders a\n * non-interactive, greyed header that can't toggle.\n */\nexport const BreadcrumbDropdownGroup = ({\n  label,\n  textValue,\n  collapsible = false,\n  defaultExpanded = true,\n  className,\n  children,\n}: BreadcrumbDropdownGroupProps) => {\n  const parent = use(BreadcrumbDropdownContext);\n  if (!parent) {\n    throw new Error('Breadcrumb.Dropdown.Group must be rendered inside Breadcrumb.Dropdown');\n  }\n  const id = useId();\n  const { register: registerChild, anyVisible } = useMatchRegistry();\n  const [own, setOwn] = useState<BreadcrumbDropdownToggles>(NO_TOGGLES);\n\n  const text = textValue ?? getNodeText(label);\n  const filtering = !parent.filterDisabled && !!parent.query;\n  const scope = filtering ? parent.query : '';\n  // The later of this group's own toggle and the panel's expand- or collapse-all under this query.\n  const ownToggle = own[scope];\n  const allToggle = parent.allExpanded[scope];\n  const toggle = allToggle && (!ownToggle || allToggle.at > ownToggle.at) ? allToggle : ownToggle;\n  const labelMatched = filtering && matchesQuery(text, parent.query);\n  const visible = !filtering || parent.forceVisible || labelMatched || anyVisible;\n\n  useEffect(() => parent.register(id, visible), [parent, id, visible]);\n\n  const childContext = useMemo(\n    () => ({\n      query: parent.query,\n      forceVisible: parent.forceVisible || labelMatched,\n      filterDisabled: parent.filterDisabled,\n      register: registerChild,\n      close: parent.close,\n      allExpanded: parent.allExpanded,\n      setAllExpanded: parent.setAllExpanded,\n      stamp: parent.stamp,\n    }),\n    [parent, labelMatched, registerChild],\n  );\n\n  // A search opens every group; a fold made under it lasts until the query changes.\n  const isExpanded = !collapsible || (toggle ? toggle.expanded : filtering || defaultExpanded);\n  // A collapsible group with no items has nothing to toggle — render a non-interactive header.\n  // oxlint-disable-next-line react-x/no-children-count -- emptiness check, no child transformation\n  const isEmpty = Children.count(children) === 0;\n\n  return (\n    <div\n      className={cn('tw:flex tw:flex-col', className)}\n      style={visible ? undefined : { display: 'none' }}\n    >\n      {collapsible && isEmpty ? (\n        <span\n          aria-disabled\n          className={cn(\n            headerClass,\n            'tw:text-muted-foreground',\n            // Fade just the leading chevron lighter than the label text.\n            'tw:[&>svg:first-child]:opacity-50',\n          )}\n        >\n          <ChevronRight />\n          {label}\n        </span>\n      ) : collapsible && !isEmpty ? (\n        <button\n          type=\"button\"\n          aria-expanded={isExpanded}\n          className={cn(headerClass, collapsibleHeaderClass)}\n          onClick={(event) =>\n            isToggleAllClick(event)\n              ? parent.setAllExpanded(!isExpanded, scope)\n              : setOwn((prev) =>\n                  withToggle(prev, scope, { expanded: !isExpanded, at: parent.stamp() }),\n                )\n          }\n        >\n          <ToggleAllTooltip expanded={isExpanded}>\n            <span className=\"tw:inline-flex\">\n              {isExpanded ? <ChevronDown /> : <ChevronRight />}\n            </span>\n          </ToggleAllTooltip>\n          {label}\n        </button>\n      ) : (\n        <span className={headerClass}>{label}</span>\n      )}\n      <BreadcrumbDropdownContext value={childContext}>\n        {collapsible && !isEmpty ? (\n          // Animated expand / collapse via a CSS grid-rows transition (0fr ↔ 1fr). The children stay\n          // mounted while collapsed so the filter registry keeps receiving their visibility; `inert`\n          // + `aria-hidden` take the collapsed content out of the a11y tree and tab order. An active\n          // filter query force-expands (`isExpanded` includes `filtering`).\n          <div\n            className={cn(\n              'tw:grid tw:transition-[grid-template-rows] tw:duration-200 tw:ease-out',\n              'tw:motion-reduce:transition-none',\n              isExpanded ? 'tw:grid-rows-[1fr]' : 'tw:grid-rows-[0fr]',\n            )}\n          >\n            <div\n              className=\"tw:overflow-hidden\"\n              inert={!isExpanded}\n              aria-hidden={isExpanded ? undefined : true}\n            >\n              <div className=\"tw:flex tw:flex-col tw:pl-6\">{children}</div>\n            </div>\n          </div>\n        ) : (\n          <div\n            className=\"tw:flex tw:flex-col tw:pl-6\"\n            style={isExpanded ? undefined : { display: 'none' }}\n          >\n            {children}\n          </div>\n        )}\n      </BreadcrumbDropdownContext>\n    </div>\n  );\n};\n","import { use, useEffect, useId } from 'react';\nimport type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\nimport { BreadcrumbDropdownContext, getNodeText, matchesQuery } from './BreadcrumbDropdownContext';\n\nconst itemClass = cn(\n  // layout\n  'tw:flex',\n  'tw:w-full',\n  'tw:items-center',\n  'tw:gap-2',\n  'tw:box-border',\n\n  'tw:rounded-md',\n  'tw:border-none',\n  'tw:bg-transparent',\n  'tw:px-2',\n  'tw:py-1.5',\n  'tw:cursor-pointer',\n  'tw:text-left',\n\n  // font — single line; wrap the label in `Truncated` (design system) for ellipsis + tooltip\n  'tw:text-sm',\n  'tw:font-normal',\n  'tw:text-foreground',\n  'tw:no-underline',\n  'tw:min-w-0',\n  'tw:overflow-hidden',\n\n  // hover / active entity\n  'tw:hover:bg-hover',\n  'tw:data-[active]:bg-selected',\n  'tw:data-[active]:font-medium',\n\n  // focus\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n\n  // icons\n  \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n  'tw:[&_svg]:shrink-0',\n);\n\ntype BreadcrumbDropdownItemProps = ComponentProps<'button'> & {\n  /** Render the consumer's element (typically a router link) instead of a `button`. */\n  asChild?: boolean;\n  /**\n   * Text the built-in filter matches against. Defaults to the item's rendered text content\n   * (extracted recursively, so `asChild` links with icons work out of the box).\n   */\n  textValue?: string;\n  /** Marks the currently open entity (highlight + `aria-current`). */\n  active?: boolean;\n  /** Close the panel when the item is selected. Default `true`. */\n  closeOnSelect?: boolean;\n};\n\n/**\n * One selectable entity row inside `Breadcrumb.Dropdown`. Self-hides when it doesn't match the\n * panel's filter query and closes the panel on select. Use `asChild` to render a router link.\n */\nexport const BreadcrumbDropdownItem = ({\n  ref,\n  asChild = false,\n  textValue,\n  active = false,\n  closeOnSelect = true,\n  className,\n  children,\n  onClick,\n  ...props\n}: BreadcrumbDropdownItemProps) => {\n  const context = use(BreadcrumbDropdownContext);\n  if (!context) {\n    throw new Error('Breadcrumb.Dropdown.Item must be rendered inside Breadcrumb.Dropdown');\n  }\n  const id = useId();\n\n  const text = textValue ?? getNodeText(children);\n  const visible =\n    context.filterDisabled ||\n    !context.query ||\n    context.forceVisible ||\n    matchesQuery(text, context.query);\n\n  useEffect(() => context.register(id, visible), [context, id, visible]);\n\n  if (!visible) return null;\n\n  const Comp = asChild ? Slot : 'button';\n  return (\n    <Comp\n      ref={ref}\n      {...(asChild ? {} : { type: 'button' as const })}\n      data-active={active || undefined}\n      aria-current={active || undefined}\n      className={cn(itemClass, className)}\n      onClick={(event) => {\n        onClick?.(event);\n        if (closeOnSelect && !event.defaultPrevented) {\n          context.close();\n        }\n      }}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'a'> & {\n  asChild?: boolean;\n};\n\nexport const BreadcrumbLink = ({ ref, asChild = false, className, ...props }: Props) => {\n  const Comp = asChild ? Slot : 'a';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:gap-1.5',\n        // font\n        'tw:text-muted-foreground',\n        'tw:font-normal',\n        'tw:no-underline',\n\n        // hover\n        'tw:hover:text-foreground',\n\n        // focus\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-ring/50',\n        'tw:focus-visible:rounded-sm',\n\n        // Icon\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5',\n\n        // transition\n        'tw:transition-colors',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentRef, ReactNode } from 'react';\n\nimport { SearchInput } from '../../blocks/SearchInput';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport {\n  BreadcrumbDropdownContext,\n  type BreadcrumbDropdownToggles,\n  NO_TOGGLES,\n  normalizeQuery,\n  useMatchRegistry,\n  withToggle,\n} from './BreadcrumbDropdownContext';\nimport { BreadcrumbDropdownGroup } from './BreadcrumbDropdownGroup';\nimport { BreadcrumbDropdownItem } from './BreadcrumbDropdownItem';\nimport { BreadcrumbLink } from './BreadcrumbLink';\n\n// Chevron trigger, the only button in the crumb; no outline, only a hover / open background.\nconst chevronButtonClass = cn(\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n\n  'tw:rounded-md',\n  'tw:border-none',\n  'tw:bg-transparent',\n  'tw:cursor-pointer',\n  'tw:size-5',\n  'tw:text-muted-foreground',\n  'tw:transition-colors',\n  'tw:hover:bg-hover',\n  'tw:hover:text-foreground',\n  'tw:data-[state=open]:bg-hover',\n  'tw:data-[state=open]:text-foreground',\n\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n\n  'tw:[&_svg]:transition-transform',\n  'tw:[&[data-state=open]_svg]:rotate-180',\n);\n\n// Plain label: `BreadcrumbLink` typography without hover / focus, as it isn't interactive.\nconst plainLabelClass = cn(\n  'tw:flex',\n  'tw:items-center',\n  'tw:gap-1.5',\n  'tw:text-muted-foreground',\n  'tw:font-normal',\n  'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5',\n);\n\n// Fixed width per `size`, clamped to the viewport; long names truncate instead of widening it.\nconst PANEL_BASE = 'tw:max-h-[min(640px,var(--radix-popover-content-available-height))]';\n\nconst PANEL_WIDTH = {\n  small: 'tw:w-[min(360px,var(--radix-popover-content-available-width))]',\n  medium: 'tw:w-[min(440px,var(--radix-popover-content-available-width))]',\n  large: 'tw:w-[min(560px,var(--radix-popover-content-available-width))]',\n} as const;\n\ntype PanelSize = keyof typeof PANEL_WIDTH;\n\ntype BreadcrumbDropdownProps = {\n  /** Never the trigger. With `splitTrigger`, pass an anchor-like element so it navigates. */\n  label: ReactNode;\n  /** Renders `label` through `Breadcrumb.Link asChild`; default `false` (plain text). */\n  splitTrigger?: boolean;\n  /** Chevron's accessible name; defaults to `\"${label} menu\"`, or `\"Open menu\"` for a node label. */\n  triggerLabel?: string;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Panel width: `small` 360px, `medium` 440px (default), `large` 560px. */\n  size?: PanelSize;\n  /**\n   * Pinned filter input, focused on open; default on. Non-matching items / groups hide\n   * (by `textValue` / string content).\n   */\n  filter?: boolean;\n  /** `false` keeps the input but disables built-in matching; the consumer filters. */\n  shouldFilter?: boolean;\n  /** Controlled filter value. */\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  searchPlaceholder?: string;\n  /** Rendered when the built-in filter hides everything. Default `\"No results.\"`. */\n  emptyMessage?: ReactNode;\n  /** The panel's own classes, e.g. a background the search row shares with the list. */\n  panelClassName?: string;\n  /** `Breadcrumb.Dropdown.Group` / `Breadcrumb.Dropdown.Item` elements. */\n  children: ReactNode;\n};\n\n/**\n * Breadcrumb segment opening a filterable switcher of sibling entities.\n *\n * - Use on the leftmost segment with siblings worth switching between; at most one per breadcrumb.\n * - Not for row actions (`PageHeader.Detail` `overflowActions`) or a collapsed middle (`Ellipsis`).\n * - Render inside `Breadcrumb.Item` in place of `Breadcrumb.Link`.\n */\nexport const BreadcrumbDropdown = ({\n  label,\n  splitTrigger = false,\n  triggerLabel,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  size = 'medium',\n  filter = true,\n  shouldFilter = true,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search…',\n  emptyMessage = 'No results.',\n  panelClassName,\n  children,\n}: BreadcrumbDropdownProps) => {\n  const searchRef = useRef<ComponentRef<'input'>>(null);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [internalQuery, setInternalQuery] = useState('');\n  const stampRef = useRef(0);\n  const stamp = useCallback(() => ++stampRef.current, []);\n  const [allExpanded, setAllExpandedState] = useState<BreadcrumbDropdownToggles>(NO_TOGGLES);\n  const setAllExpanded = useCallback(\n    (expanded: boolean, scope: string) =>\n      setAllExpandedState((prev) => withToggle(prev, scope, { expanded, at: stamp() })),\n    [stamp],\n  );\n  const { register, anyVisible } = useMatchRegistry();\n\n  const isOpen = open ?? internalOpen;\n  // Reopening starts from each group's own default again, however the panel closed.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (!isOpen) setAllExpandedState(NO_TOGGLES);\n  }\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      setInternalOpen(nextOpen);\n      if (!nextOpen) setInternalQuery('');\n      onOpenChange?.(nextOpen);\n    },\n    [onOpenChange],\n  );\n  const close = useCallback(() => handleOpenChange(false), [handleOpenChange]);\n\n  const effectiveTriggerLabel =\n    triggerLabel ?? (typeof label === 'string' ? `${label} menu` : 'Open menu');\n\n  const rawQuery = searchValue ?? internalQuery;\n  const filterDisabled = !filter || !shouldFilter;\n  const query = filterDisabled ? '' : normalizeQuery(rawQuery);\n\n  const contextValue = useMemo(\n    () => ({\n      query,\n      forceVisible: false,\n      filterDisabled,\n      register,\n      close,\n      allExpanded,\n      setAllExpanded,\n      stamp,\n    }),\n    [query, filterDisabled, register, close, allExpanded, setAllExpanded, stamp],\n  );\n\n  return (\n    <Popover open={isOpen} onOpenChange={handleOpenChange}>\n      <span className=\"tw:flex tw:items-center tw:gap-0.5\">\n        {splitTrigger ? (\n          <BreadcrumbLink asChild>{label}</BreadcrumbLink>\n        ) : (\n          <span className={plainLabelClass}>{label}</span>\n        )}\n        <Popover.Trigger asChild>\n          <button type=\"button\" aria-label={effectiveTriggerLabel} className={chevronButtonClass}>\n            <ChevronDown className=\"tw:size-3.5\" />\n          </button>\n        </Popover.Trigger>\n      </span>\n      <Popover.Content\n        align=\"start\"\n        sideOffset={8}\n        collisionPadding={16}\n        data-size={size}\n        className={cn('tw:overflow-hidden tw:p-0', PANEL_BASE, PANEL_WIDTH[size], panelClassName)}\n        onOpenAutoFocus={\n          filter\n            ? (event) => {\n                event.preventDefault();\n                searchRef.current?.focus();\n              }\n            : undefined\n        }\n      >\n        {filter && (\n          <div\n            data-slot=\"breadcrumb-dropdown-search\"\n            className=\"tw:shrink-0 tw:border-0 tw:border-b tw:border-solid tw:border-border tw:p-2\"\n          >\n            <SearchInput\n              ref={searchRef}\n              value={rawQuery}\n              onValueChange={(value) => {\n                setInternalQuery(value);\n                onSearchChange?.(value);\n              }}\n              placeholder={searchPlaceholder}\n              allowClear\n              // Debounce only when the consumer filters itself (e.g. server-side).\n              disableDebounce={shouldFilter}\n            />\n          </div>\n        )}\n        <div className=\"tw:flex tw:flex-1 tw:flex-col tw:overflow-y-auto tw:p-2\">\n          <BreadcrumbDropdownContext value={contextValue}>{children}</BreadcrumbDropdownContext>\n          {!filterDisabled && !!query && !anyVisible && (\n            <span className=\"tw:px-2 tw:py-1.5 tw:text-sm tw:text-muted-foreground\">\n              {emptyMessage}\n            </span>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n};\n\nBreadcrumbDropdown.Item = BreadcrumbDropdownItem;\nBreadcrumbDropdown.Group = BreadcrumbDropdownGroup;\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const BreadcrumbEllipsis = ({ ref, className, ...props }: Props) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n\n      'tw:rounded-md',\n      'tw:border-none',\n      'tw:bg-transparent',\n      'tw:cursor-pointer',\n      'tw:text-muted-foreground',\n      'tw:transition-colors',\n      // Match the Breadcrumb.Dropdown chevron trigger: background + colour lift on hover / while the\n      // menu is open, so the two interactive breadcrumb affordances read consistently.\n      'tw:hover:bg-hover',\n      'tw:hover:text-foreground',\n      'tw:data-[state=open]:bg-hover',\n      'tw:data-[state=open]:text-foreground',\n\n      // focus\n      'tw:focus-visible:outline-hidden',\n      'tw:focus-visible:ring-2',\n      'tw:focus-visible:ring-ring/50',\n\n      'tw:p-1',\n      className,\n    )}\n    {...props}\n  >\n    <Ellipsis className=\"tw:size-4\" />\n    <span className=\"tw:sr-only\">More</span>\n  </button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const BreadcrumbItem = ({ className, ...props }: Props) => (\n  <li className={cn('tw:inline-flex', 'tw:items-center', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ol'>;\n\nexport const BreadcrumbList = ({ className, ...props }: Props) => (\n  <ol\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:flex-wrap',\n      'tw:items-center',\n      'tw:gap-2',\n      'tw:m-0',\n      'tw:p-0',\n\n      // font\n      'tw:break-words',\n      'tw:text-sm',\n      'tw:text-muted-foreground',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const BreadcrumbPage = ({ ref, className, ...props }: Props) => (\n  <span\n    ref={ref}\n    // Do not use the anchor, as this item is not clickable\n    // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn('tw:font-medium', 'tw:text-foreground', className)}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const BreadcrumbSeparator = ({ children, className, ...props }: Props) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n\n      'tw:aspect-square',\n      'tw:size-[15px]',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-2.5',\n      'tw:text-muted-foreground',\n      className,\n    )}\n    {...props}\n  >\n    {children ?? <span className=\"tw:select-none tw:text-sm tw:text-muted-foreground/50\">/</span>}\n  </li>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { BreadcrumbDropdown } from './BreadcrumbDropdown';\nimport { BreadcrumbEllipsis } from './BreadcrumbEllipsis';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport { BreadcrumbLink } from './BreadcrumbLink';\nimport { BreadcrumbList } from './BreadcrumbList';\nimport { BreadcrumbPage } from './BreadcrumbPage';\nimport { BreadcrumbSeparator } from './BreadcrumbSeparator';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Breadcrumb = ({ className, ...props }: Props) => (\n  <nav aria-label=\"breadcrumb\" className={cn('tailwindcss-preflight', className)} {...props} />\n);\n\nBreadcrumb.List = BreadcrumbList;\nBreadcrumb.Item = BreadcrumbItem;\nBreadcrumb.Link = BreadcrumbLink;\nBreadcrumb.Page = BreadcrumbPage;\nBreadcrumb.Separator = BreadcrumbSeparator;\nBreadcrumb.Ellipsis = BreadcrumbEllipsis;\nBreadcrumb.Dropdown = BreadcrumbDropdown;\n"],"mappings":"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"}

package/dist/{Button-B21oVcPU.js → Button-D2JqBAq7.js}

@@ -1,9 +1,135 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { Loader2 } from "./icons-wcA70iQx.js";
+import { mergeRefs } from "./internal/utils/mergeRefs.js";
+import { Loader2 } from "./icons-ZIeZXXS7.js";
+import { Fragment, createElement, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Root, Slottable } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button/motion.ts
+const ends = (animation) => Number.isFinite(animation.effect?.getComputedTiming().endTime);
+/** Runs `callback` once the finite `animations` have finished or been cancelled; returns a cancel. */
+const afterAnimations = (animations, callback) => {
+	let isCurrent = true;
+	Promise.allSettled(animations.filter(ends).map((animation) => animation.finished)).then(() => {
+		if (isCurrent) callback();
+	});
+	return () => {
+		isCurrent = false;
+	};
+};
+let waiting = /* @__PURE__ */ new Set();
+let framed = /* @__PURE__ */ new Set();
+let isTicking = false;
+const tick = () => {
+	for (const node of framed) if (node.isConnected) node.setAttribute("data-button-ready", "");
+	framed = waiting;
+	waiting = /* @__PURE__ */ new Set();
+	isTicking = framed.size > 0;
+	if (isTicking) requestAnimationFrame(tick);
+};
+/**
+* Sets `data-button-ready` on `node` two frames after it mounts, arming its entry animations.
+*
+* - One shared frame loop serves every Button mounting at once.
+* - Arming twice is a no-op, so a re-attached ref doesn't restart the countdown.
+*/
+const armMotion = (node) => {
+	if (node.hasAttribute("data-button-ready") || waiting.has(node) || framed.has(node)) return;
+	waiting.add(node);
+	if (!isTicking) {
+		isTicking = true;
+		requestAnimationFrame(tick);
+	}
+};
+//#endregion
+//#region src/components/Button/ButtonLabel.tsx
+const isText = (node) => typeof node === "string" || typeof node === "number";
+/** Milliseconds from a computed `transition-duration` such as `0.3s`. */
+const toMs = (duration) => parseFloat(duration) * (duration.endsWith("ms") ? 1 : 1e3);
+/**
+* A button's text, rolled over when it changes.
+*
+* - The new text rolls in; the old one stays absolutely positioned while it rolls out.
+* - The width animates from the old text's to the new one's, so neighbours slide instead of jumping.
+* - Motion lives in `styles.css` under `[data-slot='button-label']`.
+*/
+const ButtonLabel = ({ text }) => {
+	const ref = useRef(null);
+	const exitRef = useRef(null);
+	const interruptedWidthRef = useRef(null);
+	const [shown, setShown] = useState(text);
+	const [exiting, setExiting] = useState(null);
+	const [hasChanged, setHasChanged] = useState(false);
+	if (shown !== text) {
+		setShown(text);
+		setExiting(shown);
+		setHasChanged(true);
+	}
+	useLayoutEffect(() => {
+		const node = ref.current;
+		const from = interruptedWidthRef.current ?? exitRef.current?.offsetWidth;
+		interruptedWidthRef.current = null;
+		if (!node || !from || !node.closest("[data-button-ready]")) return;
+		const to = node.offsetWidth;
+		if (Math.abs(to - from) < .5 || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const { transitionDuration, transitionTimingFunction } = getComputedStyle(node);
+		const animation = node.animate?.([{
+			width: `${from}px`,
+			overflowX: "clip",
+			textAlign: "start"
+		}, {
+			width: `${to}px`,
+			overflowX: "clip",
+			textAlign: "start"
+		}], {
+			duration: toMs(transitionDuration),
+			easing: transitionTimingFunction
+		});
+		return () => {
+			if (animation?.playState === "running") interruptedWidthRef.current = node.offsetWidth;
+			animation?.cancel();
+		};
+	}, [text]);
+	useEffect(() => {
+		const node = exitRef.current;
+		if (!node) return;
+		return afterAnimations(node.getAnimations?.() ?? [], () => setExiting(null));
+	}, [exiting]);
+	if (!hasChanged) return text;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "button-label",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "button-label-text",
+			children: text
+		}, text), exiting !== null && /* @__PURE__ */ jsx("span", {
+			ref: exitRef,
+			"aria-hidden": true,
+			"data-slot": "button-label-exit",
+			children: exiting
+		}, exiting)]
+	});
+};
+/**
+* `children` with each run of text wrapped in a `ButtonLabel`.
+*
+* - Positions are kept: a joined run leaves `null` behind, so siblings keep their identity.
+* - Whitespace-only text stays bare: as a span it would become a flex item and take a gap.
+*/
+const withLabels = (children) => {
+	if (isValidElement(children) && children.type === Fragment) return withLabels(children.props.children);
+	const items = Array.isArray(children) ? children : [children];
+	const wrapped = items.map((item, index) => {
+		if (!isText(item)) return item;
+		if (index > 0 && isText(items[index - 1])) return null;
+		let text = "";
+		for (let i = index; i < items.length && isText(items[i]); i++) text += String(items[i]);
+		return text.trim() ? /* @__PURE__ */ jsx(ButtonLabel, { text }, index) : text;
+	});
+	return createElement(Fragment, null, ...wrapped);
+};
+//#endregion
 //#region src/components/Button/styles.ts
 const variants = cva([
 	"tailwindcss-preflight",
@@ -190,12 +316,12 @@ const argoVariants = cva([
 	"tw:!outline-hidden",
 	"tw:focus-visible:ring-2",
 	"tw:disabled:cursor-not-allowed",
-	"tw:disabled:opacity-50",
+	"tw:disabled:opacity-disabled",
 	"tw:active:opacity-60",
 	"tw:transition-all",
 	"tw:!no-underline",
 	"tw:aria-disabled:cursor-not-allowed",
-	"tw:aria-disabled:opacity-50",
+	"tw:aria-disabled:opacity-disabled",
 	"tw:shrink-0",
 	"tw:[&_svg]:pointer-events-none",
 	"tw:[&_svg]:shrink-0",
@@ -303,6 +429,12 @@ const argoVariants = cva([
 });
 //#endregion
 //#region src/components/Button/Button.tsx
+/** The children that render anything, looking through arrays and fragments. */
+const renderedChildren = (node) => {
+	if (Array.isArray(node)) return node.flatMap(renderedChildren);
+	if (isValidElement(node) && node.type === Fragment) return renderedChildren(node.props.children);
+	return node == null || typeof node === "boolean" || typeof node === "string" && !node.trim() ? [] : [node];
+};
 /**
 * Any user-initiated action; `size="icon-*"` with no children is the icon-only button.
 *
@@ -327,6 +459,57 @@ const Button = ({ ref, children, disabled = false, className, type = "button", i
 		block,
 		className
 	});
+	const content = asChild && isValidElement(children) ? children.props.children : children;
+	const rendered = renderedChildren(content);
+	const leadsWithElement = isValidElement(rendered[0]);
+	const elementTypes = rendered.flatMap((child) => isValidElement(child) ? [child.type] : []);
+	const [prev, setPrev] = useState({
+		leadsWithElement,
+		elementTypes
+	});
+	const [spinnerEnter, setSpinnerEnter] = useState(isLoading ? "fade" : null);
+	const [iconEnter, setIconEnter] = useState("fade");
+	const placement = isIconOnly ? "center" : leadsWithElement ? "leading" : "inline";
+	if (isLoading && !spinnerEnter) setSpinnerEnter(placement === "inline" && !prev.leadsWithElement ? "grow" : "fade");
+	const typesChanged = prev.elementTypes.length !== elementTypes.length || prev.elementTypes.some((type, index) => type !== elementTypes[index]);
+	if (typesChanged || prev.leadsWithElement !== leadsWithElement) setPrev({
+		leadsWithElement,
+		elementTypes
+	});
+	if (typesChanged) setIconEnter(elementTypes.length > prev.elementTypes.length && !isLoading && !spinnerEnter ? "grow" : "fade");
+	const spinnerRef = useRef(null);
+	useEffect(() => {
+		const node = spinnerRef.current;
+		if (isLoading || !node) return;
+		return afterAnimations(node.getAnimations?.() ?? [], () => setSpinnerEnter(null));
+	}, [isLoading]);
+	useLayoutEffect(() => {
+		const slot = spinnerRef.current;
+		const button = slot?.offsetParent;
+		if (!slot || !button || placement !== "leading") return;
+		const centre = () => {
+			const icon = slot.nextElementSibling;
+			if (!(icon instanceof SVGElement)) return;
+			const [iconBox, buttonBox] = [icon.getBoundingClientRect(), button.getBoundingClientRect()];
+			const scale = buttonBox.width / (button instanceof HTMLElement ? button.offsetWidth : 1) || 1;
+			const x = (iconBox.left - buttonBox.left + iconBox.width / 2) / scale - button.clientLeft;
+			slot.style.left = `${x - parseFloat(getComputedStyle(slot).width) / 2}px`;
+		};
+		centre();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(centre);
+		observer.observe(button);
+		return () => observer.disconnect();
+	}, [placement, spinnerEnter]);
+	const buttonRef = useRef(null);
+	const armRef = useCallback((node) => node ? armMotion(node) : void 0, []);
+	const mergedRef = useMemo(() => mergeRefs(ref, buttonRef, armRef), [ref, armRef]);
+	useEffect(() => {
+		const node = buttonRef.current;
+		if (iconEnter !== "grow" || !node) return;
+		const entries = [...node.querySelectorAll(":scope > svg")].flatMap((icon) => icon.getAnimations?.() ?? []);
+		return afterAnimations(entries, () => setIconEnter("fade"));
+	}, [iconEnter]);
 	const handleClick = (event) => {
 		if (event.currentTarget.tagName === "A" && disabled) {
 			event.preventDefault();
@@ -336,15 +519,24 @@ const Button = ({ ref, children, disabled = false, className, type = "button", i
 	};
 	return /* @__PURE__ */ jsxs(Comp, {
 		...buttonProps,
-		ref,
+		ref: mergedRef,
 		disabled,
 		"aria-disabled": buttonProps["aria-disabled"] ?? disabled,
 		"data-variant": variant,
 		"data-icon-only": isIconOnly,
+		"data-icon-enter": iconEnter,
 		type,
 		onClick: handleClick,
 		className: cn(classNames),
-		children: [isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }), /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })]
+		children: [spinnerEnter && /* @__PURE__ */ jsx("span", {
+			ref: spinnerRef,
+			"aria-hidden": true,
+			"data-slot": "button-spinner",
+			"data-state": isLoading ? "open" : "closed",
+			"data-placement": placement,
+			"data-enter": spinnerEnter,
+			children: /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" })
+		}), /* @__PURE__ */ jsx(Slottable, { children: asChild ? children : withLabels(children) })]
 	});
 };
 //#endregion
@@ -406,4 +598,4 @@ const ButtonInline = ({ ref, children, className, variant, color, type = "button
 //#endregion
 export { Button, ButtonInline, argoVariants };
 
-//# sourceMappingURL=Button-B21oVcPU.js.map
+//# sourceMappingURL=Button-D2JqBAq7.js.map

package/dist/Button-D2JqBAq7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-D2JqBAq7.js","names":[],"sources":["../src/components/Button/motion.ts","../src/components/Button/ButtonLabel.tsx","../src/components/Button/styles.ts","../src/components/Button/Button.tsx","../src/components/Button/ButtonInline.tsx"],"sourcesContent":["const ends = (animation: Animation) =>\n  Number.isFinite(animation.effect?.getComputedTiming().endTime);\n\n/** Runs `callback` once the finite `animations` have finished or been cancelled; returns a cancel. */\nexport const afterAnimations = (animations: Animation[], callback: () => void) => {\n  let isCurrent = true;\n  Promise.allSettled(animations.filter(ends).map((animation) => animation.finished)).then(() => {\n    if (isCurrent) callback();\n  });\n  return () => {\n    isCurrent = false;\n  };\n};\n\nlet waiting = new Set<Element>();\nlet framed = new Set<Element>();\nlet isTicking = false;\n\nconst tick = () => {\n  for (const node of framed) if (node.isConnected) node.setAttribute('data-button-ready', '');\n  framed = waiting;\n  waiting = new Set();\n  isTicking = framed.size > 0;\n  if (isTicking) requestAnimationFrame(tick);\n};\n\n/**\n * Sets `data-button-ready` on `node` two frames after it mounts, arming its entry animations.\n *\n * - One shared frame loop serves every Button mounting at once.\n * - Arming twice is a no-op, so a re-attached ref doesn't restart the countdown.\n */\nexport const armMotion = (node: Element) => {\n  if (node.hasAttribute('data-button-ready') || waiting.has(node) || framed.has(node)) return;\n  waiting.add(node);\n  if (!isTicking) {\n    isTicking = true;\n    requestAnimationFrame(tick);\n  }\n};\n","import {\n  createElement,\n  Fragment,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { afterAnimations } from './motion';\n\nconst isText = (node: ReactNode): node is string | number =>\n  typeof node === 'string' || typeof node === 'number';\n\n/** Milliseconds from a computed `transition-duration` such as `0.3s`. */\nconst toMs = (duration: string) => parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n\n/**\n * A button's text, rolled over when it changes.\n *\n * - The new text rolls in; the old one stays absolutely positioned while it rolls out.\n * - The width animates from the old text's to the new one's, so neighbours slide instead of jumping.\n * - Motion lives in `styles.css` under `[data-slot='button-label']`.\n */\nconst ButtonLabel = ({ text }: { text: string }) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const exitRef = useRef<HTMLSpanElement>(null);\n  const interruptedWidthRef = useRef<number | null>(null);\n  const [shown, setShown] = useState(text);\n  const [exiting, setExiting] = useState<string | null>(null);\n  const [hasChanged, setHasChanged] = useState(false);\n  if (shown !== text) {\n    setShown(text);\n    setExiting(shown);\n    setHasChanged(true);\n  }\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    // An interrupted animation's on-screen width, else the outgoing text's, still in the DOM.\n    const from = interruptedWidthRef.current ?? exitRef.current?.offsetWidth;\n    interruptedWidthRef.current = null;\n    if (!node || !from || !node.closest('[data-button-ready]')) return;\n\n    const to = node.offsetWidth;\n    if (\n      Math.abs(to - from) < 0.5 ||\n      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches\n    )\n      return;\n\n    const { transitionDuration, transitionTimingFunction } = getComputedStyle(node);\n    const animation = node.animate?.(\n      [\n        { width: `${from}px`, overflowX: 'clip', textAlign: 'start' },\n        { width: `${to}px`, overflowX: 'clip', textAlign: 'start' },\n      ],\n      { duration: toMs(transitionDuration), easing: transitionTimingFunction },\n    );\n    return () => {\n      if (animation?.playState === 'running') {\n        interruptedWidthRef.current = node.offsetWidth;\n      }\n      animation?.cancel();\n    };\n  }, [text]);\n\n  useEffect(() => {\n    const node = exitRef.current;\n    if (!node) return;\n    return afterAnimations(node.getAnimations?.() ?? [], () => setExiting(null));\n  }, [exiting]);\n\n  // Bare text until the first change, so an unchanged button keeps its markup.\n  if (!hasChanged) return text;\n\n  return (\n    <span ref={ref} data-slot=\"button-label\">\n      <span key={text} data-slot=\"button-label-text\">\n        {text}\n      </span>\n      {exiting !== null && (\n        <span key={exiting} ref={exitRef} aria-hidden data-slot=\"button-label-exit\">\n          {exiting}\n        </span>\n      )}\n    </span>\n  );\n};\n\n/**\n * `children` with each run of text wrapped in a `ButtonLabel`.\n *\n * - Positions are kept: a joined run leaves `null` behind, so siblings keep their identity.\n * - Whitespace-only text stays bare: as a span it would become a flex item and take a gap.\n */\nexport const withLabels = (children: ReactNode): ReactNode => {\n  if (isValidElement<{ children?: ReactNode }>(children) && children.type === Fragment) {\n    return withLabels(children.props.children);\n  }\n  const items = Array.isArray(children) ? children : [children];\n  const wrapped = items.map((item: ReactNode, index) => {\n    if (!isText(item)) return item;\n    if (index > 0 && isText(items[index - 1])) return null;\n\n    let text = '';\n    for (let i = index; i < items.length && isText(items[i]); i++) text += String(items[i]);\n    return text.trim() ? <ButtonLabel key={index} text={text} /> : text;\n  });\n  return createElement(Fragment, null, ...wrapped);\n};\n","import { cva } from 'class-variance-authority';\n\n// Opaque tints use `bg-[color-mix(in_oklab,rgb(var(--tint))_N%,rgb(var(--base)))]`, not `bg-<token>/N`.\n//\n// - `bg-<token>/N` mixes into `transparent`, showing whatever the button overlaps.\n// - Raw `--*` triples: `--color-*` exist at build time only; unresolved → `transparent`.\n// - Write the whole class literally — Tailwind scans source; assembled strings get no CSS.\n\nexport const variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/button',\n    'tw:border-box',\n\n    // layout\n    'tw:relative',\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-2',\n\n    // text — weight/tracking are brand tokens; only `keboola-legacy-*` brands uppercase\n    'tw:text-xs',\n    'tw:leading-5',\n    'tw:font-medium',\n    'tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome',\n    'tw:[[data-brand^=keboola-legacy]_&]:uppercase',\n\n    // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.\n    'tw:rounded',\n    'tw:border',\n    'tw:border-transparent',\n\n    // styling\n    'tw:shadow-none',\n    'tw:[a]:cursor-pointer', // explicitly set for anchor\n\n    'tw:focus-visible:outline',\n    'tw:focus-visible:outline-1',\n    'tw:focus-visible:-outline-offset-1',\n    'tw:focus-visible:outline-ring',\n    'tw:focus-visible:ring-4',\n    'tw:focus-visible:ring-ring/30',\n\n    // disabled\n    'tw:disabled:opacity-40',\n    'tw:disabled:cursor-not-allowed',\n\n    // anchor support\n    'tw:!no-underline',\n    'tw:aria-disabled:opacity-40',\n    'tw:aria-disabled:cursor-not-allowed',\n\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'primary',\n      block: false,\n    },\n    variants: {\n      block: {\n        true: ['tw:w-full'],\n      },\n      variant: {\n        primary: [\n          'tw:text-white',\n          'tw:bg-primary-500',\n\n          'tw:focus:text-white',\n          'tw:hover:text-white',\n          'tw:hover:not-disabled:bg-primary-600',\n          'tw:active:not-disabled:bg-primary-800',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-primary-500',\n        ],\n        secondary: [\n          'tw:text-white',\n          'tw:bg-secondary-500',\n\n          'tw:focus:text-white',\n          'tw:hover:text-white',\n          'tw:hover:not-disabled:bg-secondary-700',\n          'tw:active:not-disabled:bg-secondary-800',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-secondary-500',\n        ],\n        // Kai's actions: its gradient, three light pools drifting behind the label.\n        kai: [\n          'tw:bg-kai',\n          'tw:animate-kai-drift',\n          'tw:motion-reduce:animate-none',\n          'tw:text-white',\n          'tw:hover:text-white',\n          'tw:focus:text-white',\n          'tw:hover:not-disabled:brightness-110',\n          'tw:focus-visible:ring-ring/50',\n        ],\n        danger: [\n          'tw:text-white',\n          'tw:bg-error-500',\n\n          'tw:focus:text-white',\n          'tw:hover:text-white',\n          'tw:hover:not-disabled:bg-error-600',\n          'tw:active:not-disabled:bg-error-700',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-error-500',\n        ],\n        // Tokens, not the fixed neutral scale: a transparent button cannot assume a light page.\n        invisible: [\n          'tw:text-foreground',\n          'tw:bg-transparent',\n\n          'tw:focus:text-foreground',\n          'tw:hover:not-disabled:bg-muted',\n          'tw:hover:text-foreground',\n          'tw:active:not-disabled:bg-secondary',\n\n          // contrasting icon on hover/active\n          'tw:[&_svg]:text-neutral-400',\n          'tw:hover:not-disabled:[&_svg]:text-secondary-600',\n          'tw:active:not-disabled:[&_svg]:text-secondary-600',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-transparent',\n        ],\n        outline: [\n          'tw:text-foreground',\n          'tw:bg-card',\n          // border\n          'tw:!border-input',\n          'tw:hover:text-foreground',\n          'tw:focus:text-foreground',\n          // Hover/pressed are `muted-foreground` tints: `bg-muted` is 4/255 from `bg-card` in dark.\n          //\n          // - Fills mix into `--card`: unchanged on a card, opaque off one.\n          // - Border tints `transparent`: no `bg-clip-padding`, so it composites over the fill.\n          'tw:hover:not-disabled:!border-muted-foreground/60',\n          'tw:hover:not-disabled:bg-[color-mix(in_oklab,rgb(var(--muted-foreground))_15%,rgb(var(--card)))]',\n          'tw:active:not-disabled:bg-[color-mix(in_oklab,rgb(var(--muted-foreground))_35%,rgb(var(--card)))]',\n\n          // contrasting icon hover, same as invisible\n          'tw:[&_svg]:text-muted-foreground',\n          'tw:not-disabled:hover:[&_svg]:text-secondary-600',\n          'tw:active:not-disabled:[&_svg]:text-secondary-600',\n\n          // anchor disabled override\n          'tw:aria-disabled:!bg-card',\n          'tw:aria-disabled:!border-input',\n        ],\n\n        inline: [\n          'tw:text-foreground',\n          'tw:bg-transparent',\n          'tw:rounded-full',\n\n          'tw:[&_svg]:text-muted-foreground',\n          'tw:not-disabled:hover:[&_svg]:text-secondary-600',\n          'tw:not-disabled:focus:[&_svg]:text-secondary-600',\n        ],\n      },\n      size: {\n        medium: [\n          'tw:max-h-10',\n          'tw:min-h-10',\n          'tw:px-4',\n          'tw:py-2.5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n        ],\n        small: [\n          'tw:max-h-8',\n          'tw:min-h-8',\n          'tw:px-4',\n          'tw:py-1.5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n        ],\n        large: [\n          'tw:max-h-12',\n          'tw:min-h-12',\n          'tw:px-4',\n          'tw:py-3.5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n        ],\n\n        'icon-lg': ['tw:size-12', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-6'],\n        icon: ['tw:size-10', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        'icon-sm': ['tw:size-8', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        'icon-xs': ['tw:size-6', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        'icon-2xs': [\n          'tw:!inline-flex',\n          'tw:size-5',\n          'tw:max-h-5',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n        ],\n        'icon-3xs': ['tw:h-fit', 'tw:w-fit', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n      },\n    },\n  },\n);\n\nexport const argoVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    // layout\n    'tw:relative',\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:whitespace-nowrap',\n    'tw:gap-2',\n\n    // border\n    'tw:border',\n    'tw:border-transparent',\n    'tw:rounded-[var(--radius-lg,0.25rem)]',\n\n    // text\n    'tw:font-medium',\n    'tw:select-none',\n\n    // focus visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n\n    // disabled\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:opacity-disabled',\n    'tw:active:opacity-60',\n\n    'tw:transition-all',\n\n    // anchor support\n    'tw:!no-underline',\n    'tw:aria-disabled:cursor-not-allowed',\n    'tw:aria-disabled:opacity-disabled',\n\n    // icon\n    'tw:shrink-0',\n    'tw:[&_svg]:pointer-events-none',\n    'tw:[&_svg]:shrink-0',\n    \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n  ],\n  {\n    defaultVariants: {\n      variant: 'primary',\n      size: 'medium',\n    },\n    variants: {\n      block: {\n        true: ['tw:w-full'],\n      },\n      variant: {\n        primary: [\n          'tw:bg-primary',\n          'tw:text-primary-foreground',\n          'tw:[a]:hover:bg-primary/80',\n          'tw:hover:not-disabled:bg-primary/90',\n          'tw:hover:text-primary-foreground',\n          'tw:focus:text-primary-foreground',\n\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-ring/50',\n        ],\n        secondary: [\n          'tw:bg-primary/10',\n          'tw:text-primary',\n          'tw:hover:not-disabled:bg-primary/20',\n\n          'tw:focus-visible:border-primary',\n          'tw:focus-visible:ring-ring/50',\n        ],\n\n        // should be called \"destructive\" by Figma\n        // Kai's actions: its gradient, three light pools drifting behind the label.\n        kai: [\n          'tw:bg-kai',\n          'tw:animate-kai-drift',\n          'tw:motion-reduce:animate-none',\n          'tw:text-white',\n          'tw:hover:text-white',\n          'tw:focus:text-white',\n          'tw:hover:not-disabled:brightness-110',\n          'tw:focus-visible:ring-ring/50',\n        ],\n        danger: [\n          'tw:bg-destructive',\n          'tw:text-destructive-foreground',\n          'tw:hover:not-disabled:bg-destructive/90',\n          'tw:hover:text-destructive-foreground',\n          'tw:focus:text-destructive-foreground',\n\n          'tw:focus-visible:border-destructive',\n          'tw:focus-visible:ring-destructive/20',\n        ],\n        outline: [\n          'tw:!border-input',\n          'tw:bg-background',\n          'tw:bg-clip-padding',\n          // Semantic text color so the label/icon flips in dark mode (matches `invisible`).\n          'tw:text-foreground',\n          // Hover hue comes from the brand primary, not the fixed `accent` blue.\n          //\n          // - Fill mixes into `--background`: `bg-clip-padding` gives a translucent fill no backing.\n          // - The *chrome* border carries the state (fill is ~1.5:1); `--primary` is for `focus-visible`.\n          // - Border is solid, not a tint: its contrast would depend on the call site.\n          'tw:hover:not-disabled:bg-[color-mix(in_oklab,rgb(var(--primary))_10%,rgb(var(--background)))]',\n          'tw:hover:not-disabled:!border-muted-foreground',\n          'tw:hover:not-disabled:text-primary',\n          'tw:hover:active:bg-background',\n          'tw:focus-visible:!border-primary',\n          'tw:focus-visible:ring-ring/50',\n        ],\n\n        // should be called \"ghost\" by Figma\n        invisible: [\n          'tw:bg-transparent',\n          'tw:bg-clip-padding',\n          'tw:text-foreground',\n          'tw:hover:not-disabled:bg-primary/10',\n          'tw:hover:not-disabled:text-primary',\n          'tw:hover:not-disabled:border-primary/10',\n\n          'tw:focus-visible:ring-ring/50',\n        ],\n        // should be called \"link\" by Figma\n        inline: [\n          'tw:bg-transparent',\n          'tw:text-primary',\n          'tw:hover:underline',\n          'tw:hover:active:bg-transparent',\n          'tw:focus-visible:ring-ring/50',\n        ],\n      },\n      size: {\n        // should be called \"default\" by Figma\n        medium: ['tw:max-h-9', 'tw:py-2', 'tw:px-4', 'tw:text-sm'],\n        // should be called \"small\" by Figma\n        small: ['tw:max-h-8', 'tw:py-2', 'tw:px-3', 'tw:text-xs'],\n        // should be called \"large\" by Figma\n        large: ['tw:max-h-10', 'tw:py-2.5', 'tw:px-6', 'tw:text-sm'],\n\n        'icon-lg': ['tw:size-10'],\n        icon: ['tw:size-9'],\n        'icon-sm': ['tw:size-8'],\n        'icon-xs': ['tw:size-6'],\n        // unsupported in ARGO, remove when old design is gone\n        'icon-2xs': [],\n        'icon-3xs': [],\n      },\n    },\n  },\n);\n","import {\n  type ComponentProps,\n  Fragment,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Loader2 } from '../../icons';\nimport { cn, mergeRefs } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { withLabels } from './ButtonLabel';\nimport { afterAnimations, armMotion } from './motion';\nimport { argoVariants, variants } from './styles';\n\n/** Props for `Button`; icons are composed as children. */\ntype Props = {\n  /** Shows a spinner in place of the leading icon, or before the label when there is none. The caller still controls `disabled`. */\n  isLoading?: boolean;\n  /** Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element. */\n  asChild?: boolean;\n} & ComponentProps<'button'> &\n  VariantProps<typeof variants>;\n\n/** The children that render anything, looking through arrays and fragments. */\nconst renderedChildren = (node: ReactNode): ReactNode[] => {\n  if (Array.isArray(node)) return node.flatMap(renderedChildren);\n  if (isValidElement<{ children?: ReactNode }>(node) && node.type === Fragment) {\n    return renderedChildren(node.props.children);\n  }\n  const isBlank =\n    node == null || typeof node === 'boolean' || (typeof node === 'string' && !node.trim());\n  return isBlank ? [] : [node];\n};\n\n/**\n * Any user-initiated action; `size=\"icon-*\"` with no children is the icon-only button.\n *\n * - Not for: inline text links (`ButtonInline`), URL navigation (`Link`), action + dropdown (`SplitButton`).\n * - Wrap in `Tooltip` when icon-only or disabled; `Popconfirm` for destructive actions.\n *\n * @see RECIPES.md#disabled-button-tooltip\n * @see RECIPES.md#confirm-dialog\n */\nexport const Button = ({\n  ref,\n  children,\n  disabled = false,\n  className,\n  type = 'button',\n  isLoading = false,\n  asChild = false,\n  onClick,\n  variant = 'primary',\n  size = 'medium',\n  block = false,\n  ...buttonProps\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  const Comp = asChild ? Root : 'button';\n  const isIconOnly = String(size).startsWith('icon');\n  const classNames = renderArgo\n    ? argoVariants({ variant, size, block, className })\n    : variants({ size, variant, block, className });\n\n  const content =\n    asChild && isValidElement<{ children?: ReactNode }>(children)\n      ? children.props.children\n      : children;\n  const rendered = renderedChildren(content);\n  const leadsWithElement = isValidElement(rendered[0]);\n  const elementTypes = rendered.flatMap((child) => (isValidElement(child) ? [child.type] : []));\n\n  // The previous render's children, which decide how the spinner and a new icon enter.\n  const [prev, setPrev] = useState({ leadsWithElement, elementTypes });\n  const [spinnerEnter, setSpinnerEnter] = useState<'grow' | 'fade' | null>(\n    isLoading ? 'fade' : null,\n  );\n  const [iconEnter, setIconEnter] = useState<'grow' | 'fade'>('fade');\n  const placement = isIconOnly ? 'center' : leadsWithElement ? 'leading' : 'inline';\n\n  if (isLoading && !spinnerEnter) {\n    // `fade` also when the caller dropped its leading icon this render: the spinner takes that icon's place.\n    setSpinnerEnter(placement === 'inline' && !prev.leadsWithElement ? 'grow' : 'fade');\n  }\n  const typesChanged =\n    prev.elementTypes.length !== elementTypes.length ||\n    prev.elementTypes.some((type, index) => type !== elementTypes[index]);\n  if (typesChanged || prev.leadsWithElement !== leadsWithElement) {\n    setPrev({ leadsWithElement, elementTypes });\n  }\n  if (typesChanged) {\n    const isAdded = elementTypes.length > prev.elementTypes.length;\n    setIconEnter(isAdded && !isLoading && !spinnerEnter ? 'grow' : 'fade');\n  }\n\n  // The spinner stays mounted through its exit transition and unmounts when that ends.\n  const spinnerRef = useRef<HTMLSpanElement>(null);\n  useEffect(() => {\n    const node = spinnerRef.current;\n    if (isLoading || !node) return;\n    return afterAnimations(node.getAnimations?.() ?? [], () => setSpinnerEnter(null));\n  }, [isLoading]);\n\n  // A leading spinner is kept centred over the leading icon while the button resizes.\n  useLayoutEffect(() => {\n    const slot = spinnerRef.current;\n    const button = slot?.offsetParent;\n    if (!slot || !button || placement !== 'leading') return;\n    const centre = () => {\n      const icon = slot.nextElementSibling;\n      if (!(icon instanceof SVGElement)) return;\n      const [iconBox, buttonBox] = [icon.getBoundingClientRect(), button.getBoundingClientRect()];\n      const scale = buttonBox.width / (button instanceof HTMLElement ? button.offsetWidth : 1) || 1;\n      const x = (iconBox.left - buttonBox.left + iconBox.width / 2) / scale - button.clientLeft;\n      slot.style.left = `${x - parseFloat(getComputedStyle(slot).width) / 2}px`;\n    };\n    centre();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(centre);\n    observer.observe(button);\n    return () => observer.disconnect();\n  }, [placement, spinnerEnter]);\n\n  // `data-button-ready` arms the entry animations a frame after mount, so nothing animates on page load.\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const armRef = useCallback(\n    (node: HTMLButtonElement | null) => (node ? armMotion(node) : undefined),\n    [],\n  );\n  const mergedRef = useMemo(() => mergeRefs(ref, buttonRef, armRef), [ref, armRef]);\n\n  // `grow` lasts only through the entry, so a later rotation or swap keeps the default origin.\n  useEffect(() => {\n    const node = buttonRef.current;\n    if (iconEnter !== 'grow' || !node) return;\n    const entries = [...node.querySelectorAll(':scope > svg')].flatMap(\n      (icon) => icon.getAnimations?.() ?? [],\n    );\n    return afterAnimations(entries, () => setIconEnter('fade'));\n  }, [iconEnter]);\n\n  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n    const isAnchor = event.currentTarget.tagName === 'A';\n\n    // <a/> does not support disabled by default, and we cannot use pointer-events: none because cursor-not-allowed would not work.\n    if (isAnchor && disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClick?.(event);\n  };\n\n  return (\n    <Comp\n      {...buttonProps}\n      ref={mergedRef}\n      disabled={disabled}\n      // An explicit `aria-disabled` wins: unavailable yet focusable, unlike `disabled`.\n      aria-disabled={buttonProps['aria-disabled'] ?? disabled}\n      data-variant={variant}\n      // Icon-only flag; `ButtonGroup space=\"block\"` stretches only non-icon children.\n      data-icon-only={isIconOnly}\n      data-icon-enter={iconEnter}\n      type={type}\n      onClick={handleClick}\n      className={cn(classNames)}\n    >\n      {spinnerEnter && (\n        // Motion lives in `styles.css` under `[data-slot='button-spinner']`.\n        <span\n          ref={spinnerRef}\n          aria-hidden\n          data-slot=\"button-spinner\"\n          data-state={isLoading ? 'open' : 'closed'}\n          data-placement={placement}\n          data-enter={spinnerEnter}\n        >\n          <Loader2 className=\"tw:animate-spin\" />\n        </span>\n      )}\n      <Slottable>{asChild ? children : withLabels(children)}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst buttonInlineVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:gap-2',\n\n    'tw:underline-offset-2',\n\n    'tw:disabled:opacity-40',\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:text-neutral-500',\n    'tw:disabled:no-underline',\n    'tw:disabled:[&_svg]:text-neutral-400',\n\n    // Default size for nested Lucide icons; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      variant: 'link',\n      color: 'link',\n    },\n    variants: {\n      color: {\n        link: ['tw:text-primary', 'tw:hover:text-primary/90', 'tw:[&_svg]:text-primary'],\n        dark: ['tw:text-foreground tw:[&_svg]:text-muted-foreground'],\n        danger: ['tw:text-error-500 tw:[&_svg]:text-error-500'],\n        muted: ['tw:text-muted-foreground tw:[&_svg]:text-muted-foreground'],\n        custom: [],\n      },\n      variant: {\n        link: ['tw:underline', 'tw:hover:no-underline'],\n        'link-reverse': ['tw:no-underline', '', 'tw:hover:underline'],\n        custom: [],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> &\n  VariantProps<typeof buttonInlineVariants> & { asChild?: boolean };\n\nexport const ButtonInline = ({\n  ref,\n  children,\n  className,\n  variant,\n  color,\n  type = 'button',\n  asChild = false,\n  ...buttonProps\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n\n  return (\n    <Comp\n      {...buttonProps}\n      ref={ref}\n      type={asChild ? undefined : type}\n      className={buttonInlineVariants({ variant, color, className })}\n    >\n      {children}\n    </Comp>\n  );\n};\n"],"mappings":"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,KAAK,IAAI,oBAAC,aAAD,EAA+B,KAAO,GAApB,KAAoB,IAAI;CACjE,CAAC;CACD,OAAO,cAAc,UAAU,MAAM,GAAG,OAAO;AACjD;;;ACxGA,MAAa,WAAW,IACtB;CACE;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;AACF,GACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;CACT;CACA,UAAU;EACR,OAAO,EACL,MAAM,CAAC,WAAW,EACpB;EACA,SAAS;GACP,SAAS;IACP;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GACA,WAAW;IACT;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GAEA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IAEA;IACA;IACA;IACA;IAGA;GACF;GAEA,WAAW;IACT;IACA;IAEA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;IACA;IAKA;IACA;IACA;IAGA;IACA;IACA;IAGA;IACA;GACF;GAEA,QAAQ;IACN;IACA;IACA;IAEA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;GAEA,WAAW;IAAC;IAAc;IAAU;GAA4C;GAChF,MAAM;IAAC;IAAc;IAAU;GAA4C;GAC3E,WAAW;IAAC;IAAa;IAAU;GAA4C;GAC/E,WAAW;IAAC;IAAa;IAAU;GAA4C;GAC/E,YAAY;IACV;IACA;IACA;IACA;GACF;GACA,YAAY;IAAC;IAAY;IAAY;GAA4C;EACnF;CACF;AACF,CACF;AAEA,MAAa,eAAe,IAC1B;CACE;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;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"}

package/dist/{Calendar-DFtmZzbF.js → Calendar-BnKi1kPu.js}

@@ -1,5 +1,5 @@
 import { __exportAll } from "./rolldown-runtime-Bdc48AWt.js";
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region ../../node_modules/.pnpm/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/tzName/index.js
@@ -6740,7 +6740,7 @@ const rangePickerClassNames = {
 	range_start: `tw:bg-primary tw:rounded-r-none tw:font-medium tw:border-primary tw:hover:bg-primary/90 tw:hover:border-primary/90 tw:text-primary-foreground`,
 	range_end: `tw:bg-primary tw:rounded-l-none tw:font-medium tw:border-primary tw:hover:bg-primary/90 tw:hover:border-primary/90 tw:text-primary-foreground`,
 	selected: `tw:font-medium tw:rounded`,
-	range_middle: `tw:bg-accent tw:border-accent tw:text-accent-foreground tw:rounded-none tw:font-medium`
+	range_middle: `tw:bg-selected tw:border-selected tw:text-selected-foreground tw:rounded-none tw:font-medium`
 };
 const Calendar = ({ className, classNames, ...props }) => {
 	const defaultClassNames = getDefaultClassNames();
@@ -6750,7 +6750,7 @@ const Calendar = ({ className, classNames, ...props }) => {
 		className: cn(className, "tw:p-3"),
 		classNames: {
 			chevron: `${defaultClassNames.chevron} tw:fill-foreground`,
-			day: `${defaultClassNames.day} tw:hover:bg-accent tw:rounded`,
+			day: `${defaultClassNames.day} tw:hover:bg-hover tw:rounded`,
 			day_button: `${defaultClassNames.day_button} tw:rounded`,
 			today: `tw:bg-accent tw:text-accent-foreground tw:font-medium`,
 			...dayPickerClassNames,
@@ -6765,4 +6765,4 @@ Calendar.displayName = "Calendar";
 //#endregion
 export { Calendar };
 
-//# sourceMappingURL=Calendar-DFtmZzbF.js.map
+//# sourceMappingURL=Calendar-BnKi1kPu.js.map