@keboola/design 12.0.0 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (156) hide show
  1. package/AGENTS.md +12 -7
  2. package/CHANGELOG.md +91 -0
  3. package/COMPONENT-API.md +15 -5
  4. package/dist/{AIKit-BD4r7ff-.js → AIKit-DcOlHIBr.js} +22 -10
  5. package/dist/AIKit-DcOlHIBr.js.map +1 -0
  6. package/dist/{AlertModal-Th2khjPi.js → AlertModal-mbSnuuka.js} +5 -5
  7. package/dist/AlertModal-mbSnuuka.js.map +1 -0
  8. package/dist/{BrandEditor-BU23Vl8V.js → BrandEditor-Bkd6dhb8.js} +6 -6
  9. package/dist/{BrandEditor-BU23Vl8V.js.map → BrandEditor-Bkd6dhb8.js.map} +1 -1
  10. package/dist/{Breadcrumb-p9HtMLCc.js → Breadcrumb-BUoAZyhO.js} +2 -2
  11. package/dist/{Breadcrumb-p9HtMLCc.js.map → Breadcrumb-BUoAZyhO.js.map} +1 -1
  12. package/dist/{Button-Ca4Q3VJU.js → Button-B21oVcPU.js} +3 -4
  13. package/dist/Button-B21oVcPU.js.map +1 -0
  14. package/dist/{Card-Cr9MBNHu.js → Card-BQmBWHXl.js} +32 -4
  15. package/dist/Card-BQmBWHXl.js.map +1 -0
  16. package/dist/{ClipboardButton-DHa1trtI.js → ClipboardButton-srUgWgwH.js} +2 -2
  17. package/dist/{ClipboardButton-DHa1trtI.js.map → ClipboardButton-srUgWgwH.js.map} +1 -1
  18. package/dist/{CodeEditor-BSo-oLFG.js → CodeEditor-jZMw1ioj.js} +2 -2
  19. package/dist/{CodeEditor-BSo-oLFG.js.map → CodeEditor-jZMw1ioj.js.map} +1 -1
  20. package/dist/{ColorInput-DSMqrs2-.js → ColorInput-B3gBZ8Ya.js} +2 -2
  21. package/dist/{ColorInput-DSMqrs2-.js.map → ColorInput-B3gBZ8Ya.js.map} +1 -1
  22. package/dist/{ColorModeSwitch-D7EuWyJz.js → ColorModeSwitch-Bw9wMyoL.js} +2 -2
  23. package/dist/{ColorModeSwitch-D7EuWyJz.js.map → ColorModeSwitch-Bw9wMyoL.js.map} +1 -1
  24. package/dist/{Combobox-CxRAYOBt.js → Combobox-C_MTpQ1l.js} +21 -9
  25. package/dist/Combobox-C_MTpQ1l.js.map +1 -0
  26. package/dist/{Command-BU_cVurn.js → Command-BQPiZCNz.js} +2 -2
  27. package/dist/{Command-BU_cVurn.js.map → Command-BQPiZCNz.js.map} +1 -1
  28. package/dist/{CopyField-6_c-NdLO.js → CopyField-Ba7h8MqZ.js} +3 -3
  29. package/dist/CopyField-Ba7h8MqZ.js.map +1 -0
  30. package/dist/{DateInput-DyEErfJf.js → DateInput-D0nWUasV.js} +2 -2
  31. package/dist/{DateInput-DyEErfJf.js.map → DateInput-D0nWUasV.js.map} +1 -1
  32. package/dist/{DateRangeInput-Dg7-VUd9.js → DateRangeInput-i6wE45-V.js} +2 -2
  33. package/dist/{DateRangeInput-Dg7-VUd9.js.map → DateRangeInput-i6wE45-V.js.map} +1 -1
  34. package/dist/{DateRangePicker-BoPnh4aH.js → DateRangePicker-BAnuz6vO.js} +2 -2
  35. package/dist/{DateRangePicker-BoPnh4aH.js.map → DateRangePicker-BAnuz6vO.js.map} +1 -1
  36. package/dist/{FieldItem-2wMXQ0Qw.js → FieldItem-BHViBJS3.js} +2 -2
  37. package/dist/{FieldItem-2wMXQ0Qw.js.map → FieldItem-BHViBJS3.js.map} +1 -1
  38. package/dist/{FileUpload-C83tXuE2.js → FileUpload-Ch2hrIWq.js} +2 -2
  39. package/dist/{FileUpload-C83tXuE2.js.map → FileUpload-Ch2hrIWq.js.map} +1 -1
  40. package/dist/{Form-95rVLfX8.js → Form-VkzfVPyT.js} +5 -5
  41. package/dist/{Form-95rVLfX8.js.map → Form-VkzfVPyT.js.map} +1 -1
  42. package/dist/{FormGroup-CmNiAtU6.js → FormGroup-CmCppxOn.js} +3 -3
  43. package/dist/{FormGroup-CmNiAtU6.js.map → FormGroup-CmCppxOn.js.map} +1 -1
  44. package/dist/{FullScreenModal-CD7mYeTz.js → FullScreenModal-Cwnm8WdM.js} +2 -2
  45. package/dist/{FullScreenModal-CD7mYeTz.js.map → FullScreenModal-Cwnm8WdM.js.map} +1 -1
  46. package/dist/{InputGroup-B4QOPxHl.js → InputGroup-CrlMRz4X.js} +2 -2
  47. package/dist/{InputGroup-B4QOPxHl.js.map → InputGroup-CrlMRz4X.js.map} +1 -1
  48. package/dist/{MermaidDiagram-BQvz6bhv.js → MermaidDiagram-B30x2yV7.js} +2 -2
  49. package/dist/{MermaidDiagram-BQvz6bhv.js.map → MermaidDiagram-B30x2yV7.js.map} +1 -1
  50. package/dist/{Modal-Driyqs_N.js → Modal-BkSuS9Yz.js} +2 -2
  51. package/dist/{Modal-Driyqs_N.js.map → Modal-BkSuS9Yz.js.map} +1 -1
  52. package/dist/{MultiActionButtonGroup-BPnmzBtw.js → MultiActionButtonGroup-AWLj1Tg7.js} +2 -2
  53. package/dist/{MultiActionButtonGroup-BPnmzBtw.js.map → MultiActionButtonGroup-AWLj1Tg7.js.map} +1 -1
  54. package/dist/{PageToolbar-DOAtAnfL.js → PageToolbar-CIW0VmKe.js} +2 -2
  55. package/dist/{PageToolbar-DOAtAnfL.js.map → PageToolbar-CIW0VmKe.js.map} +1 -1
  56. package/dist/{Pagination-LaSg-5cl.js → Pagination-DH3f6LN0.js} +2 -2
  57. package/dist/{Pagination-LaSg-5cl.js.map → Pagination-DH3f6LN0.js.map} +1 -1
  58. package/dist/{Popconfirm-SLz0zodk.js → Popconfirm-Dhzn7sy6.js} +2 -2
  59. package/dist/{Popconfirm-SLz0zodk.js.map → Popconfirm-Dhzn7sy6.js.map} +1 -1
  60. package/dist/{SearchInput-CEfQDNl3.js → SearchInput-D3qMkHaW.js} +2 -2
  61. package/dist/{SearchInput-CEfQDNl3.js.map → SearchInput-D3qMkHaW.js.map} +1 -1
  62. package/dist/{SectionNav-B_qf0AXi.js → SectionNav-TU5i3JeM.js} +2 -2
  63. package/dist/{SectionNav-B_qf0AXi.js.map → SectionNav-TU5i3JeM.js.map} +1 -1
  64. package/dist/{Select-ByRvkZ3D.js → Select-B4uK0QVm.js} +4 -3
  65. package/dist/Select-B4uK0QVm.js.map +1 -0
  66. package/dist/{Sheet-C-yXk5Da.js → Sheet-D0fAE14T.js} +2 -2
  67. package/dist/{Sheet-C-yXk5Da.js.map → Sheet-D0fAE14T.js.map} +1 -1
  68. package/dist/{Sidebar-Ds0E6PbR.js → Sidebar-ZLMNIbg5.js} +3 -3
  69. package/dist/{Sidebar-Ds0E6PbR.js.map → Sidebar-ZLMNIbg5.js.map} +1 -1
  70. package/dist/{Slider-DWdu9NuM.js → Slider-B0ou9r0B.js} +2 -2
  71. package/dist/{Slider-DWdu9NuM.js.map → Slider-B0ou9r0B.js.map} +1 -1
  72. package/dist/{Tabs-Dt9oLYHC.js → Tabs-CTDmye1N.js} +2 -2
  73. package/dist/{Tabs-Dt9oLYHC.js.map → Tabs-CTDmye1N.js.map} +1 -1
  74. package/dist/{TextInput-CDG2XpBl.js → TextInput-BWYXbfs4.js} +2 -2
  75. package/dist/{TextInput-CDG2XpBl.js.map → TextInput-BWYXbfs4.js.map} +1 -1
  76. package/dist/{ThemeProvider-DXsxFg1U.js → ThemeProvider-VF38VfUa.js} +3 -3
  77. package/dist/{ThemeProvider-DXsxFg1U.js.map → ThemeProvider-VF38VfUa.js.map} +1 -1
  78. package/dist/{ZoomableSvg-BzXVfgnI.js → ZoomableSvg-C65nta_r.js} +3 -3
  79. package/dist/{ZoomableSvg-BzXVfgnI.js.map → ZoomableSvg-C65nta_r.js.map} +1 -1
  80. package/dist/editors.js +3 -3
  81. package/dist/flint.js +1 -1
  82. package/dist/index.d.ts +375 -375
  83. package/dist/index.js +37 -37
  84. package/dist/internal/blocks/AIKit.js +1 -1
  85. package/dist/internal/blocks/BrandEditor.js +1 -1
  86. package/dist/internal/blocks/ChartPanel.js +1 -1
  87. package/dist/internal/blocks/ChipEditor.js +1 -1
  88. package/dist/internal/blocks/ClipboardButton.js +1 -1
  89. package/dist/internal/blocks/ColorInput.js +1 -1
  90. package/dist/internal/blocks/ColorModeSwitch.js +1 -1
  91. package/dist/internal/blocks/Command.js +1 -1
  92. package/dist/internal/blocks/CopyField.js +1 -1
  93. package/dist/internal/blocks/DateInput.js +1 -1
  94. package/dist/internal/blocks/DateRangeInput.js +1 -1
  95. package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
  96. package/dist/internal/blocks/ExportMenu.js +1 -1
  97. package/dist/internal/blocks/Form/connectors/ComboboxField.js +2 -2
  98. package/dist/internal/blocks/Form/connectors/ComboboxField.js.map +1 -1
  99. package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
  100. package/dist/internal/blocks/Form/connectors/MultiComboboxField.js.map +1 -1
  101. package/dist/internal/blocks/Form.js +1 -1
  102. package/dist/internal/blocks/FormGroup.js +1 -1
  103. package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
  104. package/dist/internal/blocks/MultiCombobox.js +4 -5
  105. package/dist/internal/blocks/MultiCombobox.js.map +1 -1
  106. package/dist/internal/blocks/NumberInput.js +1 -1
  107. package/dist/internal/blocks/PageToolbar.js +1 -1
  108. package/dist/internal/blocks/PasswordInput.js +1 -1
  109. package/dist/internal/blocks/SearchInput.js +1 -1
  110. package/dist/internal/blocks/SearchInputWithNavigation.js +2 -2
  111. package/dist/internal/blocks/SectionNav.js +1 -1
  112. package/dist/internal/blocks/SplitButton.js +1 -1
  113. package/dist/internal/blocks/StatCard.js +1 -1
  114. package/dist/internal/blocks/TextInput.js +1 -1
  115. package/dist/internal/blocks/Textarea.js +1 -1
  116. package/dist/internal/blocks/TimeInput.js +1 -1
  117. package/dist/internal/components/AlertModal.js +1 -1
  118. package/dist/internal/components/Breadcrumb.js +1 -1
  119. package/dist/internal/components/Button.js +1 -1
  120. package/dist/internal/components/Card.js +1 -1
  121. package/dist/internal/components/CollapsiblePanel.js +1 -1
  122. package/dist/internal/components/CollapsiblePanel.js.map +1 -1
  123. package/dist/internal/components/Combobox.js +1 -1
  124. package/dist/internal/components/DateRangePicker.js +1 -1
  125. package/dist/internal/components/FileUpload.js +1 -1
  126. package/dist/internal/components/FullScreenModal.js +1 -1
  127. package/dist/internal/components/InputGroup.js +1 -1
  128. package/dist/internal/components/Modal.js +1 -1
  129. package/dist/internal/components/Pagination.js +1 -1
  130. package/dist/internal/components/Popconfirm.js +1 -1
  131. package/dist/internal/components/Select.js +1 -1
  132. package/dist/internal/components/Sheet.js +1 -1
  133. package/dist/internal/components/Sidebar.js +1 -1
  134. package/dist/internal/components/Slider.js +1 -1
  135. package/dist/internal/components/Tabs.js +1 -1
  136. package/dist/internal/components/ThemeProvider.js +2 -2
  137. package/dist/internal/components/ZoomableSvg.js +1 -1
  138. package/dist/internal/utils/accessibleName.js +11 -0
  139. package/dist/internal/utils/accessibleName.js.map +1 -0
  140. package/dist/markdown-editor.js +4 -4
  141. package/dist/mermaid.js +1 -1
  142. package/dist/rjsf.js +7 -7
  143. package/dist/styles.css +1 -1
  144. package/dist/testing.js +3 -4
  145. package/dist/testing.js.map +1 -1
  146. package/package.json +23 -23
  147. package/src/theme.css +6 -1
  148. package/dist/AIKit-BD4r7ff-.js.map +0 -1
  149. package/dist/AlertModal-Th2khjPi.js.map +0 -1
  150. package/dist/Button-Ca4Q3VJU.js.map +0 -1
  151. package/dist/Card-Cr9MBNHu.js.map +0 -1
  152. package/dist/Combobox-CxRAYOBt.js.map +0 -1
  153. package/dist/CopyField-6_c-NdLO.js.map +0 -1
  154. package/dist/Select-ByRvkZ3D.js.map +0 -1
  155. package/dist/internal/components/StatusDot.js +0 -60
  156. package/dist/internal/components/StatusDot.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"BrandEditor-BU23Vl8V.js","names":[],"sources":["../src/blocks/BrandEditor/color.ts","../src/blocks/BrandEditor/ColorField.tsx","../src/blocks/BrandEditor/contrast.ts","../src/blocks/BrandEditor/ControlSection.tsx","../src/blocks/BrandEditor/LogoField.tsx","../src/blocks/BrandEditor/TextField.tsx","../src/blocks/BrandEditor/BrandEditor.tsx"],"sourcesContent":["// Brand colours are stored as space-separated \"R G B\" channel strings (see\n// `rgbChannelsSchema` in @keboola/brand-registry); `ColorInput` speaks hex.\n// These helpers convert at that boundary.\n\nexport const hexToChannels = (hex: string): string => {\n let h = hex.trim().replace(/^#/, '');\n // Expand 3/4-digit shorthand and drop alpha (4- and 8-digit `#rgba`/`#rrggbbaa`) — brand\n // channels carry no alpha. Anything else is malformed → fall back to black.\n if (h.length === 3 || h.length === 4) {\n h = h\n .slice(0, 3)\n .split('')\n .map((c) => c + c)\n .join('');\n } else if (h.length === 8) {\n h = h.slice(0, 6);\n }\n if (!/^[0-9a-fA-F]{6}$/.test(h)) return '0 0 0';\n const n = parseInt(h, 16);\n return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;\n};\n\nexport const channelsToHex = (channels: string): string => {\n const [r = 0, g = 0, b = 0] = channels\n .trim()\n .split(/\\s+/)\n .map((n) => Number(n) || 0);\n const to2 = (v: number) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0');\n return `#${to2(r)}${to2(g)}${to2(b)}`;\n};\n","import { Label } from '../../components/Label';\nimport { ColorInput } from '../ColorInput';\n\nimport { channelsToHex, hexToChannels } from './color';\n\ntype Props = {\n id: string;\n label: string;\n /** Current value as an \"R G B\" channel string. */\n channels: string;\n /** Called with a new \"R G B\" channel string when a valid colour is picked. */\n onChange: (channels: string) => void;\n};\n\n// ColorInput fires `onValueChange` on every keystroke (it only coerces on blur), so commit a\n// channel value only for a COMPLETE 3-, 4-, 6-, or 8-digit hex — otherwise a partial \"#1\"/\"#\"\n// would write unintended channels. Alpha (4-/8-digit) is truncated to RGB, since brand tokens\n// carry no alpha.\nconst COMPLETE_HEX = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\n\n/** A labelled hex colour picker bound to a brand token (stored as RGB channels). */\nexport const ColorField = ({ id, label, channels, onChange }: Props) => {\n const hex = channelsToHex(channels);\n\n return (\n <div className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {label}\n </Label>\n <ColorInput\n id={id}\n sizing=\"medium\"\n value={hex}\n className=\"tw:w-36\"\n onValueChange={(next) => {\n const clean = next.trim().replace(/^#/, '');\n // Commit only complete hex (hexToChannels handles the 3/6/8-digit shapes + alpha drop).\n if (COMPLETE_HEX.test(clean)) onChange(hexToChannels(`#${clean}`));\n }}\n />\n </div>\n );\n};\n","// WCAG contrast helpers over `\"R G B\"` channel strings (the brand token format).\n\n// Coerce non-numeric/blank channels to 0 and clamp to the valid 0–255 range, so a malformed\n// token (e.g. \"999 999 999\") can neither NaN-out nor push luminance past WCAG's expected bounds.\nconst clampChannel = (n: number): number =>\n Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : 0;\n\nconst parseChannels = (channels: string): [number, number, number] => {\n const [r = 0, g = 0, b = 0] = channels\n .trim()\n .split(/\\s+/)\n .map((n) => clampChannel(Number(n)));\n return [r, g, b];\n};\n\nconst relativeLuminance = (channels: string): number => {\n // Destructure with defaults (not an `as` assertion) so `r`/`g`/`b` are `number` under\n // `noUncheckedIndexedAccess` without a production-code type cast.\n const [r = 0, g = 0, b = 0] = parseChannels(channels).map((c) => {\n const s = c / 255;\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\n/** WCAG contrast ratio (1–21) between two `\"R G B\"` colours. */\nexport const contrastRatio = (fg: string, bg: string): number => {\n const l1 = relativeLuminance(fg);\n const l2 = relativeLuminance(bg);\n const [lighter, darker] = l1 >= l2 ? [l1, l2] : [l2, l1];\n return (lighter + 0.05) / (darker + 0.05);\n};\n\n/** WCAG level for normal-size text at a given ratio. */\nexport const wcagLevel = (ratio: number): 'AAA' | 'AA' | 'fail' =>\n ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : 'fail';\n","import type { ReactNode } from 'react';\n\ntype Props = {\n title: string;\n children: ReactNode;\n};\n\n/** A titled block inside `BrandEditor`. */\nexport const ControlSection = ({ title, children }: Props) => (\n <section className=\"tw:flex tw:flex-col tw:gap-3 tw:border-b tw:border-border tw:p-4\">\n <h3 className=\"tw:m-0 tw:text-xs tw:font-semibold tw:uppercase tw:tracking-wide tw:text-muted-foreground\">\n {title}\n </h3>\n {children}\n </section>\n);\n","import { Label } from '../../components/Label';\nimport { Textarea } from '../Textarea';\n\ntype Props = {\n id: string;\n label: string;\n /** Current logo source: SVG markup, a `data:` URI, or an `http(s)` URL. */\n value: string;\n /** Called with the new source (empty string clears the slot). */\n onChange: (value: string) => void;\n};\n\n/** A labelled multi-line field for a brand logo source. */\nexport const LogoField = ({ id, label, value, onChange }: Props) => (\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {label}\n </Label>\n <Textarea\n id={id}\n value={value}\n onValueChange={onChange}\n maxRows={4}\n placeholder=\"<svg…>, a data: URI, or an https:// URL\"\n className=\"tw:font-mono tw:text-xs\"\n />\n </div>\n);\n","import { Label } from '../../components/Label';\nimport { TextInput } from '../TextInput';\n\ntype Props = {\n id: string;\n label: string;\n /** Current CSS value (empty clears the token, falling back to the stylesheet default). */\n value: string;\n /** Called with the new CSS value on change. */\n onChange: (value: string) => void;\n /** The inherited default, shown as placeholder when the field is empty. */\n placeholder?: string;\n};\n\n/** A labelled single-line field for a free-form CSS-value token (shadow, motion, gradient). */\nexport const TextField = ({ id, label, value, onChange, placeholder }: Props) => (\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {label}\n </Label>\n <TextInput\n id={id}\n sizing=\"small\"\n value={value}\n onValueChange={onChange}\n placeholder={placeholder}\n className=\"tw:font-mono tw:text-xs\"\n />\n </div>\n);\n","import { useId, useMemo } from 'react';\nimport DOMPurify from 'dompurify';\n\nimport type { Brand } from '@keboola/brand-registry';\nimport { keboola } from '@keboola/brand-registry';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Collapsible } from '../../components/Collapsible';\nimport { Label } from '../../components/Label';\nimport { Select } from '../../components/Select';\nimport { Slider } from '../../components/Slider';\nimport { ToggleGroup } from '../../components/ToggleGroup';\n\nimport { ColorField } from './ColorField';\nimport { contrastRatio, wcagLevel } from './contrast';\nimport { ControlSection } from './ControlSection';\nimport { LogoField } from './LogoField';\nimport { TextField } from './TextField';\n\nexport type ColorSlot = keyof Omit<NonNullable<Brand['theme']['colors']>, 'sidebar' | 'chart'>;\nexport type SidebarSlot = keyof NonNullable<NonNullable<Brand['theme']['colors']>['sidebar']>;\nexport type ChartSlot = keyof NonNullable<NonNullable<Brand['theme']['colors']>['chart']>;\nexport type RadiusSize = keyof NonNullable<Brand['theme']['radii']>;\n\ntype Typography = NonNullable<Brand['theme']['typography']>;\ntype FontFace = 'fontFamily' | 'fontDisplay' | 'fontMono';\ntype FontWeightSlot = keyof NonNullable<Typography['weight']>;\ntype ShadowSlot = keyof NonNullable<Brand['theme']['shadows']>;\ntype SpacingSlot = keyof NonNullable<Brand['theme']['spacing']>;\ntype MotionSlot = keyof NonNullable<Brand['theme']['motion']>;\n\nexport const DEFAULT_FALLBACK_FONT = \"'Inter', system-ui, sans-serif\";\n\nexport const DEFAULT_FONT_OPTIONS: { value: string; label: string }[] = [\n { value: DEFAULT_FALLBACK_FONT, label: 'Inter (default)' },\n { value: \"'Space Grotesk', system-ui, sans-serif\", label: 'Space Grotesk' },\n { value: \"'Poppins', system-ui, sans-serif\", label: 'Poppins' },\n { value: \"'Manrope', system-ui, sans-serif\", label: 'Manrope' },\n { value: \"'Quicksand', system-ui, sans-serif\", label: 'Quicksand' },\n { value: \"'Baloo 2', system-ui, sans-serif\", label: 'Baloo 2' },\n { value: \"'Fraunces', Georgia, serif\", label: 'Fraunces (serif)' },\n { value: \"Georgia, 'Times New Roman', serif\", label: 'Georgia (serif)' },\n { value: \"'JetBrains Mono', ui-monospace, monospace\", label: 'JetBrains Mono' },\n { value: 'system-ui, sans-serif', label: 'System UI' },\n];\n\n// Label maps double as a compile-time exhaustiveness guard: typed as\n// `Record<ColorSlot, string>` / `Record<SidebarSlot, string>`, a new token added\n// to the upstream `Brand` schema fails to compile here until it gets a control,\n// so it can't silently drift out of the editor. Insertion order is display order.\nconst COLOR_LABELS: Record<ColorSlot, string> = {\n primary: 'Primary',\n primaryForeground: 'Primary foreground',\n background: 'Background',\n foreground: 'Foreground',\n card: 'Card',\n cardForeground: 'Card foreground',\n popover: 'Popover',\n popoverForeground: 'Popover foreground',\n secondary: 'Secondary',\n secondaryForeground: 'Secondary foreground',\n muted: 'Muted',\n mutedForeground: 'Muted foreground',\n accent: 'Accent',\n accentForeground: 'Accent foreground',\n border: 'Border',\n input: 'Input border',\n inputBackground: 'Input background',\n ring: 'Ring',\n ringOffset: 'Ring offset',\n destructive: 'Destructive',\n destructiveForeground: 'Destructive foreground',\n success: 'Success',\n successForeground: 'Success foreground',\n warning: 'Warning',\n warningForeground: 'Warning foreground',\n info: 'Info',\n infoForeground: 'Info foreground',\n};\n\nconst SIDEBAR_LABELS: Record<SidebarSlot, string> = {\n sidebar: 'Sidebar',\n sidebarForeground: 'Foreground',\n sidebarPrimary: 'Primary',\n sidebarPrimaryForeground: 'Primary foreground',\n sidebarAccent: 'Accent',\n sidebarAccentForeground: 'Accent foreground',\n sidebarBorder: 'Border',\n sidebarRing: 'Ring',\n};\n\nconst CHART_LABELS: Record<ChartSlot, string> = {\n chart1: 'Chart 1',\n chart2: 'Chart 2',\n chart3: 'Chart 3',\n chart4: 'Chart 4',\n chart5: 'Chart 5',\n};\n\nconst WEIGHT_LABELS: Record<FontWeightSlot, string> = {\n normal: 'Normal',\n medium: 'Medium',\n semibold: 'Semibold',\n bold: 'Bold',\n};\n\nconst SHADOW_LABELS: Record<ShadowSlot, string> = {\n sm: 'Small',\n md: 'Medium',\n lg: 'Large',\n lift: 'Lift (raised)',\n};\n\nconst SPACING_LABELS: Record<SpacingSlot, string> = {\n gutter: 'Gutter (between sections)',\n inset: 'Inset (in-container)',\n};\n\nconst MOTION_LABELS: Record<MotionSlot, string> = {\n duration: 'Duration',\n easing: 'Easing',\n};\n\nconst COLOR_SLOTS = Object.keys(COLOR_LABELS) as ColorSlot[];\nconst SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS) as SidebarSlot[];\nconst CHART_SLOTS = Object.keys(CHART_LABELS) as ChartSlot[];\nconst WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS) as FontWeightSlot[];\nconst SHADOW_SLOTS = Object.keys(SHADOW_LABELS) as ShadowSlot[];\nconst SPACING_SLOTS = Object.keys(SPACING_LABELS) as SpacingSlot[];\nconst MOTION_SLOTS = Object.keys(MOTION_LABELS) as MotionSlot[];\nconst RADIUS_SIZES: RadiusSize[] = ['sm', 'md', 'lg'];\n\n// Foreground/background pairs whose contrast decides everyday legibility.\nconst A11Y_PAIRS: { label: string; fg: ColorSlot; bg: ColorSlot }[] = [\n { label: 'Text on background', fg: 'foreground', bg: 'background' },\n { label: 'Text on card', fg: 'cardForeground', bg: 'card' },\n { label: 'Primary button', fg: 'primaryForeground', bg: 'primary' },\n { label: 'Muted text', fg: 'mutedForeground', bg: 'muted' },\n { label: 'Accent', fg: 'accentForeground', bg: 'accent' },\n];\n\n// Fallback sidebar palette — the `keboola` brand doesn't set `colors.sidebar` /\n// `colorsDark.sidebar`, so a slot needs a value to seed from when a user starts\n// editing sidebar tokens on a brand that leaves them unset.\nconst DEFAULT_SIDEBAR: Record<'light' | 'dark', Record<SidebarSlot, string>> = {\n light: {\n sidebar: '255 255 255',\n sidebarForeground: '30 41 59',\n sidebarPrimary: '31 143 255',\n sidebarPrimaryForeground: '255 255 255',\n sidebarAccent: '219 234 254',\n sidebarAccentForeground: '30 41 59',\n sidebarBorder: '229 231 235',\n sidebarRing: '31 143 255',\n },\n dark: {\n sidebar: '14 14 18',\n sidebarForeground: '229 230 236',\n sidebarPrimary: '31 143 255',\n sidebarPrimaryForeground: '255 255 255',\n sidebarAccent: '38 38 45',\n sidebarAccentForeground: '229 230 236',\n sidebarBorder: '48 49 57',\n sidebarRing: '31 143 255',\n },\n};\n\nconst DEFAULT_RADII: NonNullable<Brand['theme']['radii']> = {\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n};\n\n// The `@keboola/design/styles` categorical chart palette — seeds the chart\n// pickers when a brand leaves `colors.chart` / `colorsDark.chart` unset.\nconst DEFAULT_CHART: Record<'light' | 'dark', Record<ChartSlot, string>> = {\n light: {\n chart1: '31 143 255',\n chart2: '0 194 135',\n chart3: '146 92 255',\n chart4: '245 147 0',\n chart5: '237 94 223',\n },\n dark: {\n chart1: '92 173 255',\n chart2: '0 230 161',\n chart3: '173 133 255',\n chart4: '255 190 92',\n chart5: '242 140 232',\n },\n};\n\n// Chrome font-weight defaults (the Tailwind scale `@keboola/design` falls back to\n// when `typography.weight` is unset) — seed values for the weight sliders.\nconst DEFAULT_FONT_WEIGHTS: Record<FontWeightSlot, string> = {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n};\n\n// Chrome tracking default (behind the hardcoded `tw:tracking-[1px]`).\nconst DEFAULT_LETTER_SPACING = '1px';\n\n// The monospace stack the mono-face Select falls back to when `fontMono` is unset\n// (matches the `DEFAULT_FONT_OPTIONS` JetBrains Mono entry).\nconst MONO_FALLBACK = \"'JetBrains Mono', ui-monospace, monospace\";\n\n// `@keboola/design/styles` defaults for the advanced token groups, shown as\n// placeholders so an unset field reveals the value it inherits.\nconst DEFAULT_SHADOWS: Record<ShadowSlot, string> = {\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n lift: '0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06)',\n};\n\nconst DEFAULT_SPACING: Record<SpacingSlot, string> = {\n gutter: '1.5rem',\n inset: '1.5rem',\n};\n\nconst DEFAULT_MOTION: Record<MotionSlot, string> = {\n duration: '200ms',\n easing: 'cubic-bezier(0.2, 0.7, 0.2, 1)',\n};\n\nconst DEFAULT_GRADIENT =\n 'linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent, var(--primary))))';\n\n// Leading numeric value of a token string (font-weight \"500\").\nconst numOf = (value: string, fallback: number): number => {\n const n = Number.parseFloat(value);\n return Number.isFinite(n) ? n : fallback;\n};\n\n// Letter-spacing may be px or em. Drive the slider in px (treating `em` as ×16,\n// like the radius slider treats `rem`) and write back in the value's original\n// unit, so an `em`-authored brand (e.g. `0.02em`) stays `em` instead of being\n// silently rewritten to `px`.\nconst letterSpacingToPx = (value: string): number => {\n const n = Number.parseFloat(value);\n if (!Number.isFinite(n)) return 0;\n return value.trim().endsWith('em') ? n * 16 : n;\n};\n\nconst pxToLetterSpacing = (px: number, currentValue: string): string =>\n currentValue.trim().endsWith('em') ? `${Number((px / 16).toFixed(3))}em` : `${px}px`;\n\n// The Brand schema allows any CSS length for radii (`rem`, `px`, unitless). Convert to px for\n// the slider treating `rem` as ×16 and everything else as already-px, and write back preserving\n// the slot's original unit so `8px` stays `8px`, `0.5rem` stays `0.5rem`, and a unitless `8` stays `8`.\nconst lengthToPx = (value: string): number => {\n const n = Number.parseFloat(value);\n if (!Number.isFinite(n)) return 0;\n return Math.round(value.trim().endsWith('rem') ? n * 16 : n);\n};\n\nconst pxToLength = (px: number, currentValue: string): string => {\n const trimmed = currentValue.trim();\n if (trimmed.endsWith('rem')) return `${px / 16}rem`;\n // Preserve a unitless token (the schema allows it) rather than forcing `px` onto it.\n if (/^-?\\d*\\.?\\d+$/.test(trimmed)) return `${px}`;\n return `${px}px`;\n};\n\nexport type BrandEditorProps = {\n value: Brand;\n onChange: (next: Brand) => void;\n /** Palette being edited. Controlled. Default 'light'. */\n colorScheme?: 'light' | 'dark';\n /** If provided, the editor shows a light/dark toggle that calls this. If omitted, no toggle. */\n onColorSchemeChange?: (scheme: 'light' | 'dark') => void;\n /** Font choices for the typography Select. Defaults to DEFAULT_FONT_OPTIONS. */\n fontOptions?: { value: string; label: string }[];\n};\n\n// Match `BrandLogo`'s sniffing: any string starting with `<` is inline markup (covers\n// `<?xml …?><svg>` / `<!doctype …>` prefixes); only `data:` / `http(s)://` are image URLs.\nconst isSvgMarkup = (source: string) => source.trimStart().startsWith('<');\nconst isImageSource = (source: string) => /^(data:|https?:\\/\\/)/.test(source.trim());\n\n/** Renders a logo source (SVG markup, `data:` URI, or `http(s)` URL) from the raw string. */\nconst LogoPreviewImage = ({ source, className }: { source: string; className?: string }) => {\n const safeSvg = useMemo(\n () =>\n isSvgMarkup(source)\n ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } })\n : null,\n [source],\n );\n\n if (safeSvg !== null) {\n // Decorative preview of what the caller is editing — the textarea holds the real value, so\n // hide the injected graphic from assistive tech (parity with the `alt=\"\"` image branch below).\n return <span aria-hidden className={className} dangerouslySetInnerHTML={{ __html: safeSvg }} />;\n }\n if (isImageSource(source)) {\n return <img src={source} alt=\"\" className={className} />;\n }\n return null;\n};\n\n/**\n * Controlled brand-editing block — colors (light/dark), sidebar colors, WCAG contrast readout,\n * corner radius, typography, and logo. Reads/writes a `Brand` (`@keboola/brand-registry`) via\n * `value` / `onChange`; owns no state of its own, so the caller decides where the brand and the\n * active color scheme live (Kai build-mode preview, theme-generator, …).\n */\nexport const BrandEditor = ({\n value,\n onChange,\n colorScheme = 'light',\n onColorSchemeChange,\n fontOptions = DEFAULT_FONT_OPTIONS,\n}: BrandEditorProps) => {\n // Prefix every control id so multiple BrandEditors on one page don't collide (broken label↔control).\n const baseId = useId();\n const { theme } = value;\n const coreColors = colorScheme === 'light' ? theme.colors : theme.colorsDark;\n const sidebarColors = colorScheme === 'light' ? theme.colors?.sidebar : theme.colorsDark?.sidebar;\n const chartColors = colorScheme === 'light' ? theme.colors?.chart : theme.colorsDark?.chart;\n // Fall back to the keboola default of the SAME scheme — never light values while editing dark.\n const defaultColors = colorScheme === 'light' ? keboola.theme.colors : keboola.theme.colorsDark;\n const radii = theme.radii ?? DEFAULT_RADII;\n const typography = theme.typography;\n\n const setColor = (slot: ColorSlot, channels: string) => {\n if (colorScheme === 'light') {\n onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, [slot]: channels } } });\n return;\n }\n // Keep colorsDark sparse (mirrors the light path) so an unset dark palette inherits the\n // design-system defaults instead of baking in a full keboola palette on the first edit.\n onChange({\n ...value,\n theme: { ...theme, colorsDark: { ...theme.colorsDark, [slot]: channels } },\n });\n };\n\n const setSidebarColor = (slot: SidebarSlot, channels: string) => {\n if (colorScheme === 'light') {\n const base = theme.colors?.sidebar ?? DEFAULT_SIDEBAR.light;\n onChange({\n ...value,\n theme: { ...theme, colors: { ...theme.colors, sidebar: { ...base, [slot]: channels } } },\n });\n return;\n }\n // Spread the existing (possibly-empty) colorsDark so setting a sidebar token doesn't seed the\n // whole core dark palette; only the sidebar sub-object is seeded, since it has no default to inherit.\n const sidebarBase = theme.colorsDark?.sidebar ?? DEFAULT_SIDEBAR.dark;\n onChange({\n ...value,\n theme: {\n ...theme,\n colorsDark: { ...theme.colorsDark, sidebar: { ...sidebarBase, [slot]: channels } },\n },\n });\n };\n\n const setChart = (slot: ChartSlot, channels: string) => {\n const base = chartColors ?? DEFAULT_CHART[colorScheme];\n const chart = { ...base, [slot]: channels };\n if (colorScheme === 'light') {\n onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, chart } } });\n return;\n }\n onChange({ ...value, theme: { ...theme, colorsDark: { ...theme.colorsDark, chart } } });\n };\n\n const setRadius = (size: RadiusSize, radius: string) =>\n onChange({\n ...value,\n theme: { ...theme, radii: { ...(theme.radii ?? DEFAULT_RADII), [size]: radius } },\n });\n\n // Merge a typography patch, keeping sibling faces / weight / letterSpacing.\n const patchTypography = (patch: Partial<Typography>) =>\n onChange({ ...value, theme: { ...theme, typography: { ...theme.typography, ...patch } } });\n\n const setFontFace = (face: FontFace, font: string) =>\n patchTypography({ [face]: font.trim() || undefined });\n\n const setFontWeight = (slot: FontWeightSlot, weight: string) =>\n patchTypography({ weight: { ...theme.typography?.weight, [slot]: weight || undefined } });\n\n const setLetterSpacing = (chrome: string) =>\n patchTypography({ letterSpacing: { chrome: chrome.trim() || undefined } });\n\n const setShadow = (slot: ShadowSlot, shadow: string) =>\n onChange({\n ...value,\n theme: { ...theme, shadows: { ...theme.shadows, [slot]: shadow.trim() || undefined } },\n });\n\n const setSpacing = (slot: SpacingSlot, length: string) =>\n onChange({\n ...value,\n theme: { ...theme, spacing: { ...theme.spacing, [slot]: length.trim() || undefined } },\n });\n\n const setMotion = (slot: MotionSlot, token: string) =>\n onChange({\n ...value,\n theme: { ...theme, motion: { ...theme.motion, [slot]: token.trim() || undefined } },\n });\n\n const setGradient = (gradient: string) =>\n onChange({\n ...value,\n theme: { ...theme, gradient: { brand: gradient.trim() || undefined } },\n });\n\n const setLogo = (slot: keyof NonNullable<Brand['logo']>, source: string) => {\n const trimmed = source.trim();\n const nextLogo: NonNullable<Brand['logo']> = { ...value.logo };\n if (trimmed) nextLogo[slot] = trimmed;\n else delete nextLogo[slot];\n const { logo: _drop, ...rest } = value;\n onChange(Object.keys(nextLogo).length > 0 ? { ...value, logo: nextLogo } : rest);\n };\n\n return (\n <div className=\"tw:flex tw:flex-col\">\n <ControlSection title=\"Colors\">\n {onColorSchemeChange ? (\n <ToggleGroup\n type=\"single\"\n value={colorScheme}\n onValueChange={(next) => {\n if (next === 'light' || next === 'dark') onColorSchemeChange(next);\n }}\n aria-label=\"Color scheme\"\n className=\"tw:w-full\"\n >\n <ToggleGroup.Item value=\"light\" className=\"tw:flex-1\">\n Light\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"dark\" className=\"tw:flex-1\">\n Dark\n </ToggleGroup.Item>\n </ToggleGroup>\n ) : null}\n <div className=\"tw:flex tw:flex-col tw:gap-2\">\n {COLOR_SLOTS.map((slot) => (\n <ColorField\n key={slot}\n id={`${baseId}color-${colorScheme}-${slot}`}\n label={COLOR_LABELS[slot]}\n channels={coreColors?.[slot] ?? defaultColors?.[slot] ?? '0 0 0'}\n onChange={(channels) => setColor(slot, channels)}\n />\n ))}\n </div>\n </ControlSection>\n\n <ControlSection title=\"Accessibility\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n WCAG contrast for the {colorScheme} palette (AA needs 4.5:1).\n </p>\n <div className=\"tw:flex tw:flex-col tw:gap-1.5\">\n {A11Y_PAIRS.map((pair) => {\n const fg = coreColors?.[pair.fg] ?? defaultColors?.[pair.fg] ?? '0 0 0';\n const bg = coreColors?.[pair.bg] ?? defaultColors?.[pair.bg] ?? '255 255 255';\n const ratio = contrastRatio(fg, bg);\n const level = wcagLevel(ratio);\n return (\n <div key={pair.label} className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n <span className=\"tw:text-xs tw:text-foreground\">{pair.label}</span>\n <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {ratio.toFixed(1)}:1\n </span>\n <Badge color={level === 'fail' ? 'red' : 'green'}>\n {level === 'fail' ? 'Fail' : level}\n </Badge>\n </span>\n </div>\n );\n })}\n </div>\n </ControlSection>\n\n <ControlSection title=\"Sidebar colors\">\n <Collapsible className=\"tw:flex tw:flex-col tw:gap-2\">\n <Collapsible.Trigger asChild>\n <Button variant=\"outline\" size=\"small\" className=\"tw:w-full\">\n Toggle sidebar tokens ({colorScheme})\n </Button>\n </Collapsible.Trigger>\n <Collapsible.Content className=\"tw:flex tw:flex-col tw:gap-2\">\n {SIDEBAR_SLOTS.map((slot) => (\n <ColorField\n key={slot}\n id={`${baseId}sidebar-${colorScheme}-${slot}`}\n label={SIDEBAR_LABELS[slot]}\n channels={sidebarColors?.[slot] ?? DEFAULT_SIDEBAR[colorScheme][slot]}\n onChange={(channels) => setSidebarColor(slot, channels)}\n />\n ))}\n </Collapsible.Content>\n </Collapsible>\n </ControlSection>\n\n <ControlSection title=\"Chart palette\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Categorical series colours for the {colorScheme} palette (`--chart-1…5`).\n </p>\n <div className=\"tw:flex tw:flex-col tw:gap-2\">\n {CHART_SLOTS.map((slot) => (\n <ColorField\n key={slot}\n id={`${baseId}chart-${colorScheme}-${slot}`}\n label={CHART_LABELS[slot]}\n channels={chartColors?.[slot] ?? DEFAULT_CHART[colorScheme][slot]}\n onChange={(channels) => setChart(slot, channels)}\n />\n ))}\n </div>\n </ControlSection>\n\n <ControlSection title=\"Radius\">\n {RADIUS_SIZES.map((size) => {\n const current = radii[size];\n const px = lengthToPx(current);\n return (\n <div key={size} className=\"tw:flex tw:flex-col tw:gap-1\">\n <div className=\"tw:flex tw:items-center tw:justify-between\">\n <Label className=\"tw:text-xs tw:font-normal tw:uppercase tw:text-foreground\">\n {size}\n </Label>\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {radii[size]}\n </span>\n </div>\n <Slider\n min={0}\n max={24}\n step={1}\n value={[px]}\n onValueChange={(values) => setRadius(size, pxToLength(values[0] ?? 0, current))}\n />\n </div>\n );\n })}\n </ControlSection>\n\n <ControlSection title=\"Typography\">\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label\n htmlFor={`${baseId}font-family`}\n className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n >\n Font family\n </Label>\n <Select\n id={`${baseId}font-family`}\n value={typography?.fontFamily ?? DEFAULT_FALLBACK_FONT}\n onValueChange={(font) => setFontFace('fontFamily', font)}\n items={fontOptions}\n />\n </div>\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label\n htmlFor={`${baseId}font-display`}\n className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n >\n Display font (headings)\n </Label>\n <Select\n id={`${baseId}font-display`}\n value={typography?.fontDisplay ?? typography?.fontFamily ?? DEFAULT_FALLBACK_FONT}\n onValueChange={(font) => setFontFace('fontDisplay', font)}\n items={fontOptions}\n />\n </div>\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label\n htmlFor={`${baseId}font-mono`}\n className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n >\n Monospace font\n </Label>\n <Select\n id={`${baseId}font-mono`}\n value={typography?.fontMono ?? MONO_FALLBACK}\n onValueChange={(font) => setFontFace('fontMono', font)}\n items={fontOptions}\n />\n </div>\n\n <span className=\"tw:text-xs tw:text-muted-foreground\">Chrome font weights</span>\n {WEIGHT_SLOTS.map((slot) => {\n const current = typography?.weight?.[slot] ?? DEFAULT_FONT_WEIGHTS[slot];\n return (\n <div key={slot} className=\"tw:flex tw:flex-col tw:gap-1\">\n <div className=\"tw:flex tw:items-center tw:justify-between\">\n <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {WEIGHT_LABELS[slot]}\n </Label>\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {current}\n </span>\n </div>\n <Slider\n min={100}\n max={900}\n step={25}\n value={[numOf(current, 400)]}\n onValueChange={(values) => setFontWeight(slot, String(values[0] ?? 400))}\n />\n </div>\n );\n })}\n\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <div className=\"tw:flex tw:items-center tw:justify-between\">\n <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n Chrome letter spacing\n </Label>\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING}\n </span>\n </div>\n <Slider\n min={-2}\n max={4}\n step={0.25}\n value={[letterSpacingToPx(typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING)]}\n onValueChange={(values) =>\n setLetterSpacing(\n pxToLetterSpacing(\n values[0] ?? 0,\n typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING,\n ),\n )\n }\n />\n </div>\n </ControlSection>\n\n <ControlSection title=\"Elevation\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Box-shadow scale (`--shadow-*`), shared across light & dark. Empty inherits the default.\n </p>\n {SHADOW_SLOTS.map((slot) => (\n <TextField\n key={slot}\n id={`${baseId}shadow-${slot}`}\n label={SHADOW_LABELS[slot]}\n value={theme.shadows?.[slot] ?? ''}\n placeholder={DEFAULT_SHADOWS[slot]}\n onChange={(next) => setShadow(slot, next)}\n />\n ))}\n </ControlSection>\n\n <ControlSection title=\"Density\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Semantic spacing (`--space-*`), as CSS lengths.\n </p>\n {SPACING_SLOTS.map((slot) => (\n <TextField\n key={slot}\n id={`${baseId}spacing-${slot}`}\n label={SPACING_LABELS[slot]}\n value={theme.spacing?.[slot] ?? ''}\n placeholder={DEFAULT_SPACING[slot]}\n onChange={(next) => setSpacing(slot, next)}\n />\n ))}\n </ControlSection>\n\n <ControlSection title=\"Motion\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Base transition `duration` + `easing` (`--motion-*`).\n </p>\n {MOTION_SLOTS.map((slot) => (\n <TextField\n key={slot}\n id={`${baseId}motion-${slot}`}\n label={MOTION_LABELS[slot]}\n value={theme.motion?.[slot] ?? ''}\n placeholder={DEFAULT_MOTION[slot]}\n onChange={(next) => setMotion(slot, next)}\n />\n ))}\n </ControlSection>\n\n <ControlSection title=\"Gradient\">\n <TextField\n id={`${baseId}gradient-brand`}\n label=\"Brand gradient\"\n value={theme.gradient?.brand ?? ''}\n placeholder={DEFAULT_GRADIENT}\n onChange={setGradient}\n />\n </ControlSection>\n\n <ControlSection title=\"Logo\">\n <LogoField\n id={`${baseId}logo-mark`}\n label=\"Mark (icon)\"\n value={value.logo?.mark ?? ''}\n onChange={(source) => setLogo('mark', source)}\n />\n <LogoField\n id={`${baseId}logo-wordmark`}\n label=\"Wordmark (full)\"\n value={value.logo?.wordmark ?? ''}\n onChange={(source) => setLogo('wordmark', source)}\n />\n <Collapsible className=\"tw:flex tw:flex-col tw:gap-2\">\n <Collapsible.Trigger asChild>\n <Button variant=\"outline\" size=\"small\" className=\"tw:w-full\">\n Toggle dark-mode logos\n </Button>\n </Collapsible.Trigger>\n <Collapsible.Content className=\"tw:flex tw:flex-col tw:gap-2\">\n <LogoField\n id={`${baseId}logo-mark-dark`}\n label=\"Mark (dark)\"\n value={value.logo?.markDark ?? ''}\n onChange={(source) => setLogo('markDark', source)}\n />\n <LogoField\n id={`${baseId}logo-wordmark-dark`}\n label=\"Wordmark (dark)\"\n value={value.logo?.wordmarkDark ?? ''}\n onChange={(source) => setLogo('wordmarkDark', source)}\n />\n </Collapsible.Content>\n </Collapsible>\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <span className=\"tw:text-xs tw:text-muted-foreground\">Preview</span>\n <div className=\"tw:flex tw:min-h-12 tw:items-center tw:gap-4 tw:rounded-md tw:border tw:border-border tw:bg-background tw:p-3\">\n {value.logo?.mark || value.logo?.wordmark ? (\n <>\n {value.logo.mark ? (\n <LogoPreviewImage source={value.logo.mark} className=\"tw:h-8\" />\n ) : null}\n {value.logo.wordmark ? (\n <LogoPreviewImage source={value.logo.wordmark} className=\"tw:h-8\" />\n ) : null}\n </>\n ) : (\n <span className=\"tw:text-xs tw:text-muted-foreground\">No logo set</span>\n )}\n </div>\n </div>\n </ControlSection>\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"BrandEditor-Bkd6dhb8.js","names":[],"sources":["../src/blocks/BrandEditor/color.ts","../src/blocks/BrandEditor/ColorField.tsx","../src/blocks/BrandEditor/contrast.ts","../src/blocks/BrandEditor/ControlSection.tsx","../src/blocks/BrandEditor/LogoField.tsx","../src/blocks/BrandEditor/TextField.tsx","../src/blocks/BrandEditor/BrandEditor.tsx"],"sourcesContent":["// Brand colours are stored as space-separated \"R G B\" channel strings (see\n// `rgbChannelsSchema` in @keboola/brand-registry); `ColorInput` speaks hex.\n// These helpers convert at that boundary.\n\nexport const hexToChannels = (hex: string): string => {\n let h = hex.trim().replace(/^#/, '');\n // Expand 3/4-digit shorthand and drop alpha (4- and 8-digit `#rgba`/`#rrggbbaa`) — brand\n // channels carry no alpha. Anything else is malformed → fall back to black.\n if (h.length === 3 || h.length === 4) {\n h = h\n .slice(0, 3)\n .split('')\n .map((c) => c + c)\n .join('');\n } else if (h.length === 8) {\n h = h.slice(0, 6);\n }\n if (!/^[0-9a-fA-F]{6}$/.test(h)) return '0 0 0';\n const n = parseInt(h, 16);\n return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;\n};\n\nexport const channelsToHex = (channels: string): string => {\n const [r = 0, g = 0, b = 0] = channels\n .trim()\n .split(/\\s+/)\n .map((n) => Number(n) || 0);\n const to2 = (v: number) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0');\n return `#${to2(r)}${to2(g)}${to2(b)}`;\n};\n","import { Label } from '../../components/Label';\nimport { ColorInput } from '../ColorInput';\n\nimport { channelsToHex, hexToChannels } from './color';\n\ntype Props = {\n id: string;\n label: string;\n /** Current value as an \"R G B\" channel string. */\n channels: string;\n /** Called with a new \"R G B\" channel string when a valid colour is picked. */\n onChange: (channels: string) => void;\n};\n\n// ColorInput fires `onValueChange` on every keystroke (it only coerces on blur), so commit a\n// channel value only for a COMPLETE 3-, 4-, 6-, or 8-digit hex — otherwise a partial \"#1\"/\"#\"\n// would write unintended channels. Alpha (4-/8-digit) is truncated to RGB, since brand tokens\n// carry no alpha.\nconst COMPLETE_HEX = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\n\n/** A labelled hex colour picker bound to a brand token (stored as RGB channels). */\nexport const ColorField = ({ id, label, channels, onChange }: Props) => {\n const hex = channelsToHex(channels);\n\n return (\n <div className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {label}\n </Label>\n <ColorInput\n id={id}\n sizing=\"medium\"\n value={hex}\n className=\"tw:w-36\"\n onValueChange={(next) => {\n const clean = next.trim().replace(/^#/, '');\n // Commit only complete hex (hexToChannels handles the 3/6/8-digit shapes + alpha drop).\n if (COMPLETE_HEX.test(clean)) onChange(hexToChannels(`#${clean}`));\n }}\n />\n </div>\n );\n};\n","// WCAG contrast helpers over `\"R G B\"` channel strings (the brand token format).\n\n// Coerce non-numeric/blank channels to 0 and clamp to the valid 0–255 range, so a malformed\n// token (e.g. \"999 999 999\") can neither NaN-out nor push luminance past WCAG's expected bounds.\nconst clampChannel = (n: number): number =>\n Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : 0;\n\nconst parseChannels = (channels: string): [number, number, number] => {\n const [r = 0, g = 0, b = 0] = channels\n .trim()\n .split(/\\s+/)\n .map((n) => clampChannel(Number(n)));\n return [r, g, b];\n};\n\nconst relativeLuminance = (channels: string): number => {\n // Destructure with defaults (not an `as` assertion) so `r`/`g`/`b` are `number` under\n // `noUncheckedIndexedAccess` without a production-code type cast.\n const [r = 0, g = 0, b = 0] = parseChannels(channels).map((c) => {\n const s = c / 255;\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\n/** WCAG contrast ratio (1–21) between two `\"R G B\"` colours. */\nexport const contrastRatio = (fg: string, bg: string): number => {\n const l1 = relativeLuminance(fg);\n const l2 = relativeLuminance(bg);\n const [lighter, darker] = l1 >= l2 ? [l1, l2] : [l2, l1];\n return (lighter + 0.05) / (darker + 0.05);\n};\n\n/** WCAG level for normal-size text at a given ratio. */\nexport const wcagLevel = (ratio: number): 'AAA' | 'AA' | 'fail' =>\n ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : 'fail';\n","import type { ReactNode } from 'react';\n\ntype Props = {\n title: string;\n children: ReactNode;\n};\n\n/** A titled block inside `BrandEditor`. */\nexport const ControlSection = ({ title, children }: Props) => (\n <section className=\"tw:flex tw:flex-col tw:gap-3 tw:border-b tw:border-border tw:p-4\">\n <h3 className=\"tw:m-0 tw:text-xs tw:font-semibold tw:uppercase tw:tracking-wide tw:text-muted-foreground\">\n {title}\n </h3>\n {children}\n </section>\n);\n","import { Label } from '../../components/Label';\nimport { Textarea } from '../Textarea';\n\ntype Props = {\n id: string;\n label: string;\n /** Current logo source: SVG markup, a `data:` URI, or an `http(s)` URL. */\n value: string;\n /** Called with the new source (empty string clears the slot). */\n onChange: (value: string) => void;\n};\n\n/** A labelled multi-line field for a brand logo source. */\nexport const LogoField = ({ id, label, value, onChange }: Props) => (\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {label}\n </Label>\n <Textarea\n id={id}\n value={value}\n onValueChange={onChange}\n maxRows={4}\n placeholder=\"<svg…>, a data: URI, or an https:// URL\"\n className=\"tw:font-mono tw:text-xs\"\n />\n </div>\n);\n","import { Label } from '../../components/Label';\nimport { TextInput } from '../TextInput';\n\ntype Props = {\n id: string;\n label: string;\n /** Current CSS value (empty clears the token, falling back to the stylesheet default). */\n value: string;\n /** Called with the new CSS value on change. */\n onChange: (value: string) => void;\n /** The inherited default, shown as placeholder when the field is empty. */\n placeholder?: string;\n};\n\n/** A labelled single-line field for a free-form CSS-value token (shadow, motion, gradient). */\nexport const TextField = ({ id, label, value, onChange, placeholder }: Props) => (\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label htmlFor={id} className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {label}\n </Label>\n <TextInput\n id={id}\n sizing=\"small\"\n value={value}\n onValueChange={onChange}\n placeholder={placeholder}\n className=\"tw:font-mono tw:text-xs\"\n />\n </div>\n);\n","import { useId, useMemo } from 'react';\nimport DOMPurify from 'dompurify';\n\nimport type { Brand } from '@keboola/brand-registry';\nimport { keboola } from '@keboola/brand-registry';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Collapsible } from '../../components/Collapsible';\nimport { Label } from '../../components/Label';\nimport { Select } from '../../components/Select';\nimport { Slider } from '../../components/Slider';\nimport { ToggleGroup } from '../../components/ToggleGroup';\n\nimport { ColorField } from './ColorField';\nimport { contrastRatio, wcagLevel } from './contrast';\nimport { ControlSection } from './ControlSection';\nimport { LogoField } from './LogoField';\nimport { TextField } from './TextField';\n\nexport type ColorSlot = keyof Omit<NonNullable<Brand['theme']['colors']>, 'sidebar' | 'chart'>;\nexport type SidebarSlot = keyof NonNullable<NonNullable<Brand['theme']['colors']>['sidebar']>;\nexport type ChartSlot = keyof NonNullable<NonNullable<Brand['theme']['colors']>['chart']>;\nexport type RadiusSize = keyof NonNullable<Brand['theme']['radii']>;\n\ntype Typography = NonNullable<Brand['theme']['typography']>;\ntype FontFace = 'fontFamily' | 'fontDisplay' | 'fontMono';\ntype FontWeightSlot = keyof NonNullable<Typography['weight']>;\ntype ShadowSlot = keyof NonNullable<Brand['theme']['shadows']>;\ntype SpacingSlot = keyof NonNullable<Brand['theme']['spacing']>;\ntype MotionSlot = keyof NonNullable<Brand['theme']['motion']>;\n\nexport const DEFAULT_FALLBACK_FONT = \"'Inter', system-ui, sans-serif\";\n\nexport const DEFAULT_FONT_OPTIONS: { value: string; label: string }[] = [\n { value: DEFAULT_FALLBACK_FONT, label: 'Inter (default)' },\n { value: \"'Space Grotesk', system-ui, sans-serif\", label: 'Space Grotesk' },\n { value: \"'Poppins', system-ui, sans-serif\", label: 'Poppins' },\n { value: \"'Manrope', system-ui, sans-serif\", label: 'Manrope' },\n { value: \"'Quicksand', system-ui, sans-serif\", label: 'Quicksand' },\n { value: \"'Baloo 2', system-ui, sans-serif\", label: 'Baloo 2' },\n { value: \"'Fraunces', Georgia, serif\", label: 'Fraunces (serif)' },\n { value: \"Georgia, 'Times New Roman', serif\", label: 'Georgia (serif)' },\n { value: \"'JetBrains Mono', ui-monospace, monospace\", label: 'JetBrains Mono' },\n { value: 'system-ui, sans-serif', label: 'System UI' },\n];\n\n// Label maps double as a compile-time exhaustiveness guard: typed as\n// `Record<ColorSlot, string>` / `Record<SidebarSlot, string>`, a new token added\n// to the upstream `Brand` schema fails to compile here until it gets a control,\n// so it can't silently drift out of the editor. Insertion order is display order.\nconst COLOR_LABELS: Record<ColorSlot, string> = {\n primary: 'Primary',\n primaryForeground: 'Primary foreground',\n background: 'Background',\n foreground: 'Foreground',\n card: 'Card',\n cardForeground: 'Card foreground',\n popover: 'Popover',\n popoverForeground: 'Popover foreground',\n secondary: 'Secondary',\n secondaryForeground: 'Secondary foreground',\n muted: 'Muted',\n mutedForeground: 'Muted foreground',\n accent: 'Accent',\n accentForeground: 'Accent foreground',\n border: 'Border',\n input: 'Input border',\n inputBackground: 'Input background',\n ring: 'Ring',\n ringOffset: 'Ring offset',\n destructive: 'Destructive',\n destructiveForeground: 'Destructive foreground',\n success: 'Success',\n successForeground: 'Success foreground',\n warning: 'Warning',\n warningForeground: 'Warning foreground',\n info: 'Info',\n infoForeground: 'Info foreground',\n};\n\nconst SIDEBAR_LABELS: Record<SidebarSlot, string> = {\n sidebar: 'Sidebar',\n sidebarForeground: 'Foreground',\n sidebarPrimary: 'Primary',\n sidebarPrimaryForeground: 'Primary foreground',\n sidebarAccent: 'Accent',\n sidebarAccentForeground: 'Accent foreground',\n sidebarBorder: 'Border',\n sidebarRing: 'Ring',\n};\n\nconst CHART_LABELS: Record<ChartSlot, string> = {\n chart1: 'Chart 1',\n chart2: 'Chart 2',\n chart3: 'Chart 3',\n chart4: 'Chart 4',\n chart5: 'Chart 5',\n};\n\nconst WEIGHT_LABELS: Record<FontWeightSlot, string> = {\n normal: 'Normal',\n medium: 'Medium',\n semibold: 'Semibold',\n bold: 'Bold',\n};\n\nconst SHADOW_LABELS: Record<ShadowSlot, string> = {\n sm: 'Small',\n md: 'Medium',\n lg: 'Large',\n lift: 'Lift (raised)',\n};\n\nconst SPACING_LABELS: Record<SpacingSlot, string> = {\n gutter: 'Gutter (between sections)',\n inset: 'Inset (in-container)',\n};\n\nconst MOTION_LABELS: Record<MotionSlot, string> = {\n duration: 'Duration',\n easing: 'Easing',\n};\n\nconst COLOR_SLOTS = Object.keys(COLOR_LABELS) as ColorSlot[];\nconst SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS) as SidebarSlot[];\nconst CHART_SLOTS = Object.keys(CHART_LABELS) as ChartSlot[];\nconst WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS) as FontWeightSlot[];\nconst SHADOW_SLOTS = Object.keys(SHADOW_LABELS) as ShadowSlot[];\nconst SPACING_SLOTS = Object.keys(SPACING_LABELS) as SpacingSlot[];\nconst MOTION_SLOTS = Object.keys(MOTION_LABELS) as MotionSlot[];\nconst RADIUS_SIZES: RadiusSize[] = ['sm', 'md', 'lg'];\n\n// Foreground/background pairs whose contrast decides everyday legibility.\nconst A11Y_PAIRS: { label: string; fg: ColorSlot; bg: ColorSlot }[] = [\n { label: 'Text on background', fg: 'foreground', bg: 'background' },\n { label: 'Text on card', fg: 'cardForeground', bg: 'card' },\n { label: 'Primary button', fg: 'primaryForeground', bg: 'primary' },\n { label: 'Muted text', fg: 'mutedForeground', bg: 'muted' },\n { label: 'Accent', fg: 'accentForeground', bg: 'accent' },\n];\n\n// Fallback sidebar palette — the `keboola` brand doesn't set `colors.sidebar` /\n// `colorsDark.sidebar`, so a slot needs a value to seed from when a user starts\n// editing sidebar tokens on a brand that leaves them unset.\nconst DEFAULT_SIDEBAR: Record<'light' | 'dark', Record<SidebarSlot, string>> = {\n light: {\n sidebar: '255 255 255',\n sidebarForeground: '30 41 59',\n sidebarPrimary: '31 143 255',\n sidebarPrimaryForeground: '255 255 255',\n sidebarAccent: '219 234 254',\n sidebarAccentForeground: '30 41 59',\n sidebarBorder: '229 231 235',\n sidebarRing: '31 143 255',\n },\n dark: {\n sidebar: '14 14 18',\n sidebarForeground: '229 230 236',\n sidebarPrimary: '31 143 255',\n sidebarPrimaryForeground: '255 255 255',\n sidebarAccent: '38 38 45',\n sidebarAccentForeground: '229 230 236',\n sidebarBorder: '48 49 57',\n sidebarRing: '31 143 255',\n },\n};\n\nconst DEFAULT_RADII: NonNullable<Brand['theme']['radii']> = {\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n};\n\n// The `@keboola/design/styles` categorical chart palette — seeds the chart\n// pickers when a brand leaves `colors.chart` / `colorsDark.chart` unset.\nconst DEFAULT_CHART: Record<'light' | 'dark', Record<ChartSlot, string>> = {\n light: {\n chart1: '31 143 255',\n chart2: '0 194 135',\n chart3: '146 92 255',\n chart4: '245 147 0',\n chart5: '237 94 223',\n },\n dark: {\n chart1: '92 173 255',\n chart2: '0 230 161',\n chart3: '173 133 255',\n chart4: '255 190 92',\n chart5: '242 140 232',\n },\n};\n\n// Chrome font-weight defaults (the Tailwind scale `@keboola/design` falls back to\n// when `typography.weight` is unset) — seed values for the weight sliders.\nconst DEFAULT_FONT_WEIGHTS: Record<FontWeightSlot, string> = {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n};\n\n// Chrome tracking default (behind the hardcoded `tw:tracking-[1px]`).\nconst DEFAULT_LETTER_SPACING = '1px';\n\n// The monospace stack the mono-face Select falls back to when `fontMono` is unset\n// (matches the `DEFAULT_FONT_OPTIONS` JetBrains Mono entry).\nconst MONO_FALLBACK = \"'JetBrains Mono', ui-monospace, monospace\";\n\n// `@keboola/design/styles` defaults for the advanced token groups, shown as\n// placeholders so an unset field reveals the value it inherits.\nconst DEFAULT_SHADOWS: Record<ShadowSlot, string> = {\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n lift: '0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06)',\n};\n\nconst DEFAULT_SPACING: Record<SpacingSlot, string> = {\n gutter: '1.5rem',\n inset: '1.5rem',\n};\n\nconst DEFAULT_MOTION: Record<MotionSlot, string> = {\n duration: '200ms',\n easing: 'cubic-bezier(0.2, 0.7, 0.2, 1)',\n};\n\nconst DEFAULT_GRADIENT =\n 'linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent, var(--primary))))';\n\n// Leading numeric value of a token string (font-weight \"500\").\nconst numOf = (value: string, fallback: number): number => {\n const n = Number.parseFloat(value);\n return Number.isFinite(n) ? n : fallback;\n};\n\n// Letter-spacing may be px or em. Drive the slider in px (treating `em` as ×16,\n// like the radius slider treats `rem`) and write back in the value's original\n// unit, so an `em`-authored brand (e.g. `0.02em`) stays `em` instead of being\n// silently rewritten to `px`.\nconst letterSpacingToPx = (value: string): number => {\n const n = Number.parseFloat(value);\n if (!Number.isFinite(n)) return 0;\n return value.trim().endsWith('em') ? n * 16 : n;\n};\n\nconst pxToLetterSpacing = (px: number, currentValue: string): string =>\n currentValue.trim().endsWith('em') ? `${Number((px / 16).toFixed(3))}em` : `${px}px`;\n\n// The Brand schema allows any CSS length for radii (`rem`, `px`, unitless). Convert to px for\n// the slider treating `rem` as ×16 and everything else as already-px, and write back preserving\n// the slot's original unit so `8px` stays `8px`, `0.5rem` stays `0.5rem`, and a unitless `8` stays `8`.\nconst lengthToPx = (value: string): number => {\n const n = Number.parseFloat(value);\n if (!Number.isFinite(n)) return 0;\n return Math.round(value.trim().endsWith('rem') ? n * 16 : n);\n};\n\nconst pxToLength = (px: number, currentValue: string): string => {\n const trimmed = currentValue.trim();\n if (trimmed.endsWith('rem')) return `${px / 16}rem`;\n // Preserve a unitless token (the schema allows it) rather than forcing `px` onto it.\n if (/^-?\\d*\\.?\\d+$/.test(trimmed)) return `${px}`;\n return `${px}px`;\n};\n\nexport type BrandEditorProps = {\n value: Brand;\n onChange: (next: Brand) => void;\n /** Palette being edited. Controlled. Default 'light'. */\n colorScheme?: 'light' | 'dark';\n /** If provided, the editor shows a light/dark toggle that calls this. If omitted, no toggle. */\n onColorSchemeChange?: (scheme: 'light' | 'dark') => void;\n /** Font choices for the typography Select. Defaults to DEFAULT_FONT_OPTIONS. */\n fontOptions?: { value: string; label: string }[];\n};\n\n// Match `BrandLogo`'s sniffing: any string starting with `<` is inline markup (covers\n// `<?xml …?><svg>` / `<!doctype …>` prefixes); only `data:` / `http(s)://` are image URLs.\nconst isSvgMarkup = (source: string) => source.trimStart().startsWith('<');\nconst isImageSource = (source: string) => /^(data:|https?:\\/\\/)/.test(source.trim());\n\n/** Renders a logo source (SVG markup, `data:` URI, or `http(s)` URL) from the raw string. */\nconst LogoPreviewImage = ({ source, className }: { source: string; className?: string }) => {\n const safeSvg = useMemo(\n () =>\n isSvgMarkup(source)\n ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } })\n : null,\n [source],\n );\n\n if (safeSvg !== null) {\n // Decorative preview of what the caller is editing — the textarea holds the real value, so\n // hide the injected graphic from assistive tech (parity with the `alt=\"\"` image branch below).\n return <span aria-hidden className={className} dangerouslySetInnerHTML={{ __html: safeSvg }} />;\n }\n if (isImageSource(source)) {\n return <img src={source} alt=\"\" className={className} />;\n }\n return null;\n};\n\n/**\n * Controlled brand-editing block — colors (light/dark), sidebar colors, WCAG contrast readout,\n * corner radius, typography, and logo. Reads/writes a `Brand` (`@keboola/brand-registry`) via\n * `value` / `onChange`; owns no state of its own, so the caller decides where the brand and the\n * active color scheme live (Kai build-mode preview, theme-generator, …).\n */\nexport const BrandEditor = ({\n value,\n onChange,\n colorScheme = 'light',\n onColorSchemeChange,\n fontOptions = DEFAULT_FONT_OPTIONS,\n}: BrandEditorProps) => {\n // Prefix every control id so multiple BrandEditors on one page don't collide (broken label↔control).\n const baseId = useId();\n const { theme } = value;\n const coreColors = colorScheme === 'light' ? theme.colors : theme.colorsDark;\n const sidebarColors = colorScheme === 'light' ? theme.colors?.sidebar : theme.colorsDark?.sidebar;\n const chartColors = colorScheme === 'light' ? theme.colors?.chart : theme.colorsDark?.chart;\n // Fall back to the keboola default of the SAME scheme — never light values while editing dark.\n const defaultColors = colorScheme === 'light' ? keboola.theme.colors : keboola.theme.colorsDark;\n const radii = theme.radii ?? DEFAULT_RADII;\n const typography = theme.typography;\n\n const setColor = (slot: ColorSlot, channels: string) => {\n if (colorScheme === 'light') {\n onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, [slot]: channels } } });\n return;\n }\n // Keep colorsDark sparse (mirrors the light path) so an unset dark palette inherits the\n // design-system defaults instead of baking in a full keboola palette on the first edit.\n onChange({\n ...value,\n theme: { ...theme, colorsDark: { ...theme.colorsDark, [slot]: channels } },\n });\n };\n\n const setSidebarColor = (slot: SidebarSlot, channels: string) => {\n if (colorScheme === 'light') {\n const base = theme.colors?.sidebar ?? DEFAULT_SIDEBAR.light;\n onChange({\n ...value,\n theme: { ...theme, colors: { ...theme.colors, sidebar: { ...base, [slot]: channels } } },\n });\n return;\n }\n // Spread the existing (possibly-empty) colorsDark so setting a sidebar token doesn't seed the\n // whole core dark palette; only the sidebar sub-object is seeded, since it has no default to inherit.\n const sidebarBase = theme.colorsDark?.sidebar ?? DEFAULT_SIDEBAR.dark;\n onChange({\n ...value,\n theme: {\n ...theme,\n colorsDark: { ...theme.colorsDark, sidebar: { ...sidebarBase, [slot]: channels } },\n },\n });\n };\n\n const setChart = (slot: ChartSlot, channels: string) => {\n const base = chartColors ?? DEFAULT_CHART[colorScheme];\n const chart = { ...base, [slot]: channels };\n if (colorScheme === 'light') {\n onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, chart } } });\n return;\n }\n onChange({ ...value, theme: { ...theme, colorsDark: { ...theme.colorsDark, chart } } });\n };\n\n const setRadius = (size: RadiusSize, radius: string) =>\n onChange({\n ...value,\n theme: { ...theme, radii: { ...(theme.radii ?? DEFAULT_RADII), [size]: radius } },\n });\n\n // Merge a typography patch, keeping sibling faces / weight / letterSpacing.\n const patchTypography = (patch: Partial<Typography>) =>\n onChange({ ...value, theme: { ...theme, typography: { ...theme.typography, ...patch } } });\n\n const setFontFace = (face: FontFace, font: string) =>\n patchTypography({ [face]: font.trim() || undefined });\n\n const setFontWeight = (slot: FontWeightSlot, weight: string) =>\n patchTypography({ weight: { ...theme.typography?.weight, [slot]: weight || undefined } });\n\n const setLetterSpacing = (chrome: string) =>\n patchTypography({ letterSpacing: { chrome: chrome.trim() || undefined } });\n\n const setShadow = (slot: ShadowSlot, shadow: string) =>\n onChange({\n ...value,\n theme: { ...theme, shadows: { ...theme.shadows, [slot]: shadow.trim() || undefined } },\n });\n\n const setSpacing = (slot: SpacingSlot, length: string) =>\n onChange({\n ...value,\n theme: { ...theme, spacing: { ...theme.spacing, [slot]: length.trim() || undefined } },\n });\n\n const setMotion = (slot: MotionSlot, token: string) =>\n onChange({\n ...value,\n theme: { ...theme, motion: { ...theme.motion, [slot]: token.trim() || undefined } },\n });\n\n const setGradient = (gradient: string) =>\n onChange({\n ...value,\n theme: { ...theme, gradient: { brand: gradient.trim() || undefined } },\n });\n\n const setLogo = (slot: keyof NonNullable<Brand['logo']>, source: string) => {\n const trimmed = source.trim();\n const nextLogo: NonNullable<Brand['logo']> = { ...value.logo };\n if (trimmed) nextLogo[slot] = trimmed;\n else delete nextLogo[slot];\n const { logo: _drop, ...rest } = value;\n onChange(Object.keys(nextLogo).length > 0 ? { ...value, logo: nextLogo } : rest);\n };\n\n return (\n <div className=\"tw:flex tw:flex-col\">\n <ControlSection title=\"Colors\">\n {onColorSchemeChange ? (\n <ToggleGroup\n type=\"single\"\n value={colorScheme}\n onValueChange={(next) => {\n if (next === 'light' || next === 'dark') onColorSchemeChange(next);\n }}\n aria-label=\"Color scheme\"\n className=\"tw:w-full\"\n >\n <ToggleGroup.Item value=\"light\" className=\"tw:flex-1\">\n Light\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"dark\" className=\"tw:flex-1\">\n Dark\n </ToggleGroup.Item>\n </ToggleGroup>\n ) : null}\n <div className=\"tw:flex tw:flex-col tw:gap-2\">\n {COLOR_SLOTS.map((slot) => (\n <ColorField\n key={slot}\n id={`${baseId}color-${colorScheme}-${slot}`}\n label={COLOR_LABELS[slot]}\n channels={coreColors?.[slot] ?? defaultColors?.[slot] ?? '0 0 0'}\n onChange={(channels) => setColor(slot, channels)}\n />\n ))}\n </div>\n </ControlSection>\n\n <ControlSection title=\"Accessibility\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n WCAG contrast for the {colorScheme} palette (AA needs 4.5:1).\n </p>\n <div className=\"tw:flex tw:flex-col tw:gap-1.5\">\n {A11Y_PAIRS.map((pair) => {\n const fg = coreColors?.[pair.fg] ?? defaultColors?.[pair.fg] ?? '0 0 0';\n const bg = coreColors?.[pair.bg] ?? defaultColors?.[pair.bg] ?? '255 255 255';\n const ratio = contrastRatio(fg, bg);\n const level = wcagLevel(ratio);\n return (\n <div key={pair.label} className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n <span className=\"tw:text-xs tw:text-foreground\">{pair.label}</span>\n <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {ratio.toFixed(1)}:1\n </span>\n <Badge color={level === 'fail' ? 'red' : 'green'}>\n {level === 'fail' ? 'Fail' : level}\n </Badge>\n </span>\n </div>\n );\n })}\n </div>\n </ControlSection>\n\n <ControlSection title=\"Sidebar colors\">\n <Collapsible className=\"tw:flex tw:flex-col tw:gap-2\">\n <Collapsible.Trigger asChild>\n <Button variant=\"outline\" size=\"small\" className=\"tw:w-full\">\n Toggle sidebar tokens ({colorScheme})\n </Button>\n </Collapsible.Trigger>\n <Collapsible.Content className=\"tw:flex tw:flex-col tw:gap-2\">\n {SIDEBAR_SLOTS.map((slot) => (\n <ColorField\n key={slot}\n id={`${baseId}sidebar-${colorScheme}-${slot}`}\n label={SIDEBAR_LABELS[slot]}\n channels={sidebarColors?.[slot] ?? DEFAULT_SIDEBAR[colorScheme][slot]}\n onChange={(channels) => setSidebarColor(slot, channels)}\n />\n ))}\n </Collapsible.Content>\n </Collapsible>\n </ControlSection>\n\n <ControlSection title=\"Chart palette\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Categorical series colours for the {colorScheme} palette (`--chart-1…5`).\n </p>\n <div className=\"tw:flex tw:flex-col tw:gap-2\">\n {CHART_SLOTS.map((slot) => (\n <ColorField\n key={slot}\n id={`${baseId}chart-${colorScheme}-${slot}`}\n label={CHART_LABELS[slot]}\n channels={chartColors?.[slot] ?? DEFAULT_CHART[colorScheme][slot]}\n onChange={(channels) => setChart(slot, channels)}\n />\n ))}\n </div>\n </ControlSection>\n\n <ControlSection title=\"Radius\">\n {RADIUS_SIZES.map((size) => {\n const current = radii[size];\n const px = lengthToPx(current);\n return (\n <div key={size} className=\"tw:flex tw:flex-col tw:gap-1\">\n <div className=\"tw:flex tw:items-center tw:justify-between\">\n <Label className=\"tw:text-xs tw:font-normal tw:uppercase tw:text-foreground\">\n {size}\n </Label>\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {radii[size]}\n </span>\n </div>\n <Slider\n min={0}\n max={24}\n step={1}\n value={[px]}\n onValueChange={(values) => setRadius(size, pxToLength(values[0] ?? 0, current))}\n />\n </div>\n );\n })}\n </ControlSection>\n\n <ControlSection title=\"Typography\">\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label\n htmlFor={`${baseId}font-family`}\n className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n >\n Font family\n </Label>\n <Select\n id={`${baseId}font-family`}\n value={typography?.fontFamily ?? DEFAULT_FALLBACK_FONT}\n onValueChange={(font) => setFontFace('fontFamily', font)}\n items={fontOptions}\n />\n </div>\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label\n htmlFor={`${baseId}font-display`}\n className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n >\n Display font (headings)\n </Label>\n <Select\n id={`${baseId}font-display`}\n value={typography?.fontDisplay ?? typography?.fontFamily ?? DEFAULT_FALLBACK_FONT}\n onValueChange={(font) => setFontFace('fontDisplay', font)}\n items={fontOptions}\n />\n </div>\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <Label\n htmlFor={`${baseId}font-mono`}\n className=\"tw:text-xs tw:font-normal tw:text-foreground\"\n >\n Monospace font\n </Label>\n <Select\n id={`${baseId}font-mono`}\n value={typography?.fontMono ?? MONO_FALLBACK}\n onValueChange={(font) => setFontFace('fontMono', font)}\n items={fontOptions}\n />\n </div>\n\n <span className=\"tw:text-xs tw:text-muted-foreground\">Chrome font weights</span>\n {WEIGHT_SLOTS.map((slot) => {\n const current = typography?.weight?.[slot] ?? DEFAULT_FONT_WEIGHTS[slot];\n return (\n <div key={slot} className=\"tw:flex tw:flex-col tw:gap-1\">\n <div className=\"tw:flex tw:items-center tw:justify-between\">\n <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n {WEIGHT_LABELS[slot]}\n </Label>\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {current}\n </span>\n </div>\n <Slider\n min={100}\n max={900}\n step={25}\n value={[numOf(current, 400)]}\n onValueChange={(values) => setFontWeight(slot, String(values[0] ?? 400))}\n />\n </div>\n );\n })}\n\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <div className=\"tw:flex tw:items-center tw:justify-between\">\n <Label className=\"tw:text-xs tw:font-normal tw:text-foreground\">\n Chrome letter spacing\n </Label>\n <span className=\"tw:text-xs tw:tabular-nums tw:text-muted-foreground\">\n {typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING}\n </span>\n </div>\n <Slider\n min={-2}\n max={4}\n step={0.25}\n value={[letterSpacingToPx(typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING)]}\n onValueChange={(values) =>\n setLetterSpacing(\n pxToLetterSpacing(\n values[0] ?? 0,\n typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING,\n ),\n )\n }\n />\n </div>\n </ControlSection>\n\n <ControlSection title=\"Elevation\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Box-shadow scale (`--shadow-*`), shared across light & dark. Empty inherits the default.\n </p>\n {SHADOW_SLOTS.map((slot) => (\n <TextField\n key={slot}\n id={`${baseId}shadow-${slot}`}\n label={SHADOW_LABELS[slot]}\n value={theme.shadows?.[slot] ?? ''}\n placeholder={DEFAULT_SHADOWS[slot]}\n onChange={(next) => setShadow(slot, next)}\n />\n ))}\n </ControlSection>\n\n <ControlSection title=\"Density\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Semantic spacing (`--space-*`), as CSS lengths.\n </p>\n {SPACING_SLOTS.map((slot) => (\n <TextField\n key={slot}\n id={`${baseId}spacing-${slot}`}\n label={SPACING_LABELS[slot]}\n value={theme.spacing?.[slot] ?? ''}\n placeholder={DEFAULT_SPACING[slot]}\n onChange={(next) => setSpacing(slot, next)}\n />\n ))}\n </ControlSection>\n\n <ControlSection title=\"Motion\">\n <p className=\"tw:m-0 tw:text-xs tw:text-muted-foreground\">\n Base transition `duration` + `easing` (`--motion-*`).\n </p>\n {MOTION_SLOTS.map((slot) => (\n <TextField\n key={slot}\n id={`${baseId}motion-${slot}`}\n label={MOTION_LABELS[slot]}\n value={theme.motion?.[slot] ?? ''}\n placeholder={DEFAULT_MOTION[slot]}\n onChange={(next) => setMotion(slot, next)}\n />\n ))}\n </ControlSection>\n\n <ControlSection title=\"Gradient\">\n <TextField\n id={`${baseId}gradient-brand`}\n label=\"Brand gradient\"\n value={theme.gradient?.brand ?? ''}\n placeholder={DEFAULT_GRADIENT}\n onChange={setGradient}\n />\n </ControlSection>\n\n <ControlSection title=\"Logo\">\n <LogoField\n id={`${baseId}logo-mark`}\n label=\"Mark (icon)\"\n value={value.logo?.mark ?? ''}\n onChange={(source) => setLogo('mark', source)}\n />\n <LogoField\n id={`${baseId}logo-wordmark`}\n label=\"Wordmark (full)\"\n value={value.logo?.wordmark ?? ''}\n onChange={(source) => setLogo('wordmark', source)}\n />\n <Collapsible className=\"tw:flex tw:flex-col tw:gap-2\">\n <Collapsible.Trigger asChild>\n <Button variant=\"outline\" size=\"small\" className=\"tw:w-full\">\n Toggle dark-mode logos\n </Button>\n </Collapsible.Trigger>\n <Collapsible.Content className=\"tw:flex tw:flex-col tw:gap-2\">\n <LogoField\n id={`${baseId}logo-mark-dark`}\n label=\"Mark (dark)\"\n value={value.logo?.markDark ?? ''}\n onChange={(source) => setLogo('markDark', source)}\n />\n <LogoField\n id={`${baseId}logo-wordmark-dark`}\n label=\"Wordmark (dark)\"\n value={value.logo?.wordmarkDark ?? ''}\n onChange={(source) => setLogo('wordmarkDark', source)}\n />\n </Collapsible.Content>\n </Collapsible>\n <div className=\"tw:flex tw:flex-col tw:gap-1\">\n <span className=\"tw:text-xs tw:text-muted-foreground\">Preview</span>\n <div className=\"tw:flex tw:min-h-12 tw:items-center tw:gap-4 tw:rounded-md tw:border tw:border-border tw:bg-background tw:p-3\">\n {value.logo?.mark || value.logo?.wordmark ? (\n <>\n {value.logo.mark ? (\n <LogoPreviewImage source={value.logo.mark} className=\"tw:h-8\" />\n ) : null}\n {value.logo.wordmark ? (\n <LogoPreviewImage source={value.logo.wordmark} className=\"tw:h-8\" />\n ) : null}\n </>\n ) : (\n <span className=\"tw:text-xs tw:text-muted-foreground\">No logo set</span>\n )}\n </div>\n </div>\n </ControlSection>\n </div>\n );\n};\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { cn } from "./classNames-BzrkDnOD.js";
2
2
  import { ChevronDown, ChevronRight, Ellipsis } from "./icons-wcA70iQx.js";
3
3
  import { Popover } from "./Popover-CEk915I1.js";
4
- import { SearchInput } from "./SearchInput-CEfQDNl3.js";
4
+ import { SearchInput } from "./SearchInput-D3qMkHaW.js";
5
5
  import { Slot } from "@radix-ui/react-slot";
6
6
  import { Children, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -321,4 +321,4 @@ Breadcrumb.Dropdown = BreadcrumbDropdown;
321
321
  //#endregion
322
322
  export { Breadcrumb };
323
323
 
324
- //# sourceMappingURL=Breadcrumb-p9HtMLCc.js.map
324
+ //# sourceMappingURL=Breadcrumb-BUoAZyhO.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumb-p9HtMLCc.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\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};\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';\n\nimport {\n BreadcrumbDropdownContext,\n getNodeText,\n matchesQuery,\n useMatchRegistry,\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-accent',\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 * force-expands collapsible groups. 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 [expanded, setExpanded] = useState(defaultExpanded);\n\n const text = textValue ?? getNodeText(label);\n const filtering = !parent.filterDisabled && !!parent.query;\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 }),\n [parent, labelMatched, registerChild],\n );\n\n // An active query force-expands the group so matches are never hidden behind a collapsed header.\n const isExpanded = !collapsible || expanded || filtering;\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={() => setExpanded((prev) => !prev)}\n >\n {isExpanded ? <ChevronDown /> : <ChevronRight />}\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-accent',\n 'tw:data-[active]:bg-accent',\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 normalizeQuery,\n useMatchRegistry,\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-accent',\n 'tw:hover:text-foreground',\n 'tw:data-[state=open]:bg-accent',\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 /** `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 children,\n}: BreadcrumbDropdownProps) => {\n const searchRef = useRef<ComponentRef<'input'>>(null);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [internalQuery, setInternalQuery] = useState('');\n const { register, anyVisible } = useMatchRegistry();\n\n const isOpen = open ?? internalOpen;\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 () => ({ query, forceVisible: false, filterDisabled, register, close }),\n [query, filterDisabled, register, close],\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])}\n onOpenAutoFocus={\n filter\n ? (event) => {\n event.preventDefault();\n searchRef.current?.focus();\n }\n : undefined\n }\n >\n {filter && (\n <div className=\"tw:shrink-0 tw:border-0 tw:border-b tw:border-solid tw:border-border tw:p-2\">\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-accent',\n 'tw:hover:text-foreground',\n 'tw:data-[state=open]:bg-accent',\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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"}
1
+ {"version":3,"file":"Breadcrumb-BUoAZyhO.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\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};\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';\n\nimport {\n BreadcrumbDropdownContext,\n getNodeText,\n matchesQuery,\n useMatchRegistry,\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-accent',\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 * force-expands collapsible groups. 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 [expanded, setExpanded] = useState(defaultExpanded);\n\n const text = textValue ?? getNodeText(label);\n const filtering = !parent.filterDisabled && !!parent.query;\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 }),\n [parent, labelMatched, registerChild],\n );\n\n // An active query force-expands the group so matches are never hidden behind a collapsed header.\n const isExpanded = !collapsible || expanded || filtering;\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={() => setExpanded((prev) => !prev)}\n >\n {isExpanded ? <ChevronDown /> : <ChevronRight />}\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-accent',\n 'tw:data-[active]:bg-accent',\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 normalizeQuery,\n useMatchRegistry,\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-accent',\n 'tw:hover:text-foreground',\n 'tw:data-[state=open]:bg-accent',\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 /** `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 children,\n}: BreadcrumbDropdownProps) => {\n const searchRef = useRef<ComponentRef<'input'>>(null);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [internalQuery, setInternalQuery] = useState('');\n const { register, anyVisible } = useMatchRegistry();\n\n const isOpen = open ?? internalOpen;\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 () => ({ query, forceVisible: false, filterDisabled, register, close }),\n [query, filterDisabled, register, close],\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])}\n onOpenAutoFocus={\n filter\n ? (event) => {\n event.preventDefault();\n searchRef.current?.focus();\n }\n : undefined\n }\n >\n {filter && (\n <div className=\"tw:shrink-0 tw:border-0 tw:border-b tw:border-solid tw:border-border tw:p-2\">\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-accent',\n 'tw:hover:text-foreground',\n 'tw:data-[state=open]:bg-accent',\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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"}
@@ -64,7 +64,6 @@ const variants = cva([
64
64
  "tw:aria-disabled:!bg-secondary-500"
65
65
  ],
66
66
  kai: [
67
- "tw:border-0",
68
67
  "tw:bg-kai",
69
68
  "tw:animate-kai-drift",
70
69
  "tw:motion-reduce:animate-none",
@@ -194,7 +193,6 @@ const argoVariants = cva([
194
193
  "tw:disabled:opacity-50",
195
194
  "tw:active:opacity-60",
196
195
  "tw:transition-all",
197
- "tw:bg-clip-padding",
198
196
  "tw:!no-underline",
199
197
  "tw:aria-disabled:cursor-not-allowed",
200
198
  "tw:aria-disabled:opacity-50",
@@ -228,7 +226,6 @@ const argoVariants = cva([
228
226
  "tw:focus-visible:ring-ring/50"
229
227
  ],
230
228
  kai: [
231
- "tw:border-0",
232
229
  "tw:bg-kai",
233
230
  "tw:animate-kai-drift",
234
231
  "tw:motion-reduce:animate-none",
@@ -250,6 +247,7 @@ const argoVariants = cva([
250
247
  outline: [
251
248
  "tw:!border-input",
252
249
  "tw:bg-background",
250
+ "tw:bg-clip-padding",
253
251
  "tw:text-foreground",
254
252
  "tw:hover:not-disabled:bg-[color-mix(in_oklab,rgb(var(--primary))_10%,rgb(var(--background)))]",
255
253
  "tw:hover:not-disabled:!border-muted-foreground",
@@ -260,6 +258,7 @@ const argoVariants = cva([
260
258
  ],
261
259
  invisible: [
262
260
  "tw:bg-transparent",
261
+ "tw:bg-clip-padding",
263
262
  "tw:text-foreground",
264
263
  "tw:hover:not-disabled:bg-primary/10",
265
264
  "tw:hover:not-disabled:text-primary",
@@ -407,4 +406,4 @@ const ButtonInline = ({ ref, children, className, variant, color, type = "button
407
406
  //#endregion
408
407
  export { Button, ButtonInline, argoVariants };
409
408
 
410
- //# sourceMappingURL=Button-Ca4Q3VJU.js.map
409
+ //# sourceMappingURL=Button-B21oVcPU.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button-B21oVcPU.js","names":[],"sources":["../src/components/Button/styles.ts","../src/components/Button/Button.tsx","../src/components/Button/ButtonInline.tsx"],"sourcesContent":["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-50',\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-50',\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 type { ComponentProps } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { argoVariants, variants } from './styles';\n\n/** Props for `Button`; icons are composed as children. */\ntype Props = {\n /** Replaces the leading content with a spinner and disables the button visually. 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/**\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 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={ref}\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 type={type}\n onClick={handleClick}\n className={cn(classNames)}\n >\n {isLoading && <Loader2 className=\"tw:size-4 tw:shrink-0 tw:animate-spin\" />}\n <Slottable>{isLoading && isIconOnly ? null : 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":";;;;;;;AAQA,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;CACA;CAGA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;CACA,UAAU;EACR,OAAO,EACL,MAAM,CAAC,WAAW,EACpB;EACA,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IAEA;IACA;GACF;GAIA,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IAEA;IAMA;IACA;IACA;IACA;IACA;IACA;GACF;GAGA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;IAEA;GACF;GAEA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GAEJ,QAAQ;IAAC;IAAc;IAAW;IAAW;GAAY;GAEzD,OAAO;IAAC;IAAc;IAAW;IAAW;GAAY;GAExD,OAAO;IAAC;IAAe;IAAa;IAAW;GAAY;GAE3D,WAAW,CAAC,YAAY;GACxB,MAAM,CAAC,WAAW;GAClB,WAAW,CAAC,WAAW;GACvB,WAAW,CAAC,WAAW;GAEvB,YAAY,CAAC;GACb,YAAY,CAAC;EACf;CACF;AACF,CACF;;;;;;;;;;;;ACzUA,MAAa,UAAU,EACrB,KACA,UACA,WAAW,OACX,WACA,OAAO,UACP,YAAY,OACZ,UAAU,OACV,SACA,UAAU,WACV,OAAO,UACP,QAAQ,OACR,GAAG,kBACQ;CACX,MAAM,aAAa,cAAc;CACjC,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,aAAa,OAAO,IAAI,CAAC,CAAC,WAAW,MAAM;CACjD,MAAM,aAAa,aACf,aAAa;EAAE;EAAS;EAAM;EAAO;CAAU,CAAC,IAChD,SAAS;EAAE;EAAM;EAAS;EAAO;CAAU,CAAC;CAEhD,MAAM,eAAoD,UAAU;EAIlE,IAHiB,MAAM,cAAc,YAAY,OAGjC,UAAU;GACxB,MAAM,eAAe;GACrB;EACF;EAEA,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACK;EAEV,iBAAe,YAAY,oBAAoB;EAC/C,gBAAc;EAEd,kBAAgB;EACV;EACN,SAAS;EACT,WAAW,GAAG,UAAU;EAX1B,UAAA,CAaG,aAAa,oBAAC,SAAD,EAAS,WAAU,wCAAyC,CAAA,GAC1E,oBAAC,WAAD,EAAA,UAAY,aAAa,aAAa,OAAO,SAAoB,CAAA,CAC7D;;AAEV;;;AC1EA,MAAM,uBAAuB,IAC3B;CACE;CAEA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;CACA,UAAU;EACR,OAAO;GACL,MAAM;IAAC;IAAmB;IAA4B;GAAyB;GAC/E,MAAM,CAAC,qDAAqD;GAC5D,QAAQ,CAAC,6CAA6C;GACtD,OAAO,CAAC,2DAA2D;GACnE,QAAQ,CAAC;EACX;EACA,SAAS;GACP,MAAM,CAAC,gBAAgB,uBAAuB;GAC9C,gBAAgB;IAAC;IAAmB;IAAI;GAAoB;GAC5D,QAAQ,CAAC;EACX;CACF;AACF,CACF;AAKA,MAAa,gBAAgB,EAC3B,KACA,UACA,WACA,SACA,OACA,OAAO,UACP,UAAU,OACV,GAAG,kBACQ;CAGX,OACE,oBAHW,UAAU,OAAO,UAG5B;EACE,GAAI;EACC;EACL,MAAM,UAAU,KAAA,IAAY;EAC5B,WAAW,qBAAqB;GAAE;GAAS;GAAO;EAAU,CAAC;EAE5D;CACG,CAAA;AAEV"}