@ckeditor/ckeditor5-ui 37.1.0 → 38.0.0-rc.1

package/src/editorui/editorui.js

@@ -8,6 +8,7 @@
 /* globals console */
 import ComponentFactory from '../componentfactory';
 import TooltipManager from '../tooltipmanager';
+import PoweredBy from './poweredby';
 import { ObservableMixin, isVisible, FocusTracker } from '@ckeditor/ckeditor5-utils';
 /**
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
@@ -39,6 +40,7 @@ export default class EditorUI extends ObservableMixin() {
         this.componentFactory = new ComponentFactory(editor);
         this.focusTracker = new FocusTracker();
         this.tooltipManager = new TooltipManager(editor);
+        this.poweredBy = new PoweredBy(editor);
         this.set('viewportOffset', this._readViewportOffsetFromConfig());
         this.once('ready', () => {
             this.isReady = true;
@@ -78,6 +80,7 @@ export default class EditorUI extends ObservableMixin() {
         this.stopListening();
         this.focusTracker.destroy();
         this.tooltipManager.destroy(this.editor);
+        this.poweredBy.destroy();
         // Clean–up the references to the CKEditor instance stored in the native editable DOM elements.
         for (const domElement of this._editableElementsMap.values()) {
             domElement.ckeditorInstance = null;

package/src/editorui/poweredby.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editorui/poweredby
+ */
+import type { Editor } from '@ckeditor/ckeditor5-core';
+declare const PoweredBy_base: {
+    new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
+    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
+};
+/**
+ * A helper that enables the "powered by" feature in the editor and renders a link to the project's
+ * webpage next to the bottom of the editable element (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default class PoweredBy extends PoweredBy_base {
+    /**
+     * Editor instance the helper was created for.
+     */
+    private readonly editor;
+    /**
+     * A reference to the balloon panel hosting and positioning the "powered by" link and logo.
+     */
+    private _balloonView;
+    /**
+     * A throttled version of the {@link #_showBalloon} method meant for frequent use to avoid performance loss.
+     */
+    private _showBalloonThrottled;
+    /**
+     * A reference to the last editable element (root, source editing area, etc.) focused by the user.
+     * Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the
+     * right element whether the user is typing or using the UI.
+     */
+    private _lastFocusedEditableElement;
+    /**
+     * Creates a "powered by" helper for a given editor. The feature is initialized on Editor#ready
+     * event.
+     *
+     * @param editor
+     */
+    constructor(editor: Editor);
+    /**
+     * Destroys the "powered by" helper along with its view.
+     */
+    destroy(): void;
+    /**
+     * Enables "powered by" label once the editor (ui) is ready.
+     */
+    private _handleEditorReady;
+    /**
+     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
+     * with the "powered by" view inside ready for positioning.
+     */
+    private _createBalloonView;
+    /**
+     * Attempts to display the balloon with the "powered by" view.
+     */
+    private _showBalloon;
+    /**
+     * Hides the "powered by" balloon if already visible.
+     */
+    private _hideBalloon;
+    /**
+     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     */
+    private _updateLastFocusedEditableElement;
+}
+export {};

package/src/editorui/poweredby.js

