@keboola/design 1.2.1 → 1.3.0

package/src/components/Table/Table.stories.tsx

@@ -1,5 +1,13 @@
-import type { ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode, useMemo, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { EmptyState } from '../../blocks/EmptyState';
+import { ErrorState } from '../../blocks/ErrorState';
+import { SearchInput } from '../../blocks/SearchInput';
+import { Button } from '../../components/Button';
+import { Icon } from '../../components/Icon';
+import { Pagination } from '../../components/Pagination';
 
 import { Table } from './Table';
 
@@ -104,3 +112,217 @@ export const Overflow: Story = {
 export const Bordered: Story = {
   render: (props) => <Component {...props} bordered />,
 };
+
+type Token = { id: string; name: string; createdAt: string; lastUsed: string };
+
+const pad2 = (n: number) => String(n).padStart(2, '0');
+
+const tokens: Token[] = Array.from({ length: 23 }, (_, i) => ({
+  id: `tok_${String(i + 1).padStart(3, '0')}`,
+  name: `Token ${i + 1}${i % 3 === 0 ? ' (production)' : i % 3 === 1 ? ' (staging)' : ''}`,
+  createdAt: `2026-01-${pad2((i % 28) + 1)}`,
+  lastUsed: `2026-05-${pad2((i % 28) + 1)}`,
+}));
+
+type SortKey = keyof Token;
+type SortDir = 'asc' | 'desc';
+const PAGE_SIZE = 5;
+
+const sortAttr = (active: boolean, direction: SortDir) =>
+  !active ? 'none' : direction === 'asc' ? 'ascending' : 'descending';
+
+const SortHeader = ({
+  active,
+  direction,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  direction: SortDir;
+  onClick: () => void;
+  children: ReactNode;
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="tw-group tw-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-border-0 tw-bg-transparent tw-p-0 tw-font-medium tw-text-inherit"
+  >
+    {children}
+    <Icon
+      icon={!active ? 'sort' : direction === 'asc' ? 'angle-up' : 'angle-down'}
+      className="tw-size-3 tw-text-muted-foreground"
+    />
+  </button>
+);
+
+/**
+ * Canonical entity-list pattern: `Table` (presentational) composed with `SearchInput`, `Pagination`,
+ * and `EmptyState` / `ErrorState`. State (sort / name search / page) is plain React `useState` —
+ * scales up to TanStack Table's headless model (`@tanstack/react-table`,
+ * https://tanstack.com/table/latest) when the consumer needs server-side pagination, multi-column
+ * sort, row selection, or a true global filter that scans every column.
+ *
+ * Pattern reference: TanStack "headless UI" — the state library is separable from the presentational
+ * layer (https://tanstack.com/table/latest/docs/introduction#what-is-headless-ui).
+ */
+export const AsEntityList: Story = {
+  name: 'As entity list',
+  parameters: { layout: 'padded' },
+  render: () => {
+    const [query, setQuery] = useState('');
+    const [sortKey, setSortKey] = useState<SortKey>('name');
+    const [sortDir, setSortDir] = useState<SortDir>('asc');
+    const [page, setPage] = useState(0);
+
+    const filtered = useMemo(() => {
+      const q = query.trim().toLowerCase();
+      const matched = q ? tokens.filter((t) => t.name.toLowerCase().includes(q)) : tokens;
+      return [...matched].sort((a, b) => {
+        const av = a[sortKey];
+        const bv = b[sortKey];
+        return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
+      });
+    }, [query, sortKey, sortDir]);
+
+    const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    const safePage = Math.min(page, pageCount - 1);
+    const pageRows = filtered.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE);
+
+    const toggleSort = (key: SortKey) => {
+      if (key === sortKey) {
+        setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+      } else {
+        setSortKey(key);
+        setSortDir('asc');
+      }
+      setPage(0);
+    };
+
+    return (
+      <div className="tw-flex tw-w-[720px] tw-flex-col tw-gap-4">
+        <SearchInput
+          allowClear
+          placeholder="Search tokens…"
+          value={query}
+          onValueChange={(v) => {
+            setQuery(v);
+            setPage(0);
+          }}
+          className="tw-w-72"
+        />
+        {filtered.length === 0 ? (
+          <EmptyState>
+            <EmptyState.Icon>
+              <Icon icon="search" />
+            </EmptyState.Icon>
+            <EmptyState.Title>No tokens match your search</EmptyState.Title>
+            <EmptyState.Description>
+              Try a different query or clear the search to see all tokens.
+            </EmptyState.Description>
+            <EmptyState.Actions>
+              <Button variant="outline" onClick={() => setQuery('')}>
+                Clear search
+              </Button>
+            </EmptyState.Actions>
+          </EmptyState>
+        ) : (
+          <>
+            <Table bordered>
+              <Table.Header>
+                <Table.Row>
+                  <Table.Head aria-sort={sortAttr(sortKey === 'name', sortDir)}>
+                    <SortHeader
+                      active={sortKey === 'name'}
+                      direction={sortDir}
+                      onClick={() => toggleSort('name')}
+                    >
+                      Name
+                    </SortHeader>
+                  </Table.Head>
+                  <Table.Head aria-sort={sortAttr(sortKey === 'createdAt', sortDir)}>
+                    <SortHeader
+                      active={sortKey === 'createdAt'}
+                      direction={sortDir}
+                      onClick={() => toggleSort('createdAt')}
+                    >
+                      Created
+                    </SortHeader>
+                  </Table.Head>
+                  <Table.Head aria-sort={sortAttr(sortKey === 'lastUsed', sortDir)}>
+                    <SortHeader
+                      active={sortKey === 'lastUsed'}
+                      direction={sortDir}
+                      onClick={() => toggleSort('lastUsed')}
+                    >
+                      Last used
+                    </SortHeader>
+                  </Table.Head>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {pageRows.map((token) => (
+                  <Table.Row key={token.id}>
+                    <Table.Cell>{token.name}</Table.Cell>
+                    <Table.Cell>{token.createdAt}</Table.Cell>
+                    <Table.Cell>{token.lastUsed}</Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+            <Pagination>
+              <Pagination.Content>
+                <Pagination.Item>
+                  <Pagination.Previous
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                    disabled={safePage === 0}
+                    aria-disabled={safePage === 0}
+                  />
+                </Pagination.Item>
+                {Array.from({ length: pageCount }, (_, i) => (
+                  <Pagination.Item key={i}>
+                    <Pagination.Button active={i === safePage} onClick={() => setPage(i)}>
+                      {i + 1}
+                    </Pagination.Button>
+                  </Pagination.Item>
+                ))}
+                <Pagination.Item>
+                  <Pagination.Next
+                    onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+                    disabled={safePage === pageCount - 1}
+                    aria-disabled={safePage === pageCount - 1}
+                  />
+                </Pagination.Item>
+              </Pagination.Content>
+            </Pagination>
+          </>
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Failure surface for the entity-list pattern. Swap the table body for `ErrorState` when the
+ * underlying fetch errors. Mirrors the `AsEntityList` story shape so consumers can copy/paste either.
+ */
+export const AsEntityListError: Story = {
+  name: 'As entity list — error',
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div className="tw-flex tw-w-[720px] tw-flex-col tw-gap-4">
+      <SearchInput allowClear placeholder="Search tokens…" disabled className="tw-w-72" />
+      <ErrorState>
+        <ErrorState.Icon>
+          <Icon icon="circle-exclamation" />
+        </ErrorState.Icon>
+        <ErrorState.Title>Couldn&apos;t load tokens</ErrorState.Title>
+        <ErrorState.Description>
+          The request to load tokens failed. Check your connection and try again.
+        </ErrorState.Description>
+        <ErrorState.Actions>
+          <Button onClick={action('retry')}>Retry</Button>
+        </ErrorState.Actions>
+      </ErrorState>
+    </div>
+  ),
+};

package/src/components/Table/Table.tsx

@@ -9,12 +9,29 @@ import { TableHead } from './TableHead';
 import { TableHeader } from './TableHeader';
 import { TableRow } from './TableRow';
 
+/**
+ * Props for `Table`. `borderCollapsed` toggles standard collapsed borders vs separate row spacing;
+ * `bordered` wraps the table in a rounded bordered container with overflow scrolling.
+ */
 type Props = {
   borderCollapsed?: boolean;
   bordered?: boolean;
   containerClassName?: string;
 } & ComponentProps<'table'>;
 
+/**
+ * Tabular data surface with header / body / row / cell compound parts.
+ *
+ * **When to use:** tabular data with named columns — entity lists with shared schema (jobs, buckets,
+ * tables), sortable rows, row-level actions. Compose `Table.Header` + `Table.Body` + `Table.Row` +
+ * `Table.Head` / `Table.Cell`.
+ * **When NOT to use:** for heterogeneous lists where each row has its own shape use a `Card` list;
+ * for tree / hierarchy layouts use a custom recursive list with `Table` per level.
+ * **Composition:** wrap in `PageLayout.Content`. For sortable / filterable behaviour bring your own
+ * state library (TanStack Table is a common pairing); this component is presentational.
+ *
+ * @see RECIPES.md#list-detail — for a list-table + row-click-to-detail pattern
+ */
 export const Table = ({
   borderCollapsed = true,
   bordered = false,

package/src/components/Tabs.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import * as RadixTabs from '@radix-ui/react-tabs';
 
+import { X } from '../icons';
 import { cn } from '../utils';
 
 import { Button } from './Button';
@@ -18,12 +19,29 @@ const TRIGGER_COMMON = {
     'hover:enabled:tw-text-secondary-500 hover:enabled:tw-border-secondary-500 hover:enabled:tw-cursor-pointer',
 };
 
+/**
+ * Tab trigger descriptor. `value` keys the tab; `title` is the visible label; `onClose` makes the tab
+ * closable (renders an x button on hover). Generic over `T` so consumers can use string-literal unions.
+ */
 type Trigger<T extends string> = {
   value: T;
   title: ReactNode;
+  /** When set, renders an inline close button on the trigger. Called with the tab's `value`. */
   onClose?: (value: T) => void;
 } & Omit<RadixTabs.TabsTriggerProps, 'title'>;
 
+/**
+ * Tabbed navigation with a single content area. Built on Radix Tabs.
+ *
+ * **When to use:** switching between sibling views of the same context (overview / runs / settings on a
+ * detail page; sections inside a modal body). The triggers row is horizontally scrollable on overflow.
+ * **When NOT to use:** for top-level routing prefer `PageHeader` `headerNav` slot or `PageLayout.Tabs`;
+ * for accordion-style disclosure use `Collapsible`.
+ * **Composition:** pass `triggers` as the declarative list and one or more `TabsContent` children keyed
+ * by `value`. Use `compact` for dense in-modal tabs.
+ *
+ * @see RECIPES.md#page-header-tabs — for the page-header + routed tabs pattern
+ */
 const Tabs = <T extends string>({
   triggers,
   compact = false,
@@ -76,7 +94,6 @@ const Tabs = <T extends string>({
                   <div>
                     {title}
                     <Button
-                      icon="xmark"
                       variant="inline"
                       size="icon-3xs"
                       disabled={rest.disabled}
@@ -85,7 +102,9 @@ const Tabs = <T extends string>({
                       onMouseDown={(e) => e.preventDefault()}
                       className="!tw-size-8 tw-opacity-0 tw-duration-200 group-hover/tab-trigger:tw-opacity-100"
                       aria-label="Close tab"
-                    />
+                    >
+                      <X className="tw-size-4" />
+                    </Button>
                   </div>
                 </RadixTabs.Trigger>
               );
@@ -104,6 +123,10 @@ const Tabs = <T extends string>({
   );
 };
 
+/**
+ * Content panel for a single tab. Matched to a `Tabs` trigger by `value`. Receives `tabIndex={-1}` so the
+ * panel is focusable for screen readers without being a tab stop.
+ */
 const TabsContent = (props: RadixTabs.TabsContentProps) => (
   <RadixTabs.Content tabIndex={-1} {...props} />
 );

package/src/components/Toast/ToastDismiss.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps, ElementRef, Ref } from 'react';
 
+import { X } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
 
 type Props = ComponentProps<'button'>;
 
@@ -21,7 +21,7 @@ export const ToastDismiss = ({
       'tailwindcss-preflight',
       '[&_svg]:tw-aspect-square',
       '[&_svg]:tw-size-4',
-      '[&_svg]:tw-p-1',
+      '[&_svg]:tw-m-1',
 
       'tw-text-white',
       'group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground',
@@ -30,7 +30,7 @@ export const ToastDismiss = ({
     type="button"
     {...rest}
   >
-    <Icon icon="times" />
+    <X />
     <span className="tw-sr-only">Dismiss</span>
   </button>
 );

package/src/components/Toast/ToastRoot.tsx

@@ -1,10 +1,11 @@
-import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import { type Action, toast as sonnerToast } from 'sonner';
 
+import { AlertCircle, AlertTriangle, CircleCheck, Info, Loader2 } from '../../icons';
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
+import { renderLegacyIcon } from '../../utils/legacyIcon';
 
 import { ToastAction } from './ToastAction';
 import { ToastDescription } from './ToastDescription';
@@ -55,12 +56,11 @@ const variants = cva(
 type Variants = VariantProps<typeof variants>;
 type Variant = NonNullable<Variants['variant']>;
 type VariantIcon = Exclude<Variant, 'default'>;
-type Icon = ComponentProps<typeof Icon>['icon'];
 
 type Props = {
   id: string | number;
   title: ReactNode;
-  icon?: Icon;
+  icon?: ReactNode;
   description?: ReactNode;
   action?: Action;
   loading?: boolean;
@@ -68,11 +68,11 @@ type Props = {
   // offset?: number;
 } & Variants;
 
-const DEFAULT_VARIANT_ICON: Record<VariantIcon, ComponentProps<typeof Icon>['icon']> = {
-  error: 'exclamation-triangle',
-  info: 'info-circle',
-  success: 'check-circle',
-  warning: 'exclamation-circle',
+const DEFAULT_VARIANT_ICON: Record<VariantIcon, ReactNode> = {
+  error: <AlertTriangle />,
+  info: <Info />,
+  success: <CircleCheck />,
+  warning: <AlertCircle />,
 };
 
 export const ToastRoot = ({
@@ -85,9 +85,9 @@ export const ToastRoot = ({
   loading = false,
   icon: iconProp,
 }: Props) => {
-  const icon: Icon | null = (() => {
-    if (loading) return 'spinner';
-    if (iconProp) return iconProp;
+  const icon: ReactNode = (() => {
+    if (loading) return <Loader2 className="tw-animate-spin" />;
+    if (iconProp) return renderLegacyIcon(iconProp);
     if (variant === 'default' || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -100,20 +100,25 @@ export const ToastRoot = ({
   return (
     <div data-variant={variant} className={cn(variants({ variant }))}>
       {icon && (
-        <Icon
+        <span
           data-slot="toast-icon"
-          spin={loading}
           className={cn(
-            // styles
+            'tw-inline-flex',
+            'tw-items-center',
+            'tw-justify-center',
+            // styles — container at 20px with no padding so the 20px Lucide
+            // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
+            // 16px child into 8px of visible space)
             'tw-aspect-square',
-            'tw-size-4',
+            'tw-size-5',
             'tw-shrink-0',
-            'tw-p-1',
+            '[&_svg]:tw-size-5',
             'tw-text-white',
             'group-data-[variant=default]/toast:tw-text-popover-foreground',
           )}
-          icon={icon}
-        />
+        >
+          {icon}
+        </span>
       )}
 
       <ToastTitle>{title}</ToastTitle>

package/src/components/Toggle/Toggle.tsx

@@ -3,7 +3,7 @@ import { Root } from '@radix-ui/react-toggle';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '../../utils';
-import { Icon } from '../Icon';
+import { renderLegacyIcon } from '../../utils/legacyIcon';
 
 const toggleVariants = cva(
   [
@@ -72,9 +72,12 @@ const toggleVariants = cva(
           'hover:aria-pressed:tw-from-secondary-700',
           'hover:aria-pressed:tw-to-purple-700',
 
-          // icon color - gradient when off, white when on
-          '[&_path]:tw-fill-aigradient-600',
-          '[&_path]:aria-pressed:tw-fill-white',
+          // icon color - gradient stroke when off, white stroke when on.
+          // Lucide icons are stroke-based; targeting every shape (`*`)
+          // catches paths, circles, and other non-path sub-shapes so the
+          // whole glyph picks up the gradient.
+          '[&_*]:tw-stroke-aigradient-600',
+          '[&_*]:aria-pressed:tw-stroke-white',
           '*:aria-pressed:tw-text-white',
         ],
         'ai-vivid': [
@@ -150,7 +153,7 @@ const toggleVariants = cva(
 );
 
 type Props = {
-  icon?: ComponentProps<typeof Icon>['icon'];
+  icon?: ReactNode;
   badge?: ReactNode;
 } & ComponentProps<typeof Root> &
   Omit<VariantProps<typeof toggleVariants>, 'iconOnly'>;
@@ -182,7 +185,9 @@ export const Toggle = ({
         </span>
       )}
       {icon && (
-        <Icon icon={icon} className="tw-inline-block tw-size-4 tw-shrink-0 tw-align-middle" />
+        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg]:tw-size-4">
+          {renderLegacyIcon(icon)}
+        </span>
       )}
 
       {isAiVariant ? (

package/src/components/Tooltip/Tooltip.tsx

@@ -15,19 +15,42 @@ type TriggerProps = {
   triggerAsChild?: boolean;
 };
 
+/**
+ * Props for `Tooltip`. `tooltip` is the popup content; `children` is the trigger element.
+ * `variant` auto-resolves to `"explanatory"` for strings >30 chars, else `"action"`.
+ */
 export type Props = {
+  /** Keep the tooltip visible when the user clicks the trigger (useful for click-to-copy feedback). */
   keepOpenOnTriggerClick?: boolean;
+  /** Content rendered inside the tooltip. Plain text only — no interactive elements (use `HoverCard` or `Popover` for that). */
   tooltip: ReactNode;
   children: ReactNode;
   placement?: ComponentProps<typeof Content>['side'];
+  /** Forcibly hide the tooltip regardless of hover state. */
   forceHide?: boolean;
+  /** Forcibly show the tooltip regardless of hover state. Useful for guided-tour overlays. */
   forceShow?: boolean;
   className?: string;
 } & TriggerProps &
   Pick<ComponentProps<typeof TooltipContent>, 'variant' | 'className'>;
 
+/** Re-export of Radix `Tooltip.Provider`. Mount once at the app root so tooltips share delay state. */
 export const TooltipProvider = Provider;
 
+/**
+ * Short plain-text label that appears on hover or focus.
+ *
+ * **When to use:** describing an icon-only `Button`, explaining a disabled control, or labelling a
+ * truncated value. Plain text only — auto-switches to the longer `"explanatory"` variant when the string
+ * exceeds 30 characters.
+ * **When NOT to use:** for rich preview content (multiple lines, formatted text, structured data) use
+ * `HoverCard`; for tooltips containing links or buttons use `Popover` (interactive elements break a11y
+ * inside a `Tooltip`).
+ * **Composition:** wrap any focusable element via `triggerAsChild` so the tooltip targets the underlying
+ * native element. Mount `TooltipProvider` once at the app root.
+ *
+ * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern
+ */
 export const Tooltip = ({
   tooltip,
   children,

package/src/components/ZoomableSvg/ZoomableSvg.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { ClipboardButton } from '../../blocks/ClipboardButton';
+import { Maximize2, Minimize2 } from '../../icons';
 import { cn } from '../../utils';
 import { Button } from '../Button';
 import { Tooltip } from '../Tooltip';
@@ -159,15 +160,16 @@ export const ZoomableSvg = ({ html, copyText, className }: Props) => {
           <Button
             size="icon-sm"
             variant="outline"
-            icon={
-              isFullscreen
-                ? 'down-left-and-up-right-to-center'
-                : 'up-right-and-down-left-from-center'
-            }
             aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
             onClick={() => setIsFullscreen((f) => !f)}
             argo
-          />
+          >
+            {isFullscreen ? (
+              <Minimize2 className="tw-size-4" />
+            ) : (
+              <Maximize2 className="tw-size-4" />
+            )}
+          </Button>
         </Tooltip>
       </div>
     </div>

package/src/icons/Keboola.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import type { LucideIcon, LucideProps } from 'lucide-react';
+
+// `forwardRef` here is required for type compatibility with `LucideIcon`
+// (a `ForwardRefExoticComponent` from lucide-react). React 19's ref-as-prop
+// pattern produces a plain function component which isn't structurally
+// assignable to `LucideIcon`, so consumers couldn't pass `Keboola`
+// interchangeably with imported Lucide icons (e.g. `<Button><Keboola className="tw-size-4" /></Button>`).
+// oxlint-disable-next-line react-x/no-forward-ref
+export const Keboola: LucideIcon = forwardRef<SVGSVGElement, LucideProps>(
+  ({ size = 24, color = 'currentColor', className, children, ...rest }, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 300 512"
+      fill={color}
+      className={className}
+      {...rest}
+    >
+      <path d="M152 320C79.7 320 24.5 233.9 24.5 124.7C24.5 15.6 70.5 0 152 0s123.6 15.6 123.6 124.7C275.5 233.9 217.7 320 152 320zm-8.7-50.5c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm55.7 0c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm68.9 115.1c10.2 9.3 20.2 20.5 29 35c5.9 9.7 2.6 22.1-7.5 27.8c-3.4 1.9-7.1 2.8-10.7 2.8c-7.2 0-14.3-3.6-18.3-10c-6.8-11.1-13.8-18.9-21.7-26.1c-7.3-6.7-15.6-12.7-24.9-19.5c-.7-.5-1.4-1-2.1-1.5c-5-3.6-10-6.8-14.9-9.4c.6 1 1.2 2.1 1.8 3.2c14.4 26.4 29.2 63.1 29.2 104.9c0 11.2-9.5 20.3-21.2 20.3c-11.7 0-21.2-9.1-21.2-20.3c.1-31.8-11.6-62.3-23.8-84.9c-4-7.4-8-13.9-11.6-19.3c-3.4 5.2-7.2 11.3-11 18.3c-12.5 22.7-24.5 53.8-24.4 86c0 11.2-9.5 20.3-21.2 20.3s-21.2-9.1-21.2-20.3c.1-41.8 14.9-78.4 29.2-104.9c.6-1.1 1.2-2.1 1.8-3.2c-5 2.7-9.9 5.8-14.9 9.4c-.6 .5-1.3 .9-1.9 1.4c-9.5 6.9-17.8 12.9-25.1 19.7c-7.9 7.2-14.9 15.1-21.7 26.1c-5.9 9.7-18.9 12.9-29 7.2C.5 441.8-2.9 429.3 3.1 419.7c8.9-14.4 18.8-25.7 29-35c9.2-8.4 18.5-15.1 27.6-21.7c1-.7 2-1.4 3-2.2c4.7-3.5 9.6-6.7 14.6-9.6c-5-2.9-9.8-6.1-14.6-9.6C39.8 325 19.9 302.5 3.1 275.1c-5.9-9.7-2.6-22.1 7.5-27.8c10.1-5.7 23.1-2.5 29 7.2c14.6 23.7 31.1 42 48.7 54.9c18.9 13.7 37.4 20.5 56.5 21.5c1.7-.1 3.5-.1 5.2-.1c1.8 0 3.5 .1 5.2 .1c0 0 0 0 0 0c19.1-1.1 37.6-7.9 56.5-21.5c17.6-12.8 34.2-31.2 48.7-54.9c6-9.7 18.9-12.9 29-7.2c10.1 5.7 13.4 18.1 7.5 27.8c-16.8 27.4-36.7 49.9-59.6 66.6c-4.7 3.5-9.6 6.7-14.5 9.6c4.9 2.9 9.8 6.1 14.5 9.6c.9 .7 1.8 1.3 2.7 2c9.2 6.7 18.5 13.5 27.9 22z" />
+      {children}
+    </svg>
+  ),
+);
+
+Keboola.displayName = 'Keboola';