@rozenite/vite-plugin 1.12.0 → 1.13.0

package/src/dev-host/components/DispatchForm.tsx

@@ -0,0 +1,169 @@
+import { useState, type FormEvent } from 'react';
+import type { DevHostFlowEntry, DevHostFlowRunState, DevHostPresetEntry } from '../types.js';
+import { ClearIcon, PresetsIcon, SendIcon } from './icons.js';
+import { FlowList } from './FlowList.js';
+import { DropdownMenu, type DropdownMenuItem } from './ui/DropdownMenu.js';
+import { IconButton } from './ui/IconButton.js';
+import { Input } from './ui/Input.js';
+import { ScrollArea } from './ui/ScrollArea.js';
+import { Textarea } from './ui/Textarea.js';
+import { ToggleGroup } from './ui/ToggleGroup.js';
+
+type DispatchFormProps = {
+  commandType: string;
+  commandPayload: string;
+  flows: DevHostFlowEntry[];
+  flowRuns: DevHostFlowRunState[];
+  hasRunningFlow: (flowName: string) => boolean;
+  presets: DevHostPresetEntry[];
+  canDispatch: boolean;
+  onRunFlow: (flow: DevHostFlowEntry) => void;
+  onStopFlow: (runId: string) => void;
+  onCommandTypeChange: (value: string) => void;
+  onCommandPayloadChange: (value: string) => void;
+  onApplyPreset: (preset: DevHostPresetEntry) => void;
+  onReset: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+};
+
+export const DispatchForm = ({
+  commandType,
+  commandPayload,
+  flows,
+  flowRuns,
+  hasRunningFlow,
+  presets,
+  canDispatch,
+  onRunFlow,
+  onStopFlow,
+  onCommandTypeChange,
+  onCommandPayloadChange,
+  onApplyPreset,
+  onReset,
+  onSubmit,
+}: DispatchFormProps) => {
+  const [activeTab, setActiveTab] = useState<'dispatch' | 'flows'>('dispatch');
+  const presetItems: DropdownMenuItem<DevHostPresetEntry>[] = presets.map((preset) => ({
+    id: preset.displayName,
+    label: preset.displayName,
+    item: preset,
+  }));
+  const presetButton = (
+    <IconButton
+      type="button"
+      variant="default"
+      aria-label={presets.length > 0 ? 'Open presets' : 'No presets available'}
+      title={presets.length > 0 ? 'Presets' : 'No presets available'}
+      disabled={presets.length === 0}
+      overrides={{
+        BaseButton: {
+          style: {
+            borderRadius: '6px',
+            backgroundColor: 'rgba(255, 255, 255, 0.04)',
+            color: 'rgba(255, 255, 255, 0.88)',
+          },
+        },
+      }}
+    >
+      <PresetsIcon />
+    </IconButton>
+  );
+
+  return (
+    <div className="rz-pane">
+      <div className="rz-sidebar">
+        <div className="rz-sidebar-header">
+          <div className="rz-sidebar-title">Actions</div>
+        </div>
+
+        <ScrollArea className="rz-sidebar-scroll">
+          <div className="rz-action-tabs rz-command-form">
+            <div className="rz-action-tabs-header">
+              <ToggleGroup
+                aria-label="Action modes"
+                value={activeTab}
+                onChange={(value) => setActiveTab(value as 'dispatch' | 'flows')}
+                options={[
+                  { key: 'dispatch', label: 'Dispatch' },
+                  { key: 'flows', label: 'Flows' },
+                ]}
+              />
+
+              {activeTab === 'dispatch'
+                ? presets.length > 0
+                  ? <DropdownMenu items={presetItems} onSelect={onApplyPreset}>{presetButton}</DropdownMenu>
+                  : presetButton
+                : null}
+            </div>
+
+            {activeTab === 'dispatch' ? (
+              <div className="rz-action-tab-panel">
+                <form className="rz-action-form" onSubmit={onSubmit}>
+                  <div className="rz-field">
+                    <label className="rz-label" htmlFor="command-type">
+                      Command
+                    </label>
+                    <Input
+                      id="command-type"
+                      value={commandType}
+                      onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
+                      placeholder="get-snapshot"
+                      spellCheck={false}
+                    />
+                  </div>
+
+                  <div className="rz-field">
+                    <label className="rz-label" htmlFor="command-payload">
+                      Payload
+                    </label>
+                    <Textarea
+                      id="command-payload"
+                      value={commandPayload}
+                      onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
+                      placeholder='{"example": true}'
+                      spellCheck={false}
+                    />
+                  </div>
+
+                  <div className="rz-button-row">
+                    <IconButton
+                      type="button"
+                      variant="default"
+                      aria-label="Reset dispatcher"
+                      title="Reset dispatcher"
+                      onClick={onReset}
+                    >
+                      <ClearIcon />
+                    </IconButton>
+
+                    <IconButton
+                      type="submit"
+                      variant="primary"
+                      aria-label="Dispatch message"
+                      title="Dispatch message"
+                      disabled={!canDispatch}
+                    >
+                      <SendIcon />
+                    </IconButton>
+                  </div>
+                </form>
+              </div>
+            ) : null}
+
+            {activeTab === 'flows' ? (
+              <div className="rz-action-tab-panel">
+                <FlowList
+                  flows={flows}
+                  flowRuns={flowRuns}
+                  hasRunningFlow={hasRunningFlow}
+                  onRunFlow={onRunFlow}
+                  onStopFlow={onStopFlow}
+                />
+              </div>
+            ) : null}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};

package/src/dev-host/components/FlowList.tsx

@@ -0,0 +1,142 @@
+import { formatPayloadForCommandInput } from '../utils.js';
+import type { DevHostFlowEntry, DevHostFlowRunState } from '../types.js';
+import { Button } from './ui/Button.js';
+
+type FlowListProps = {
+  flows: DevHostFlowEntry[];
+  flowRuns: DevHostFlowRunState[];
+  hasRunningFlow: (flowName: string) => boolean;
+  onRunFlow: (flow: DevHostFlowEntry) => void;
+  onStopFlow: (runId: string) => void;
+};
+
+const getStatusLabel = (status: DevHostFlowRunState['status']) => {
+  if (status === 'running') {
+    return 'Running';
+  }
+
+  if (status === 'succeeded') {
+    return 'Completed';
+  }
+
+  if (status === 'failed') {
+    return 'Failed';
+  }
+
+  if (status === 'aborted') {
+    return 'Stopped';
+  }
+
+  return status;
+};
+
+export const FlowList = ({ flows, flowRuns, hasRunningFlow, onRunFlow, onStopFlow }: FlowListProps) => {
+  if (flows.length === 0) {
+    return <div className="rz-flow-empty-state">No flows were configured for this plugin.</div>;
+  }
+
+  const hasExecutionState = flowRuns.length > 0;
+
+  return (
+    <div className="rz-flow-panel">
+      <div className="rz-field">
+        <div className="rz-label">Available flows</div>
+
+        <div className="rz-flow-list">
+          {flows.map((flow, index) => {
+            const isActive = hasRunningFlow(flow.name);
+
+            return (
+              <Button
+                key={`${flow.name}-${index}`}
+                type="button"
+                onClick={() => onRunFlow(flow)}
+                variant="default"
+                isSelected={isActive}
+                title={`Run ${flow.displayName}`}
+                overrides={{
+                  BaseButton: {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      gap: '12px',
+                      width: '100%',
+                      borderRadius: '8px',
+                      backgroundColor: isActive ? 'rgba(130, 50, 255, 0.14)' : 'rgba(255, 255, 255, 0.03)',
+                      borderColor: isActive ? 'rgba(130, 50, 255, 0.45)' : 'rgba(255, 255, 255, 0.08)',
+                      color: 'rgba(255, 255, 255, 0.88)',
+                      paddingTop: '10px',
+                      paddingRight: '12px',
+                      paddingBottom: '10px',
+                      paddingLeft: '12px',
+                      textAlign: 'left',
+                    },
+                  },
+                }}
+              >
+                <span className="rz-flow-list-name">
+                  {flow.displayName}
+                  {flow.autoRun ? <span className="rz-flow-list-badge">Auto</span> : null}
+                </span>
+                <span className="rz-flow-list-action">{isActive ? 'Running' : 'Run'}</span>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+
+      {hasExecutionState ? (
+        <div className="rz-field">
+          <div className="rz-label">Flow runs</div>
+
+          <div className="rz-flow-runs">
+            {flowRuns.map((flowRun) => {
+              const isRunning = flowRun.status === 'running';
+
+              return (
+                <div key={flowRun.id} className="rz-flow-state" data-status={flowRun.status}>
+                  <div className="rz-flow-state-header">
+                    <div className="rz-flow-state-title">
+                      {flowRun.flowDisplayName}
+                      {flowRun.autoRun ? <span className="rz-flow-state-badge">Auto</span> : null}
+                    </div>
+
+                    {isRunning ? (
+                      <Button
+                        type="button"
+                        variant="pill"
+                        onClick={() => onStopFlow(flowRun.id)}
+                        overrides={{
+                          BaseButton: {
+                            style: {
+                              flexShrink: 0,
+                            },
+                          },
+                        }}
+                      >
+                        Stop
+                      </Button>
+                    ) : null}
+                  </div>
+
+                  <div className="rz-flow-state-status">{getStatusLabel(flowRun.status)}</div>
+
+                  {flowRun.error ? (
+                    <div className="rz-flow-state-error">{flowRun.error}</div>
+                  ) : null}
+
+                  {flowRun.result != null ? (
+                    <pre className="rz-flow-state-result">
+                      {formatPayloadForCommandInput(flowRun.result)}
+                    </pre>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/dev-host/components/MessageDetailsPane.tsx

@@ -0,0 +1,109 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import type { MessageEntry, ResizeHandleId } from '../types.js';
+import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
+import { MessagePayloadDetail } from './MessagePayloadDetail.js';
+import { ResizeHandle } from './ResizeHandle.js';
+import { ScrollArea } from './ui/ScrollArea.js';
+import { SendIcon } from './icons.js';
+import { IconButton } from './ui/IconButton.js';
+
+type MessageDetailsPaneProps = {
+  selectedMessage: MessageEntry | null;
+  isOpen: boolean;
+  isNarrowViewport: boolean;
+  activeResizeHandle: ResizeHandleId | null;
+  onClose: () => void;
+  onUseMessage: (message: MessageEntry) => void;
+  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+
+export const MessageDetailsPane = ({
+  selectedMessage,
+  isOpen,
+  isNarrowViewport,
+  activeResizeHandle,
+  onClose,
+  onUseMessage,
+  onResizeStart,
+}: MessageDetailsPaneProps) => {
+  const isHidden = !isOpen || !selectedMessage;
+
+  return (
+    <>
+      {!isNarrowViewport ? (
+        <ResizeHandle
+          className="rz-column-resize-handle"
+          isDragging={activeResizeHandle === 'details-width'}
+          isHidden={isHidden}
+          orientation="vertical"
+          label="Resize message details"
+          onPointerDown={onResizeStart}
+        />
+      ) : null}
+
+      <div className="rz-pane" data-hidden={isHidden} aria-hidden={isHidden}>
+        <div className="rz-sidebar">
+          <div className="rz-sidebar-header">
+            <div className="rz-sidebar-title">Message Details</div>
+            <div className="rz-header-actions">
+              <IconButton
+                type="button"
+                aria-label="Use message in dispatcher"
+                title="Use message in dispatcher"
+                onClick={() => {
+                  if (selectedMessage) {
+                    onUseMessage(selectedMessage);
+                  }
+                }}
+              >
+                <SendIcon />
+              </IconButton>
+
+              <IconButton
+                type="button"
+                aria-label="Close message details"
+                onClick={onClose}
+              >
+                ×
+              </IconButton>
+            </div>
+          </div>
+
+          <ScrollArea className="rz-sidebar-scroll">
+            {selectedMessage ? (
+              <div className="rz-message-detail">
+                <div className="rz-detail-section">
+                  <div className="rz-label">Date</div>
+                  <div className="rz-detail-value rz-detail-mono">
+                    {formatMessageDate(selectedMessage.date)}
+                  </div>
+                </div>
+
+                <div className="rz-detail-section">
+                  <div className="rz-label">Type</div>
+                  <div className="rz-detail-value rz-detail-mono">{selectedMessage.type}</div>
+                </div>
+
+                <div className="rz-detail-section">
+                  <div className="rz-label">Payload</div>
+                  <div className="rz-detail-payload">
+                    <MessagePayloadDetail payload={selectedMessage.payload} />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="rz-empty-state">Select a message to inspect its details.</div>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const getDispatcherValuesFromMessage = (message: MessageEntry) => {
+  return {
+    commandType: message.type,
+    commandPayload: formatPayloadForCommandInput(message.payload),
+  };
+};

package/src/dev-host/components/MessageLogPane.tsx

@@ -0,0 +1,84 @@
+import type { MessageEntry } from '../types.js';
+import { cn, formatMessageTableDate, formatPayloadPreview } from '../utils.js';
+import { ClearIcon } from './icons.js';
+import { ScrollArea } from './ui/ScrollArea.js';
+import { IconButton } from './ui/IconButton.js';
+
+type MessageLogPaneProps = {
+  messages: MessageEntry[];
+  selectedMessageId: string | null;
+  onSelectMessage: (messageId: string) => void;
+  onClearMessages: () => void;
+};
+
+export const MessageLogPane = ({
+  messages,
+  selectedMessageId,
+  onSelectMessage,
+  onClearMessages,
+}: MessageLogPaneProps) => {
+  return (
+    <div className="rz-pane">
+      <div className="rz-log-pane">
+        <div className="rz-sidebar-header">
+          <div className="rz-sidebar-title">Message Log</div>
+          <div className="rz-header-actions">
+            <IconButton
+              type="button"
+              onClick={onClearMessages}
+              disabled={messages.length === 0}
+              aria-label="Clear message log"
+              title="Clear message log"
+            >
+              <ClearIcon />
+            </IconButton>
+          </div>
+        </div>
+
+        <ScrollArea className="rz-sidebar-scroll">
+          <div className="rz-message-list">
+            <div className="rz-message-list-header">
+              <div className="rz-message-header-cell">Dir</div>
+              <div className="rz-message-header-cell">Date</div>
+              <div className="rz-message-header-cell">Type</div>
+              <div className="rz-message-header-cell">Payload</div>
+            </div>
+
+            {messages.map((message) => (
+              <button
+                key={message.id}
+                type="button"
+                className="rz-message-row"
+                data-selected={message.id === selectedMessageId}
+                onClick={() => onSelectMessage(message.id)}
+              >
+                <div
+                  className={cn(
+                    'rz-message-cell rz-message-direction',
+                    message.direction === 'in' ? 'rz-message-dir-in' : 'rz-message-dir-out',
+                  )}
+                  aria-label={message.direction === 'in' ? 'Sent message' : 'Received message'}
+                  title={message.direction === 'in' ? 'Sent message' : 'Received message'}
+                >
+                  <span className="rz-message-arrow" aria-hidden="true">
+                    {message.direction === 'in' ? '↑' : '↓'}
+                  </span>
+                </div>
+
+                <div className="rz-message-cell rz-message-date">
+                  {formatMessageTableDate(message.date)}
+                </div>
+
+                <div className="rz-message-cell rz-message-type">{message.type}</div>
+
+                <pre className="rz-message-cell rz-message-preview">
+                  {formatPayloadPreview(message.payload)}
+                </pre>
+              </button>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};

package/src/dev-host/components/MessagePayloadDetail.tsx

@@ -0,0 +1,32 @@
+import { JSONTree } from 'react-json-tree';
+import { jsonTreeTheme } from '../constants.js';
+import { isJsonTreeData } from '../utils.js';
+
+type MessagePayloadDetailProps = {
+  payload: unknown;
+};
+
+export const MessagePayloadDetail = ({ payload }: MessagePayloadDetailProps) => {
+  if (typeof payload === 'string') {
+    return <pre className="rz-detail-pre rz-detail-mono">{payload}</pre>;
+  }
+
+  if (typeof payload === 'number' || typeof payload === 'boolean' || payload == null) {
+    return <pre className="rz-detail-pre rz-detail-mono">{String(payload)}</pre>;
+  }
+
+  if (isJsonTreeData(payload)) {
+    return (
+      <div className="rz-detail-json-tree">
+        <JSONTree
+          data={payload}
+          theme={jsonTreeTheme}
+          invertTheme={false}
+          shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+        />
+      </div>
+    );
+  }
+
+  return <pre className="rz-detail-pre rz-detail-mono">{String(payload)}</pre>;
+};

package/src/dev-host/components/PanelTabs.tsx

@@ -0,0 +1,22 @@
+import type { DevHostPanelEntry } from '../types.js';
+import { ToggleGroup } from './ui/ToggleGroup.js';
+
+type PanelTabsProps = {
+  panels: DevHostPanelEntry[];
+  activeSource: string;
+  onValueChange: (value: string) => void;
+};
+
+export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
+  return (
+    <ToggleGroup
+      aria-label="Plugin panels"
+      value={activeSource}
+      onChange={onValueChange}
+      options={panels.map((panel) => ({
+        key: panel.source,
+        label: panel.label,
+      }))}
+    />
+  );
+};

package/src/dev-host/components/ResizeHandle.tsx

@@ -0,0 +1,33 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import { cn } from '../utils.js';
+
+type ResizeHandleProps = {
+  className?: string;
+  isDragging: boolean;
+  isHidden?: boolean;
+  orientation: 'horizontal' | 'vertical';
+  label: string;
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};
+
+export const ResizeHandle = ({
+  className,
+  isDragging,
+  isHidden = false,
+  orientation,
+  label,
+  onPointerDown,
+}: ResizeHandleProps) => {
+  return (
+    <div
+      className={cn(className)}
+      data-dragging={isDragging}
+      data-hidden={isHidden}
+      aria-hidden={isHidden}
+      onPointerDown={onPointerDown}
+      role="separator"
+      aria-orientation={orientation}
+      aria-label={label}
+    />
+  );
+};

package/src/dev-host/components/icons.tsx

@@ -0,0 +1,79 @@
+export const ClearIcon = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M2.5 3.5H11.5M5.5 1.75H8.5M4 3.5V10.5C4 10.9641 4.18437 11.4092 4.51256 11.7374C4.84075 12.0656 5.28587 12.25 5.75 12.25H8.25C8.71413 12.25 9.15925 12.0656 9.48744 11.7374C9.81563 11.4092 10 10.9641 10 10.5V3.5M5.75 5.5V9.625M8.25 5.5V9.625"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const SendIcon = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M12.25 1.75L6.75 7.25M12.25 1.75L8.75 12.25L6.75 7.25M12.25 1.75L1.75 5.25L6.75 7.25"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDownIcon = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M3.5 5.25L7 8.75L10.5 5.25"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const PresetsIcon = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M2.5 3.5H11.5M2.5 7H8.5M2.5 10.5H6.5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+      <circle cx="10.5" cy="7" r="1" fill="currentColor" />
+      <circle cx="8.5" cy="10.5" r="1" fill="currentColor" />
+      <circle cx="9.5" cy="3.5" r="1" fill="currentColor" />
+    </svg>
+  );
+};
+
+export const RozeniteLogo = () => {
+  return (
+    <svg
+      width="173"
+      height="32"
+      viewBox="0 0 172.5 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M17.333 5.33301H20V10.667H22.667V16H25.333V24H22.667V26.667H20V29.333H12V26.667H9.33301V24H6.66699V16H9.33301V10.667H12V5.33301H14.667V2.66699H17.333V5.33301Z"
+        fill="#fff"
+      />
+      <path
+        d="M51.7354 28H48.1421V3.94287H59.8887C62.1875 3.94287 63.9385 4.56592 65.1416 5.81201C66.3447 7.05811 66.9463 8.80908 66.9463 11.0649C66.9463 12.4829 66.6294 13.6968 65.9956 14.7065C65.3618 15.7163 64.5024 16.4199 63.4175 16.8174V17.043H64.6421C66.2212 17.043 67.0107 17.9023 67.0107 19.6211V28H63.3853V18.9282H51.7354V28ZM51.7354 7.08496V15.915H59.083C60.3398 15.915 61.3228 15.6089 62.0317 14.9966C62.7515 14.3735 63.1113 13.5356 63.1113 12.4829V10.4849C63.1113 9.37842 62.7568 8.53516 62.0479 7.95508C61.3496 7.375 60.3613 7.08496 59.083 7.08496H51.7354ZM70.7187 25.9214C69.2256 24.2993 68.479 22.0972 68.479 19.3149C68.479 16.5327 69.2363 14.3359 70.751 12.7246C72.2656 11.1133 74.312 10.3076 76.8901 10.3076C79.393 10.3076 81.4179 11.1133 82.9648 12.7246C84.5224 14.3145 85.3013 16.5112 85.3013 19.3149C85.3013 22.0757 84.5547 24.2671 83.0615 25.8892C81.5683 27.5112 79.5112 28.3223 76.8901 28.3223C74.2798 28.3223 72.2226 27.522 70.7187 25.9214ZM71.9433 18.042V20.7329C71.9433 22.2153 72.3999 23.3809 73.313 24.2295C74.2261 25.0674 75.4184 25.4863 76.8901 25.4863C78.3511 25.4863 79.5327 25.062 80.435 24.2134C81.3481 23.3647 81.8047 22.2046 81.8047 20.7329V18.042C81.8047 16.5918 81.3481 15.4209 80.435 14.5293C79.522 13.627 78.3403 13.1758 76.8901 13.1758C75.4184 13.1758 74.2261 13.6216 73.313 14.5132C72.3999 15.4048 71.9433 16.5811 71.9433 18.042ZM98.081 13.208L89.0737 25.1963H98.1777V28H84.9809V25.4541L93.956 13.4819H84.9487V10.646H98.081V13.208ZM97.9057 19.2827C97.9057 16.479 98.6415 14.2822 100.113 12.6924C101.585 11.1025 103.588 10.3076 106.123 10.3076C108.519 10.3076 110.42 11.0112 111.828 12.4185C113.256 13.8472 113.971 15.7754 113.971 18.2031C113.971 18.7725 113.928 19.3955 113.842 20.0723H101.402V21.0391C101.402 22.4141 101.843 23.5259 102.724 24.3745C103.604 25.2124 104.759 25.6313 106.188 25.6313C107.316 25.6313 108.277 25.3682 109.072 24.8418C109.878 24.3154 110.415 23.6064 110.684 22.7148H114.035C113.691 24.4121 112.8 25.771 111.36 26.7915C109.932 27.812 108.197 28.3223 106.156 28.3223C103.599 28.3223 101.585 27.5112 100.113 25.8892C98.6415 24.2671 97.9057 22.0649 97.9057 19.2827ZM101.402 17.2363V17.6392H110.539V17.0752C110.539 15.8613 110.13 14.8838 109.314 14.1426C108.498 13.3906 107.423 13.0146 106.091 13.0146C104.706 13.0146 103.578 13.4067 102.707 14.1909C101.837 14.9644 101.402 15.9795 101.402 17.2363ZM119.499 28H116.1V10.646H119.064L119.532 13.8687H119.757C120.294 12.7515 121.073 11.8813 122.094 11.2583C123.114 10.6245 124.274 10.3076 125.574 10.3076C127.476 10.3076 128.947 10.9414 129.989 12.209C131.042 13.4766 131.568 15.2114 131.568 17.4136V28H128.136V17.7358C128.136 14.771 126.852 13.2886 124.285 13.2886C122.846 13.2886 121.685 13.8042 120.805 14.8354C119.934 15.8667 119.499 17.2202 119.499 18.896V28ZM138.048 7.81006H134.68V3.71729H138.048V7.81006ZM138.048 28H134.68V10.646H138.048V28ZM149.216 13.4819H145.623V25.2285H149.216V28H145.123C143.211 28 142.255 27.0654 142.255 25.1963V13.4819H139.129V10.646H142.255V5.00635H145.623V10.646H149.216V13.4819ZM149.669 19.2827C149.669 16.479 150.405 14.2822 151.877 12.6924C153.348 11.1025 155.352 10.3076 157.887 10.3076C160.283 10.3076 162.184 11.0112 163.591 12.4185C165.02 13.8472 165.734 15.7754 165.734 18.2031C165.734 18.7725 165.691 19.3955 165.605 20.0723H153.166V21.0391C153.166 22.4141 153.606 23.5259 154.487 24.3745C155.368 25.2124 156.523 25.6313 157.952 25.6313C159.079 25.6313 160.041 25.3682 160.836 24.8418C161.641 24.3154 162.179 23.6064 162.447 22.7148H165.799C165.455 24.4121 164.563 25.771 163.124 26.7915C161.695 27.812 159.96 28.3223 157.919 28.3223C155.363 28.3223 153.348 27.5112 151.877 25.8892C150.405 24.2671 149.669 22.0649 149.669 19.2827ZM153.166 17.2363V17.6392H162.302V17.0752C162.302 15.8613 161.894 14.8838 161.077 14.1426C160.261 13.3906 159.187 13.0146 157.855 13.0146C156.469 13.0146 155.341 13.4067 154.471 14.1909C153.601 14.9644 153.166 15.9795 153.166 17.2363Z"
+        fill="#fff"
+      />
+    </svg>
+  );
+};