@@ -0,0 +1,285 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Rect, DomEmitterMixin, findClosestScrollableAncestor, verifyLicense } from '@ckeditor/ckeditor5-utils';
+import BalloonPanelView from '../panel/balloon/balloonpanelview';
+import IconView from '../icon/iconview';
+import View from '../view';
+import { throttle } from 'lodash-es';
+import poweredByIcon from '../../theme/icons/project-logo.svg';
+const ICON_WIDTH = 53;
+const ICON_HEIGHT = 10;
+const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
+const NARROW_ROOT_WIDTH_THRESHOLD = 350;
+const OFF_THE_SCREEN_POSITION = {
+    top: -99999,
+    left: -99999,
+    name: 'invalid',
+    config: {
+        withArrow: false
+    }
+};
+/**
+ * A helper that enables the "powered by" feature in the editor and renders a link to the project's
+ * webpage next to the bottom of the editable element (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default class PoweredBy extends DomEmitterMixin() {
+    /**
+     * Creates a "powered by" helper for a given editor. The feature is initialized on Editor#ready
+     * event.
+     *
+     * @param editor
+     */
+    constructor(editor) {
+        super();
+        this.editor = editor;
+        this._balloonView = null;
+        this._lastFocusedEditableElement = null;
+        this._showBalloonThrottled = throttle(this._showBalloon.bind(this), 50, { leading: true });
+        editor.on('ready', this._handleEditorReady.bind(this));
+    }
+    /**
+     * Destroys the "powered by" helper along with its view.
+     */
+    destroy() {
+        const balloon = this._balloonView;
+        if (balloon) {
+            // Balloon gets destroyed by the body collection.
+            // The powered by view gets destroyed by the balloon.
+            balloon.unpin();
+            this._balloonView = null;
+        }
+        this._showBalloonThrottled.cancel();
+        this.stopListening();
+    }
+    /**
+     * Enables "powered by" label once the editor (ui) is ready.
+     */
+    _handleEditorReady() {
+        const editor = this.editor;
+        /* istanbul ignore next -- @preserve */
+        if (verifyLicense(editor.config.get('licenseKey')) === 'VALID') {
+            return;
+        }
+        // No view means no body collection to append the powered by balloon to.
+        if (!editor.ui.view) {
+            return;
+        }
+        editor.ui.focusTracker.on('change:isFocused', (evt, data, isFocused) => {
+            this._updateLastFocusedEditableElement();
+            if (isFocused) {
+                this._showBalloon();
+            }
+            else {
+                this._hideBalloon();
+            }
+        });
+        editor.ui.focusTracker.on('change:focusedElement', (evt, data, focusedElement) => {
+            this._updateLastFocusedEditableElement();
+            if (focusedElement) {
+                this._showBalloon();
+            }
+        });
+        editor.ui.on('update', () => {
+            this._showBalloonThrottled();
+        });
+    }
+    /**
+     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
+     * with the "powered by" view inside ready for positioning.
+     */
+    _createBalloonView() {
+        const editor = this.editor;
+        const balloon = this._balloonView = new BalloonPanelView();
+        const view = new PoweredByView(editor.locale);
+        balloon.content.add(view);
+        balloon.set({
+            class: 'ck-powered-by-balloon'
+        });
+        editor.ui.view.body.add(balloon);
+        editor.ui.focusTracker.add(balloon.element);
+        this._balloonView = balloon;
+    }
+    /**
+     * Attempts to display the balloon with the "powered by" view.
+     */
+    _showBalloon() {
+        if (!this._lastFocusedEditableElement) {
+            return;
+        }
+        const attachOptions = getBalloonAttachOptions(this.editor, this._lastFocusedEditableElement);
+        if (attachOptions) {
+            if (!this._balloonView) {
+                this._createBalloonView();
+            }
+            this._balloonView.pin(attachOptions);
+        }
+    }
+    /**
+     * Hides the "powered by" balloon if already visible.
+     */
+    _hideBalloon() {
+        if (this._balloonView) {
+            this._balloonView.unpin();
+        }
+    }
+    /**
+     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     */
+    _updateLastFocusedEditableElement() {
+        const editor = this.editor;
+        const isFocused = editor.ui.focusTracker.isFocused;
+        const focusedElement = editor.ui.focusTracker.focusedElement;
+        if (!isFocused || !focusedElement) {
+            this._lastFocusedEditableElement = null;
+            return;
+        }
+        const editableEditorElements = Array.from(editor.ui.getEditableElementsNames()).map(name => {
+            return editor.ui.getEditableElement(name);
+        });
+        if (editableEditorElements.includes(focusedElement)) {
+            this._lastFocusedEditableElement = focusedElement;
+        }
+        else {
+            // If it's none of the editable element, then the focus is somewhere in the UI. Let's display powered by
+            // over the first element then.
+            this._lastFocusedEditableElement = editableEditorElements[0];
+        }
+    }
+}
+/**
+ * A view displaying a "powered by" label and project logo wrapped in a link.
+ */
+class PoweredByView extends View {
+    /**
+     * Created an instance of the "powered by" view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const iconView = new IconView();
+        const bind = this.bindTemplate;
+        iconView.set({
+            content: poweredByIcon,
+            isColorInherited: false
+        });
+        iconView.extendTemplate({
+            attributes: {
+                style: {
+                    width: ICON_WIDTH + 'px',
+                    height: ICON_HEIGHT + 'px'
+                }
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: ['ck', 'ck-powered-by'],
+                'aria-hidden': true
+            },
+            children: [
+                {
+                    tag: 'a',
+                    attributes: {
+                        href: 'https://ckeditor.com/?utm_source=ckeditor&' +
+                            'utm_medium=referral&utm_campaign=701Dn000000hVgmIAE_powered_by_ckeditor_logo',
+                        target: '_blank',
+                        tabindex: '-1'
+                    },
+                    children: [
+                        {
+                            tag: 'span',
+                            attributes: {
+                                class: ['ck', 'ck-powered-by__label']
+                            },
+                            children: ['Powered by']
+                        },
+                        iconView
+                    ],
+                    on: {
+                        dragstart: bind.to(evt => evt.preventDefault())
+                    }
+                }
+            ]
+        });
+    }
+}
+function getBalloonAttachOptions(editor, focusedEditableElement) {
+    const poweredByConfig = getNormalizedConfig(editor);
+    const positioningFunction = poweredByConfig.side === 'right' ?
+        getLowerRightCornerPosition(focusedEditableElement, poweredByConfig) :
+        getLowerLeftCornerPosition(focusedEditableElement, poweredByConfig);
+    return {
+        target: focusedEditableElement,
+        positions: [positioningFunction]
+    };
+}
+function getLowerRightCornerPosition(focusedEditableElement, config) {
+    return getLowerCornerPosition(focusedEditableElement, config, (rootRect, balloonRect) => {
+        return rootRect.left + rootRect.width - balloonRect.width - config.horizontalOffset;
+    });
+}
+function getLowerLeftCornerPosition(focusedEditableElement, config) {
+    return getLowerCornerPosition(focusedEditableElement, config, rootRect => rootRect.left + config.horizontalOffset);
+}
+function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft) {
+    return (editableElementRect, balloonRect) => {
+        const visibleEditableElementRect = editableElementRect.getVisible();
+        // Root cropped by ancestors.
+        if (!visibleEditableElementRect) {
+            return OFF_THE_SCREEN_POSITION;
+        }
+        if (editableElementRect.width < NARROW_ROOT_WIDTH_THRESHOLD || editableElementRect.height < NARROW_ROOT_HEIGHT_THRESHOLD) {
+            return OFF_THE_SCREEN_POSITION;
+        }
+        let balloonTop;
+        if (config.position === 'inside') {
+            balloonTop = editableElementRect.bottom - balloonRect.height;
+        }
+        else {
+            balloonTop = editableElementRect.bottom - balloonRect.height / 2;
+        }
+        balloonTop -= config.verticalOffset;
+        const balloonLeft = getBalloonLeft(editableElementRect, balloonRect);
+        if (config.position === 'inside') {
+            const newBalloonRect = balloonRect.clone().moveTo(balloonLeft, balloonTop);
+            // The watermark cannot be positioned in this corner because the corner is not quite visible.
+            if (newBalloonRect.getIntersectionArea(visibleEditableElementRect) < newBalloonRect.getArea()) {
+                return OFF_THE_SCREEN_POSITION;
+            }
+        }
+        else {
+            const firstScrollableEditableElementAncestor = findClosestScrollableAncestor(focusedEditableElement);
+            if (firstScrollableEditableElementAncestor) {
+                const firstScrollableEditableElementAncestorRect = new Rect(firstScrollableEditableElementAncestor);
+                // The watermark cannot be positioned in this corner because the corner is "not visible enough".
+                if (visibleEditableElementRect.bottom + balloonRect.height / 2 > firstScrollableEditableElementAncestorRect.bottom) {
+                    return OFF_THE_SCREEN_POSITION;
+                }
+            }
+        }
+        return {
+            top: balloonTop,
+            left: balloonLeft,
+            name: `position_${config.position}-side_${config.side}`,
+            config: {
+                withArrow: false
+            }
+        };
+    };
+}
+function getNormalizedConfig(editor) {
+    const userConfig = editor.config.get('ui.poweredBy');
+    const position = userConfig && userConfig.position || 'border';
+    return {
+        position,
+        verticalOffset: position === 'inside' ? 5 : 0,
+        horizontalOffset: 5,
+        side: editor.locale.contentLanguageDirection === 'ltr' ? 'right' : 'left',
+        ...userConfig
+    };
+}

package/src/index.d.ts

@@ -17,6 +17,8 @@ export { default as SwitchButtonView } from './button/switchbuttonview';
 export * from './colorgrid/utils';
 export { default as ColorGridView, type ColorDefinition } from './colorgrid/colorgridview';
 export { default as ColorTileView } from './colorgrid/colortileview';
+export { default as ColorPickerView } from './colorpicker/colorpickerview';
+export type { ColorPickerConfig, ColorPickerOutputFormat } from './colorpicker/utils';
 export { default as ComponentFactory } from './componentfactory';
 export { default as DropdownView } from './dropdown/dropdownview';
 export { default as DropdownPanelView } from './dropdown/dropdownpanelview';
@@ -53,4 +55,5 @@ export { default as BalloonToolbar, type BalloonToolbarShowEvent } from './toolb
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar';
 export { default as View, type UIViewRenderEvent } from './view';
 export { default as ViewCollection } from './viewcollection';
+export { default as ColorPaletteIcon } from '../theme/icons/color-palette.svg';
 import './augmentation';

package/src/index.js

@@ -16,6 +16,7 @@ export { default as SwitchButtonView } from './button/switchbuttonview';
 export * from './colorgrid/utils';
 export { default as ColorGridView } from './colorgrid/colorgridview';
 export { default as ColorTileView } from './colorgrid/colortileview';
+export { default as ColorPickerView } from './colorpicker/colorpickerview';
 export { default as ComponentFactory } from './componentfactory';
 export { default as DropdownView } from './dropdown/dropdownview';
 export { default as DropdownPanelView } from './dropdown/dropdownpanelview';
@@ -52,4 +53,5 @@ export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar';
 export { default as View } from './view';
 export { default as ViewCollection } from './viewcollection';
+export { default as ColorPaletteIcon } from '../theme/icons/color-palette.svg';
 import './augmentation';

package/src/list/listitemview.js

@@ -25,7 +25,8 @@ export default class ListItemView extends View {
                     'ck',
                     'ck-list__item',
                     bind.if('isVisible', 'ck-hidden', value => !value)
-                ]
+                ],
+                role: 'presentation'
             },
             children: this.children
         });

package/src/list/listview.d.ts

@@ -32,6 +32,12 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
      * @observable
      */
     ariaLabel: string | undefined;
+    /**
+     * The property reflected by the `role` DOM attribute to be used by assistive technologies.
+     *
+     * @observable
+     */
+    role: string | undefined;
     /**
      * Helps cycling over focusable {@link #items} in the list.
      */

package/src/list/listview.js

@@ -34,6 +34,7 @@ export default class ListView extends View {
             }
         });
         this.set('ariaLabel', undefined);
