@datalayer/primer-addons 1.0.19 → 1.0.21

package/lib/components/logo/DatalayerTextAI.d.ts

@@ -1,9 +1,9 @@
-import { type SVGProps } from 'react';
-import { type ThemeVariant } from '../../theme';
-export interface DatalayerTextAIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+import { type SVGProps } from "react";
+import { type ThemeVariant } from "../../theme";
+export interface DatalayerTextAIProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
     size?: number;
     scale?: number;
-    colorMode?: 'light' | 'dark' | 'auto';
+    colorMode?: "light" | "dark" | "auto";
     variant?: ThemeVariant;
     /** Colour for the "LAYER" part of the wordmark. */
     primaryColor?: string;

package/lib/components/logo/DatalayerTextAI.js

@@ -3,10 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Copyright (c) 2023-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { forwardRef } from 'react';
-import { AI } from './AI';
-import { DatalayerText } from './DatalayerText';
-import { getLogoColors } from './DatalayerLogo';
+import { forwardRef } from "react";
+import { DatalayerText } from "./DatalayerText";
+import { getLogoColors } from "./DatalayerLogo";
 const TEXT_LEFT_TRIM = 12;
 const TEXT_END_X = 136.672 - TEXT_LEFT_TRIM;
 const AI_SIZE = 24;
@@ -15,13 +14,14 @@ const AI_VISIBLE_LEFT = 0.25;
 const AI_VISIBLE_HEIGHT = 16.136075;
 const AI_SCALE_TO_TEXT_HEIGHT = 25 / AI_VISIBLE_HEIGHT;
 const AI_RENDER_SIZE = AI_SIZE * AI_SCALE_TO_TEXT_HEIGHT;
+const AI_RENDER_SCALE = AI_RENDER_SIZE / AI_SIZE;
 const AI_X_TRIM = AI_VISIBLE_LEFT * AI_SCALE_TO_TEXT_HEIGHT;
 const AI_Y_TRIM = AI_VISIBLE_TOP * AI_SCALE_TO_TEXT_HEIGHT;
 /**
  * Datalayer wordmark followed by AI glyph on one line.
  * Both elements are aligned to the same 25-unit cap height.
  */
-export const DatalayerTextAI = forwardRef(function DatalayerTextAI({ size = 25, scale = 1, colorMode = 'light', variant = 'datalayer', primaryColor, secondaryColor, textColor, 
+export const DatalayerTextAI = forwardRef(function DatalayerTextAI({ size = 25, scale = 1, colorMode = "light", variant = "datalayer", primaryColor, secondaryColor, textColor, 
 // 2.380655 ~= 25 / (0.7 * 15.00187)
 textSizeMultiplier = 2.380655, aiPrimaryColor, aiSecondaryColor, aiGap = 6, ...svgProps }, ref) {
     const themed = getLogoColors(variant, colorMode);
@@ -35,6 +35,6 @@ textSizeMultiplier = 2.380655, aiPrimaryColor, aiSecondaryColor, aiGap = 6, ...s
     const baseWidth = (viewBoxWidth / 25) * size;
     const height = baseHeight * scale;
     const width = baseWidth * scale;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${viewBoxWidth} 25`, width: width, height: height, role: "img", "aria-label": "Datalayer AI", ref: ref, ...svgProps, children: [_jsx(DatalayerText, { primaryColor: layerColor, secondaryColor: dataTextColor, sizeMultiplier: textSizeMultiplier, x: -TEXT_LEFT_TRIM }), _jsx(AI, { size: AI_RENDER_SIZE, x: TEXT_END_X + aiGap - AI_X_TRIM, y: -AI_Y_TRIM, variant: variant, colorMode: colorMode, primaryColor: resolvedAiPrimary, secondaryColor: resolvedAiSecondary })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${viewBoxWidth} 25`, width: width, height: height, role: "img", "aria-label": "Datalayer AI", ref: ref, ...svgProps, children: [_jsx(DatalayerText, { primaryColor: layerColor, secondaryColor: dataTextColor, sizeMultiplier: textSizeMultiplier, x: -TEXT_LEFT_TRIM }), _jsxs("g", { transform: `translate(${TEXT_END_X + aiGap - AI_X_TRIM} ${-AI_Y_TRIM}) scale(${AI_RENDER_SCALE})`, children: [_jsx("path", { d: "m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z", fill: resolvedAiPrimary, strokeWidth: 0.25 }), _jsx("path", { d: "m6.325375 13.682775 2.20125 -5.67065 2.201275 5.67065H6.325375ZM6.68225 3.932 0.25 20.068075h3.596525l1.3155 -3.3886h6.729425l1.315275 3.3886h3.59655L10.371 3.932H6.68225Z", fill: resolvedAiSecondary, fillRule: "evenodd", clipRule: "evenodd", strokeWidth: 0.25 })] })] }));
 });
 export default DatalayerTextAI;