+        this.set('role', undefined);
         this.setTemplate({
             tag: 'ul',
             attributes: {
@@ -42,6 +43,7 @@ export default class ListView extends View {
                     'ck-reset',
                     'ck-list'
                 ],
+                role: bind.to('role'),
                 'aria-label': bind.to('ariaLabel')
             },
             children: this.items

package/src/toolbar/block/blocktoolbar.js

@@ -7,7 +7,7 @@
  */
 /* global window */
 import { Plugin, icons } from '@ckeditor/ckeditor5-core';
-import { Rect, ResizeObserver, getOptimalPosition, env, toUnit } from '@ckeditor/ckeditor5-utils';
+import { Rect, ResizeObserver, getOptimalPosition, toUnit } from '@ckeditor/ckeditor5-utils';
 import BlockButtonView from './blockbuttonview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview';
 import ToolbarView from '../toolbarview';
@@ -177,12 +177,6 @@ export default class BlockToolbar extends Plugin {
             isFloating: true
         });
         toolbarView.ariaLabel = t('Editor block content toolbar');
-        // When toolbar lost focus then panel should hide.
-        toolbarView.focusTracker.on('change:isFocused', (evt, name, is) => {
-            if (!is) {
-                this._hidePanel();
-            }
-        });
         return toolbarView;
     }
     /**
@@ -209,27 +203,11 @@ export default class BlockToolbar extends Plugin {
         const editor = this.editor;
         const t = editor.t;
         const buttonView = new BlockButtonView(editor.locale);
-        const bind = buttonView.bindTemplate;
         buttonView.set({
             label: t('Edit block'),
             icon: pilcrow,
             withText: false
         });
-        // Note that this piece over here overrides the default mousedown logic in ButtonView
-        // to make it work with BlockToolbar. See the implementation of the ButtonView class to learn more.
-        buttonView.extendTemplate({
-            on: {
-                mousedown: bind.to(evt => {
-                    // On Safari we have to force the focus on a button on click as it's the only browser
-                    // that doesn't do that automatically. See #12115.
-                    if (env.isSafari && this.panelView.isVisible) {
-                        this.toolbarView.focus();
-                    }
-                    // Workaround to #12184, see https://github.com/ckeditor/ckeditor5/issues/12184#issuecomment-1199147964.
-                    evt.preventDefault();
-                })
-            }
-        });
         // Bind the panelView observable properties to the buttonView.
         buttonView.bind('isOn').to(this.panelView, 'isVisible');
         buttonView.bind('tooltip').to(this.panelView, 'isVisible', isVisible => !isVisible);
@@ -259,8 +237,8 @@ export default class BlockToolbar extends Plugin {
             this._hideButton();
             return;
         }
-        // Hides the button when the editor switches to the read-only mode.
-        if (editor.isReadOnly) {
+        // Hides the button when the selection is in non-editable place.
+        if (!editor.model.canEditAt(editor.model.document.selection)) {
             this._hideButton();
             return;
         }

package/src/toolbar/toolbarview.js

@@ -83,7 +83,8 @@ export default class ToolbarView extends View {
                 'aria-label': bind.to('ariaLabel'),
                 style: {
                     maxWidth: bind.to('maxWidth')
-                }
+                },
+                tabindex: -1
             },
             children: this.children,
             on: {
@@ -98,6 +99,7 @@ export default class ToolbarView extends View {
      */
     render() {
         super.render();
+        this.focusTracker.add(this.element);
         // Children added before rendering should be known to the #focusTracker.
         for (const item of this.items) {
             this.focusTracker.add(item.element);

package/theme/components/colorpicker/colorpicker.css

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-input {
+	min-width: unset;
+}
+
+.color-picker-hex-input {
+	width: max-content;
+}
+
+.ck.ck-color-picker__row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+
+	& .ck-color-picker__hash-view {
+		padding-top: var(--ck-spacing-tiny);
+		padding-right: var(--ck-spacing-medium);
+	}
+}

package/theme/globals/_poweredby.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-powered-by-line-height: 10px;
+	--ck-powered-by-padding-top: 2px;
+	--ck-powered-by-padding-left: 4px;
+	--ck-powered-by-text-color: hsl(0, 0%, 31%);
+	--ck-powered-by-border-radius: var(--ck-border-radius);
+	--ck-powered-by-background: hsl(0, 0%, 100%);
+	--ck-powered-by-border-color: var(--ck-color-focus-border);
+}
+
+.ck.ck-balloon-panel.ck-powered-by-balloon {
+	--ck-border-radius: var(--ck-powered-by-border-radius);
+
+	border: 0;
+	box-shadow: none;
+	background: var(--ck-powered-by-background);
+	min-height: unset;
+
+	& .ck.ck-powered-by {
+		line-height: var(--ck-powered-by-line-height);
+
+		& a {
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			opacity: .66;
+			filter: grayscale(80%);
+			line-height: var(--ck-powered-by-line-height);
+			padding: var(--ck-powered-by-padding-top) var(--ck-powered-by-padding-left);
+		}
+
+		& .ck-powered-by__label {
+			font-size: 7.5px;
+			letter-spacing: -.2px;
+			padding-left: 2px;
+			text-transform: uppercase;
+			font-weight: bold;
+			margin-right: 4px;
+			cursor: pointer;
+			line-height: normal;
+			color: var(--ck-powered-by-text-color);
+
+		}
+
+		& .ck-icon {
+			display: block;
+			cursor: pointer;
+		}
+
+		&:hover {
+			& a {
+				filter: grayscale(0%);
+				opacity: 1;
+			}
+		}
+	}
+
+	&[class*="position_border"] {
+		border: var(--ck-focus-ring);
+	}
+}
+