package/lib/components/logo/index.d.ts

@@ -1,7 +1,5 @@
-export * from './AI';
-export * from './AI2';
-export * from './DI';
-export * from './DatalayerLogo';
-export * from './DatalayerLogoText';
-export * from './DatalayerText';
-export * from './DatalayerTextAI';
+export * from "./DI";
+export * from "./DatalayerLogo";
+export * from "./DatalayerLogoText";
+export * from "./DatalayerText";
+export * from "./DatalayerTextAI";

package/lib/components/logo/index.js

@@ -1,7 +1,5 @@
-export * from './AI';
-export * from './AI2';
-export * from './DI';
-export * from './DatalayerLogo';
-export * from './DatalayerLogoText';
-export * from './DatalayerText';
-export * from './DatalayerTextAI';
+export * from "./DI";
+export * from "./DatalayerLogo";
+export * from "./DatalayerLogoText";
+export * from "./DatalayerText";
+export * from "./DatalayerTextAI";

package/lib/components/toolbar/Toolbar.d.ts

@@ -1,3 +1,3 @@
 import type { ToolbarProps } from './types';
-export declare function Toolbar({ items, extraItems, className, disabled, ariaLabel, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar({ items, extraItems, className, disabled, ariaLabel, overflow, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
 export default Toolbar;

package/lib/components/toolbar/ToolbarButton.js

@@ -6,16 +6,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * ToolbarButton - A single button in a Toolbar.
  *
- * Renders a native <button> with a direct Octicon icon.
- * Avoids Primer's IconButton and Tooltip components to prevent invariant
- * violations in Primer v37 (Tooltip requires a native interactive child,
- * and IconButton's internal Tooltip conflicts with external wrappers).
- *
- * Uses the native HTML `title` attribute for tooltip behaviour.
+ * Renders a native <button> with a direct Octicon icon, wrapped in Primer's
+ * Tooltip when the item carries a title. The v37 Tooltip demands a native
+ * interactive child — the reason IconButton is avoided — and a plain
+ * <button> is exactly that. A disabled item therefore wears `aria-disabled`
+ * rather than the `disabled` attribute: a truly disabled button is not
+ * interactive, which both silences its tooltip and breaks the invariant —
+ * and the tooltip of a disabled action is precisely where the why-disabled
+ * explanation lives.
  *
  * @module components/toolbar/ToolbarButton
  */
 import { isValidElement } from 'react';
+import { Tooltip } from '@primer/react';
 export function ToolbarButton({ item, size = 'medium' }) {
     const { ariaLabel, title, icon, label, isActive, onClick, disabled } = item;
     // Resolve icon → React element.
@@ -38,7 +41,7 @@ export function ToolbarButton({ item, size = 'medium' }) {
         iconElement = _jsx("span", { style: { fontSize: 12, fontWeight: 600, lineHeight: 1 }, children: label });
     }
     const btnSize = size === 'small' ? 28 : 32;
-    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, disabled: disabled, style: {
+    const button = (_jsx("button", { type: "button", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, onMouseDown: (e) => e.preventDefault(), onClick: disabled ? undefined : onClick, style: {
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -66,5 +69,7 @@ export function ToolbarButton({ item, size = 'medium' }) {
                 ? 'var(--fgColor-accent, #0969da)'
                 : 'var(--fgColor-muted, #656d76)';
         }, children: iconElement }));
+    // No title: nothing to say, no wrapper to say it with.
+    return title ? (_jsx(Tooltip, { text: title, direction: "s", children: button })) : (button);
 }
 export default ToolbarButton;

package/lib/components/toolbar/ToolbarRenderer.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * @module components/toolbar/ToolbarRenderer
  */
 import { Fragment } from 'react';
+import { Box } from '../box/Box';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdown } from './ToolbarDropdown';
 import { ToolbarDivider } from './ToolbarDivider';
@@ -30,6 +31,8 @@ export function ToolbarRenderer({ items, disabled, size = 'medium' }) {
                     return (_jsx(Fragment, { children: _jsx(ToolbarDropdown, { item: { ...item, disabled: itemDisabled }, size: size }) }, item.key));
                 case 'divider':
                     return (_jsx(Fragment, { children: _jsx(ToolbarDivider, {}) }, item.key));
+                case 'spacer':
+                    return (_jsx(Box, { sx: { flex: '1 1 auto', minWidth: 8 } }, item.key));
                 case 'custom':
                     return _jsx(Fragment, { children: item.render() }, item.key);
                 default:

package/lib/components/toolbar/types.d.ts

@@ -3,7 +3,7 @@ import type { IconProps } from '@primer/octicons-react';
 /**
  * Toolbar item types that can be registered in a toolbar.
  */
-export type ToolbarItemType = 'button' | 'dropdown' | 'divider' | 'custom';
+export type ToolbarItemType = 'button' | 'dropdown' | 'divider' | 'spacer' | 'custom';
 /**
  * Base toolbar item definition.
  */
@@ -88,6 +88,15 @@ export interface ToolbarDropdownItem extends ToolbarItemBase {
 export interface ToolbarDividerItem extends ToolbarItemBase {
     type: 'divider';
 }
+/**
+ * Toolbar spacer item definition.
+ *
+ * Takes the free space of the toolbar, so the items ordered after it sit on
+ * the trailing edge — e.g. a status indicator kept away from the actions.
+ */
+export interface ToolbarSpacerItem extends ToolbarItemBase {
+    type: 'spacer';
+}
 /**
  * Toolbar custom item definition.
  */
@@ -99,7 +108,7 @@ export interface ToolbarCustomItem extends ToolbarItemBase {
 /**
  * Union of all toolbar item types.
  */
-export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarDividerItem | ToolbarCustomItem;
+export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarDividerItem | ToolbarSpacerItem | ToolbarCustomItem;
 /**
  * Props for the extensible Toolbar component.
  */
@@ -114,6 +123,13 @@ export interface ToolbarProps {
     extraItems?: ToolbarItem[];
     /** Aria label for the toolbar */
     ariaLabel?: string;
+    /**
+     * Keep the toolbar to one line, moving what does not fit into a menu.
+     *
+     * On by default. Turned off, the items are all laid on the line and it is
+     * up to the host to leave room for them.
+     */
+    overflow?: boolean;
 }
 /**
  * Props for the extensible FloatingToolbar component.

package/lib/utils/Portals.d.ts

@@ -1,4 +1,12 @@
 import { type CSSProperties } from 'react';
+/**
+ * Id of the element Primer portals render under.
+ *
+ * Exported because a host may need to mark that element as its own — the
+ * JupyterLab theming of jupyter-react adds `jp-ThemedContainer` to it, so
+ * the rules JupyterLab scopes to that class reach portaled content too.
+ */
+export declare const PRIMER_PORTAL_ROOT_ID = "__primerPortalRoot__";
 type Colormode = 'light' | 'dark' | 'auto';
 /**
  * Ensure we define a root for Primer portal root.
@@ -11,6 +19,13 @@ type Colormode = 'light' | 'dark' | 'auto';
  *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
  */
 export declare const setupPrimerPortals: (colormode?: Colormode) => void;
+/**
+ * The element Primer portals render under, when it has been set up.
+ *
+ * `setupPrimerPortals` creates it; before that call there is none, and this
+ * answers `null` rather than inventing one.
+ */
+export declare const getPrimerPortalRoot: () => HTMLElement | null;
 /**
  * Sync a set of CSS properties (including CSS custom properties) to
  * `document.body` so that Primer portal content — which is a DOM child

package/lib/utils/Portals.js

@@ -3,7 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { registerPortalRoot } from '@primer/react';
-const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+/**
+ * Id of the element Primer portals render under.
+ *
+ * Exported because a host may need to mark that element as its own — the
+ * JupyterLab theming of jupyter-react adds `jp-ThemedContainer` to it, so
+ * the rules JupyterLab scopes to that class reach portaled content too.
+ */
+export const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
 /**
  * Key used on `document.body` to track the CSS-property names we
  * previously applied so we can remove stale entries on theme switch.
@@ -81,11 +88,38 @@ export const setupPrimerPortals = (colormode) => {
     portalRoot.dataset['colorMode'] = resolved;
     portalRoot.dataset['lightTheme'] = lightTheme;
     portalRoot.dataset['darkTheme'] = darkTheme;
-    // High z-index so overlays render above positioned UI (e.g. chat z-index 1001).
-    portalRoot.style.position = 'relative';
+    /*
+     * Pinned to the origin of the document, never left in the flow of the body.
+     *
+     * Primer positions an anchored overlay — a menu, a dropdown — with
+     * `position: absolute` and coordinates taken from the VIEWPORT rectangle
+     * of its anchor. Those coordinates are only right when the containing
+     * block of the overlay starts at the origin of the document, which is why
+     * Primer's own default portal root is `absolute` at `0, 0`.
+     *
+     * Left `relative`, this root instead sits wherever the flow of the body
+     * ends and becomes the containing block of everything portaled into it:
+     * in an application whose markup is a full-height element — a React page
+     * hosting JupyterLab — that is the bottom of the screen, and every menu
+     * opened at the top of the page was drawn a screen further down, off the
+     * bottom edge. Which reads, to whoever clicked, as a menu that refuses to
+     * open. The high z-index is kept: it needs a positioned element, and
+     * `absolute` is one.
+     */
+    portalRoot.style.position = 'absolute';
+    portalRoot.style.top = '0';
+    portalRoot.style.left = '0';
+    portalRoot.style.width = '100%';
     portalRoot.style.zIndex = '9999';
     registerPortalRoot(portalRoot);
 };
+/**
+ * The element Primer portals render under, when it has been set up.
+ *
+ * `setupPrimerPortals` creates it; before that call there is none, and this
+ * answers `null` rather than inventing one.
+ */
+export const getPrimerPortalRoot = () => document.getElementById(PRIMER_PORTAL_ROOT_ID);
 /* ─── camelCase → kebab-case ─────────────────────────────────────────── */
 const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 /**
@@ -102,33 +136,54 @@ const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
  * portals stay in sync whenever theme or color-mode changes.
  */
 export function syncPortalThemeStyles(styles) {
-    const body = document.body;
-    // 1. Remove properties set by the previous invocation.
-    const prev = body[PORTAL_THEME_KEYS];
-    if (prev) {
-        for (const key of prev) {
-            body.style.removeProperty(key);
-        }
-    }
-    // 2. Apply the new properties.
-    const tracked = [];
-    for (const [key, value] of Object.entries(styles)) {
-        if (value == null)
-            continue;
-        const strVal = String(value);
-        if (key.startsWith('--')) {
-            // CSS custom property — must use setProperty
-            body.style.setProperty(key, strVal);
-            tracked.push(key);
+    /*
+     * On the portal root as well as on the body, and that is the point.
+     *
+     * The body was enough for what portals INHERIT — a font, a line height —
+     * and never enough for the colours. The portal root carries Primer's own
+     * theme markers (`data-color-mode`, `data-light-theme`), and Primer's
+     * stylesheet declares `--bgColor-*`, `--fgColor-*` and the rest ON any
+     * element carrying them. A declaration on the element always beats a value
+     * inherited from an ancestor, so Primer's default palette won on the portal
+     * root and everything drawn inside it — the buttons of a dialog, the
+     * background of a menu — came out in the default theme while the same
+     * components in the page wore the chosen one.
+     *
+     * Written inline on that element, the theme wins in turn: an inline style
+     * outranks any selector in a stylesheet.
+     */
+    const targets = [
+        document.body,
+        document.getElementById(PRIMER_PORTAL_ROOT_ID)
+    ].filter(Boolean);
+    for (const target of targets) {
+        // 1. Remove properties set by the previous invocation.
+        const prev = target[PORTAL_THEME_KEYS];
+        if (prev) {
+            for (const key of prev) {
+                target.style.removeProperty(key);
+            }
         }
-        else {
-            // Standard CSS property (camelCase → kebab-case)
-            const kebab = camelToKebab(key);
-            body.style.setProperty(kebab, strVal);
-            tracked.push(kebab);
+        // 2. Apply the new properties.
+        const tracked = [];
+        for (const [key, value] of Object.entries(styles)) {
+            if (value == null)
+                continue;
+            const strVal = String(value);
+            if (key.startsWith('--')) {
+                // CSS custom property — must use setProperty
+                target.style.setProperty(key, strVal);
+                tracked.push(key);
+            }
+            else {
+                // Standard CSS property (camelCase → kebab-case)
+                const kebab = camelToKebab(key);
+                target.style.setProperty(kebab, strVal);
+                tracked.push(kebab);
+            }
         }
+        // 3. Stash the list for the next cleanup.
+        target[PORTAL_THEME_KEYS] = tracked;
     }
-    // 3. Stash the list for the next cleanup.
-    body[PORTAL_THEME_KEYS] = tracked;
 }
 export default setupPrimerPortals;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "npm run build:lib",

package/lib/components/logo/AI.d.ts

@@ -1,17 +0,0 @@
-import { type SVGProps } from 'react';
-import { type ThemeVariant } from '../../theme';
-export interface AIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
-    size?: number;
-    variant?: ThemeVariant;
-    colorMode?: 'light' | 'dark' | 'auto';
-    /** Colour of the "I" glyph. */
-    primaryColor?: string;
-    /** Colour of the "A" glyph. */
-    secondaryColor?: string;
-}
-/**
- * AI glyph mark from the official brand source SVG.
- * Defaults to themed logo colors and supports explicit overrides.
- */
-export declare const AI: import("react").ForwardRefExoticComponent<AIProps & import("react").RefAttributes<SVGSVGElement>>;
-export default AI;

package/lib/components/logo/AI.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { forwardRef } from 'react';
-import { getLogoColors } from './DatalayerLogo';
-/**
- * AI glyph mark from the official brand source SVG.
- * Defaults to themed logo colors and supports explicit overrides.
- */
-export const AI = forwardRef(function AI({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
-    const themed = getLogoColors(variant, colorMode);
-    const resolvedPrimary = primaryColor ?? themed.primary;
-    const resolvedSecondary = secondaryColor ?? themed.textColor;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: size, height: size, role: "img", "aria-label": "AI", ref: ref, ...svgProps, children: [_jsx("path", { d: "m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z", fill: resolvedPrimary, strokeWidth: 0.25 }), _jsx("path", { d: "m6.325375 13.682775 2.20125 -5.67065 2.201275 5.67065H6.325375ZM6.68225 3.932 0.25 20.068075h3.596525l1.3155 -3.3886h6.729425l1.315275 3.3886h3.59655L10.371 3.932H6.68225Z", fill: resolvedSecondary, fillRule: "evenodd", clipRule: "evenodd", strokeWidth: 0.25 })] }));
-});
-export default AI;

package/lib/components/logo/AI2.d.ts

@@ -1,20 +0,0 @@
-import { type SVGProps } from 'react';
-import { type ThemeVariant } from '../../theme';
-export interface AI2Props extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
-    size?: number;
-    variant?: ThemeVariant;
-    colorMode?: 'light' | 'dark' | 'auto';
-    /** Colour of the "I" glyph. */
-    primaryColor?: string;
-    /** Colour of the "A" glyph. */
-    secondaryColor?: string;
-}
-/**
- * Alternate AI glyph mark.
- *
- * A is rendered with an oblique left bar, a right vertical bar,
- * and a horizontal crossbar.
- * I is rendered as a simple vertical bar.
- */
-export declare const AI2: import("react").ForwardRefExoticComponent<AI2Props & import("react").RefAttributes<SVGSVGElement>>;
-export default AI2;

package/lib/components/logo/AI2.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { forwardRef } from 'react';
-import { getLogoColors } from './DatalayerLogo';
-/**
- * Alternate AI glyph mark.
- *
- * A is rendered with an oblique left bar, a right vertical bar,
- * and a horizontal crossbar.
- * I is rendered as a simple vertical bar.
- */
-export const AI2 = forwardRef(function AI2({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
-    const themed = getLogoColors(variant, colorMode);
-    const resolvedPrimary = primaryColor ?? themed.primary;
-    const resolvedSecondary = secondaryColor ?? themed.textColor;
-    const barWidth = 3.1;
-    const leftBarBottomInnerX = -2.2 + barWidth;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "-2.2 0 26.2 24", width: size, height: size, role: "img", "aria-label": "AI2", ref: ref, ...svgProps, children: [_jsx("path", { d: `M15.35 3.5h${barWidth}V20h-${barWidth}z`, fill: resolvedPrimary }), _jsx("path", { d: `M-2.2 20 9.8 3.5h${barWidth}L${leftBarBottomInnerX} 20H-2.2z`, fill: resolvedSecondary }), _jsx("path", { d: `M10.35 3.5h${barWidth}V20h-${barWidth}z`, fill: resolvedSecondary }), _jsx("path", { d: "M3.5 12.95h9.6v2.75H3.5z", fill: resolvedSecondary })] }));
-});
-export default AI2;