package/theme/globals/globals.css

@@ -7,3 +7,4 @@
 @import "./_reset.css";
 @import "./_zindex.css";
 @import "./_transition.css";
+@import "./_poweredby.css";

package/theme/icons/color-palette.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.209 18.717A8.5 8.5 0 1 1 18.686 9.6h-.008l.002.12a3 3 0 0 1-2.866 2.997h-.268l-.046-.002v.002h-4.791a2 2 0 1 0 0 4 1 1 0 1 1-.128 1.992 8.665 8.665 0 0 1-.372.008Zm-3.918-7.01a1.25 1.25 0 1 0-2.415-.648 1.25 1.25 0 0 0 2.415.647ZM5.723 8.18a1.25 1.25 0 1 0 .647-2.414 1.25 1.25 0 0 0-.647 2.414ZM9.76 6.155a1.25 1.25 0 1 0 .647-2.415 1.25 1.25 0 0 0-.647 2.415Zm4.028 1.759a1.25 1.25 0 1 0 .647-2.415 1.25 1.25 0 0 0-.647 2.415Z"/></svg>

package/theme/icons/project-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="53" height="10" viewBox="0 0 53 10"><g clip-path="url(#a)"><path fill="#1C2331" d="M31.724 1.492a15.139 15.139 0 0 0 .045 1.16 2.434 2.434 0 0 0-.687-.34 3.68 3.68 0 0 0-1.103-.166 2.332 2.332 0 0 0-1.14.255 1.549 1.549 0 0 0-.686.87c-.15.41-.225.98-.225 1.712 0 .939.148 1.659.444 2.161.297.503.792.754 1.487.754.452.015.9-.094 1.294-.316.296-.174.557-.4.771-.669l.14.852h1.282V.007h-1.623v1.485ZM31 6.496a1.77 1.77 0 0 1-.494.061.964.964 0 0 1-.521-.127.758.758 0 0 1-.296-.466 3.984 3.984 0 0 1-.093-.992 4.208 4.208 0 0 1 .098-1.052.753.753 0 0 1 .307-.477 1.08 1.08 0 0 1 .55-.122c.233-.004.466.026.69.089l.483.144v2.553c-.11.076-.213.143-.307.2a1.73 1.73 0 0 1-.417.189ZM35.68 0l-.702.004c-.322.002-.482.168-.48.497l.004.581c.002.33.164.493.486.49l.702-.004c.322-.002.481-.167.48-.496L36.165.49c-.002-.33-.164-.493-.486-.491ZM36.145 2.313l-1.612.01.034 5.482 1.613-.01-.035-5.482ZM39.623.79 37.989.8 38 2.306l-.946.056.006 1.009.949-.006.024 2.983c.003.476.143.844.419 1.106.275.26.658.39 1.148.387.132 0 .293-.01.483-.03.19-.02.38-.046.57-.08.163-.028.324-.068.482-.119l-.183-1.095-.702.004a.664.664 0 0 1-.456-.123.553.553 0 0 1-.14-.422l-.016-2.621 1.513-.01-.006-1.064-1.514.01-.01-1.503ZM46.226 2.388c-.41-.184-.956-.274-1.636-.27-.673.004-1.215.101-1.627.29-.402.179-.72.505-.888.91-.18.419-.268.979-.264 1.68.004.688.1 1.24.285 1.655.172.404.495.724.9.894.414.18.957.268 1.63.264.68-.004 1.224-.099 1.632-.284.4-.176.714-.501.878-.905.176-.418.263-.971.258-1.658-.004-.702-.097-1.261-.28-1.677a1.696 1.696 0 0 0-.888-.9Zm-.613 3.607a.77.77 0 0 1-.337.501 1.649 1.649 0 0 1-1.317.009.776.776 0 0 1-.343-.497 4.066 4.066 0 0 1-.105-1.02 4.136 4.136 0 0 1 .092-1.03.786.786 0 0 1 .337-.507 1.59 1.59 0 0 1 1.316-.008.79.79 0 0 1 .344.502c.078.337.113.683.105 1.03.012.343-.019.685-.092 1.02ZM52.114 2.07a2.67 2.67 0 0 0-1.128.278c-.39.191-.752.437-1.072.73l-.157-.846-1.273.008.036 5.572 1.623-.01-.024-3.78c.35-.124.646-.22.887-.286.26-.075.53-.114.8-.118l.45-.003.144-1.546-.286.001ZM22.083 7.426l-1.576-2.532a2.137 2.137 0 0 0-.172-.253 1.95 1.95 0 0 0-.304-.29.138.138 0 0 1 .042-.04 1.7 1.7 0 0 0 .328-.374l1.75-2.71c.01-.015.025-.028.024-.048-.01-.01-.021-.007-.031-.007L20.49 1.17a.078.078 0 0 0-.075.045l-.868 1.384c-.23.366-.46.732-.688 1.099a.108.108 0 0 1-.112.06c-.098-.005-.196-.001-.294-.002-.018 0-.038.006-.055-.007.002-.02.002-.039.005-.058a4.6 4.6 0 0 0 .046-.701V1.203c0-.02-.009-.032-.03-.03h-.033L16.93 1.17c-.084 0-.073-.01-.073.076v6.491c-.001.018.006.028.025.027h1.494c.083 0 .072.007.072-.071v-2.19c0-.055-.003-.11-.004-.166a3.366 3.366 0 0 0-.05-.417h.06c.104 0 .209.002.313-.002a.082.082 0 0 1 .084.05c.535.913 1.07 1.824 1.607 2.736a.104.104 0 0 0 .103.062c.554-.003 1.107-.002 1.66-.002l.069-.003-.019-.032-.188-.304ZM27.112 6.555c-.005-.08-.004-.08-.082-.08h-2.414c-.053 0-.106-.003-.159-.011a.279.279 0 0 1-.246-.209.558.558 0 0 1-.022-.15c0-.382 0-.762-.002-1.143 0-.032.007-.049.042-.044h2.504c.029.003.037-.012.034-.038V3.814c0-.089.013-.078-.076-.078h-2.44c-.07 0-.062.003-.062-.06v-.837c0-.047.004-.093.013-.14a.283.283 0 0 1 .241-.246.717.717 0 0 1 .146-.011h2.484c.024.002.035-.009.036-.033l.003-.038.03-.496c.01-.183.024-.365.034-.548.005-.085.003-.087-.082-.094-.218-.018-.437-.038-.655-.05a17.845 17.845 0 0 0-.657-.026 72.994 72.994 0 0 0-1.756-.016 1.7 1.7 0 0 0-.471.064 1.286 1.286 0 0 0-.817.655c-.099.196-.149.413-.145.633v3.875c0 .072.003.144.011.216a1.27 1.27 0 0 0 .711 1.029c.228.113.48.167.734.158.757-.005 1.515.002 2.272-.042.274-.016.548-.034.82-.053.03-.002.043-.008.04-.041-.008-.104-.012-.208-.019-.312a69.964 69.964 0 0 1-.05-.768ZM16.14 7.415l-.127-1.075c-.004-.03-.014-.04-.044-.037a13.125 13.125 0 0 1-.998.073c-.336.01-.672.02-1.008.016-.116-.001-.233-.014-.347-.039a.746.746 0 0 1-.45-.262c-.075-.1-.132-.211-.167-.33a3.324 3.324 0 0 1-.126-.773 9.113 9.113 0 0 1-.015-.749c0-.285.022-.57.065-.852.023-.158.066-.312.127-.46a.728.728 0 0 1 .518-.443 1.64 1.64 0 0 1 .397-.048c.628-.001 1.255.003 1.882.05.022.001.033-.006.036-.026l.003-.031.06-.55c.019-.177.036-.355.057-.532.004-.034-.005-.046-.04-.056a5.595 5.595 0 0 0-1.213-.21 10.783 10.783 0 0 0-.708-.02c-.24-.003-.48.01-.719.041a3.477 3.477 0 0 0-.625.14 1.912 1.912 0 0 0-.807.497c-.185.2-.33.433-.424.688a4.311 4.311 0 0 0-.24 1.096c-.031.286-.045.572-.042.86-.006.43.024.86.091 1.286.04.25.104.497.193.734.098.279.26.53.473.734.214.205.473.358.756.446.344.11.702.17 1.063.177a8.505 8.505 0 0 0 1.578-.083 6.11 6.11 0 0 0 .766-.18c.03-.008.047-.023.037-.057a.157.157 0 0 1-.003-.025Z"/><path fill="#AFE229" d="M6.016 6.69a1.592 1.592 0 0 0-.614.21c-.23.132-.422.32-.56.546-.044.072-.287.539-.287.539l-.836 1.528.009.006c.038.025.08.046.123.063.127.046.26.07.395.073.505.023 1.011-.007 1.517-.003.29.009.58.002.869-.022a.886.886 0 0 0 .395-.116.962.962 0 0 0 .312-.286c.056-.083.114-.163.164-.249.24-.408.48-.816.718-1.226.075-.128.148-.257.222-.386l.112-.192a1.07 1.07 0 0 0 .153-.518l-1.304.023s-1.258-.005-1.388.01Z"/><path fill="#771BFF" d="m2.848 9.044.76-1.39.184-.352c-.124-.067-.245-.14-.367-.21-.346-.204-.706-.384-1.045-.6a.984.984 0 0 1-.244-.207c-.108-.134-.136-.294-.144-.46-.021-.409-.002-.818-.009-1.227-.003-.195 0-.39.003-.585.004-.322.153-.553.427-.713l.833-.488c.22-.13.44-.257.662-.385.05-.029.105-.052.158-.077.272-.128.519-.047.76.085l.044.028c.123.06.242.125.358.196.318.178.635.357.952.537.095.056.187.117.275.184.194.144.254.35.266.578.016.284.007.569.006.853-.001.28.004.558 0 .838.592-.003 1.259 0 1.259 0l.723-.013c-.003-.292-.007-.584-.007-.876 0-.524.015-1.048-.016-1.571-.024-.42-.135-.8-.492-1.067a5.02 5.02 0 0 0-.506-.339A400.52 400.52 0 0 0 5.94.787C5.722.664 5.513.524 5.282.423 5.255.406 5.228.388 5.2.373 4.758.126 4.305-.026 3.807.21c-.097.046-.197.087-.29.14A699.896 699.896 0 0 0 .783 1.948c-.501.294-.773.717-.778 1.31-.004.36-.009.718-.001 1.077.016.754-.017 1.508.024 2.261.016.304.07.6.269.848.127.15.279.28.448.382.622.4 1.283.734 1.92 1.11l.183.109Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h52.4v10H0z"/></clipPath></defs></svg>