@apple-pie/slice 0.0.4 → 0.0.6

package/dist/types/uikit/{UILabel → Label}/_types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-type UILabelBaseProps = {
+type LabelBaseProps = {
     children?: React.ReactNode;
     state?: 'red' | 'yellow' | 'green' | 'blue' | 'grey' | 'lightgrey' | 'white';
     noFill?: boolean;
@@ -7,9 +7,10 @@ type UILabelBaseProps = {
     button?: boolean;
     border?: number;
     padding?: number | string;
+    inline?: boolean;
     color?: string;
     size?: 's' | 'm' | 'l';
     onClick?: (e: React.MouseEvent<any>) => void;
 };
-export type UILabelProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UILabelBaseProps> & UILabelBaseProps;
+export type LabelProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof LabelBaseProps> & LabelBaseProps;
 export {};

package/dist/types/uikit/Label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from './Label';
+export type { LabelProps } from './_types';

package/dist/types/uikit/PromptInput/PromptInput.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type FileItem } from '../FileList';
+export declare const PromptInput: React.NamedExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    attachments?: FileItem[];
+    children?: React.ReactNode;
+    value?: string;
+    maxHeight?: string | number;
+    working?: boolean;
+    borderStyle?: "solid" | "gradient" | "none";
+    borderWidth?: number;
+    borderColor?: string | number;
+    borderColorOn?: string | number;
+    borderAnimate?: boolean;
+    borderRadius?: number;
+    placeholder?: string;
+    placeholderWorking?: string;
+    focused?: boolean;
+    submitClears?: boolean;
+    submitEnablesStop?: boolean;
+    enterSubmits?: boolean;
+    sendButton?: boolean;
+    attachButton?: boolean;
+    stopEnabled?: boolean;
+    maxLength?: number;
+    toolbarGap?: number;
+    textSize?: "s" | "m" | "l";
+    onChange?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onSubmit?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onBlur?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onFocus?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onStop?: () => void;
+    onAttachmentsChange?: (attachments: FileItem[]) => void;
+}> & {
+    attachments?: FileItem[];
+    children?: React.ReactNode;
+    value?: string;
+    maxHeight?: string | number;
+    working?: boolean;
+    borderStyle?: "solid" | "gradient" | "none";
+    borderWidth?: number;
+    borderColor?: string | number;
+    borderColorOn?: string | number;
+    borderAnimate?: boolean;
+    borderRadius?: number;
+    placeholder?: string;
+    placeholderWorking?: string;
+    focused?: boolean;
+    submitClears?: boolean;
+    submitEnablesStop?: boolean;
+    enterSubmits?: boolean;
+    sendButton?: boolean;
+    attachButton?: boolean;
+    stopEnabled?: boolean;
+    maxLength?: number;
+    toolbarGap?: number;
+    textSize?: "s" | "m" | "l";
+    onChange?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onSubmit?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onBlur?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onFocus?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onStop?: () => void;
+    onAttachmentsChange?: (attachments: FileItem[]) => void;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/uikit/PromptInput/_types.d.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+import type { FileItem } from '../FileList';
+type BasePromptProps = {
+    attachments?: FileItem[];
+    children?: React.ReactNode;
+    value?: string;
+    maxHeight?: string | number;
+    working?: boolean;
+    borderStyle?: 'solid' | 'gradient' | 'none';
+    borderWidth?: number;
+    borderColor?: string | number;
+    borderColorOn?: string | number;
+    borderAnimate?: boolean;
+    borderRadius?: number;
+    placeholder?: string;
+    placeholderWorking?: string;
+    focused?: boolean;
+    submitClears?: boolean;
+    submitEnablesStop?: boolean;
+    enterSubmits?: boolean;
+    sendButton?: boolean;
+    attachButton?: boolean;
+    stopEnabled?: boolean;
+    maxLength?: number;
+    toolbarGap?: number;
+    textSize?: 's' | 'm' | 'l';
+    onChange?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onSubmit?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onBlur?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onFocus?: (value: string | undefined, attachments?: FileItem[]) => void;
+    onStop?: () => void;
+    onAttachmentsChange?: (attachments: FileItem[]) => void;
+};
+export type PromptProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof BasePromptProps> & BasePromptProps;
+export {};

package/dist/types/uikit/PromptInput/index.d.ts

@@ -0,0 +1,2 @@
+export { PromptInput } from './PromptInput';
+export type { PromptProps } from './_types';

package/dist/types/uikit/UploadArea/UploadArea.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export declare const UploadArea: React.NamedExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
+    icon?: string;
+    iconSize?: number;
+    iconColor?: string;
+    iconColorHover?: string;
+    width?: number | string;
+    height?: number | string;
+    title?: string;
+    message?: string;
+    busyMessage?: string;
+    bgColor?: string;
+    bgColorHover?: string;
+    border?: number;
+    borderColor?: string | null;
+    borderColorHover?: string | null;
+    borderStyle?: string;
+    textSize?: "s" | "m" | "l";
+    padding?: number | string;
+    radius?: number | string;
+    acceptedTypes?: string[];
+    multiple?: boolean;
+    busy?: boolean;
+    showProgress?: boolean;
+    files?: import("../FileList").FileItem[];
+    canRemove?: boolean;
+    onUpload?: (files: File[]) => void;
+}> & {
+    icon?: string;
+    iconSize?: number;
+    iconColor?: string;
+    iconColorHover?: string;
+    width?: number | string;
+    height?: number | string;
+    title?: string;
+    message?: string;
+    busyMessage?: string;
+    bgColor?: string;
+    bgColorHover?: string;
+    border?: number;
+    borderColor?: string | null;
+    borderColorHover?: string | null;
+    borderStyle?: string;
+    textSize?: "s" | "m" | "l";
+    padding?: number | string;
+    radius?: number | string;
+    acceptedTypes?: string[];
+    multiple?: boolean;
+    busy?: boolean;
+    showProgress?: boolean;
+    files?: import("../FileList").FileItem[];
+    canRemove?: boolean;
+    onUpload?: (files: File[]) => void;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/uikit/UploadArea/_types.d.ts

@@ -0,0 +1,46 @@
+import type React from 'react';
+import type { FileItem } from '../FileList';
+export declare const imageTypes: string[];
+export declare const videoTypes: string[];
+export declare const documentTypes: string[];
+export declare const audioTypes: string[];
+export declare const textTypes: string[];
+export declare const allTypes: string[];
+export declare enum FileTypes {
+    images = "images",
+    videos = "videos",
+    documents = "documents",
+    audio = "audio",
+    text = "text",
+    all = "all",
+    custom = "custom"
+}
+type UploadAreaBaseProps = {
+    icon?: string;
+    iconSize?: number;
+    iconColor?: string;
+    iconColorHover?: string;
+    width?: number | string;
+    height?: number | string;
+    title?: string;
+    message?: string;
+    busyMessage?: string;
+    bgColor?: string;
+    bgColorHover?: string;
+    border?: number;
+    borderColor?: string | null;
+    borderColorHover?: string | null;
+    borderStyle?: string;
+    textSize?: 's' | 'm' | 'l';
+    padding?: number | string;
+    radius?: number | string;
+    acceptedTypes?: string[];
+    multiple?: boolean;
+    busy?: boolean;
+    showProgress?: boolean;
+    files?: FileItem[];
+    canRemove?: boolean;
+    onUpload?: (files: File[]) => void;
+};
+export type UploadAreaProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof UploadAreaBaseProps> & UploadAreaBaseProps;
+export {};

package/dist/types/uikit/UploadArea/index.d.ts

@@ -0,0 +1,3 @@
+export { UploadArea } from './UploadArea';
+export type { UploadAreaProps } from './_types';
+export { imageTypes, videoTypes, documentTypes, audioTypes, textTypes, allTypes, } from './_types';

package/dist/types/util/files.d.ts

@@ -0,0 +1,9 @@
+export declare function nameAndExtension(fileName: string): {
+    name: string;
+    ext: string;
+};
+export declare function fileIconName(extension: string): "other" | "text" | "sheet" | "image" | "code" | "pdf" | "md" | "preso" | "audio" | "video" | "clipboard";
+/**
+ * Create a text file from clipboard content placing a clipboard file extension
+ */
+export declare function clipboardTextToFile(content: string, fileName?: string): File;

package/dist/types/util/utils.d.ts

@@ -43,3 +43,11 @@ export declare function filterClasses(classNames: string[]): string;
  * Takes a style string or number and returns a valid CSS style string
  */
 export declare function setStyle(value: string | number | undefined, defaultVal?: number | string | undefined): string;
+/**
+ * Copy to clipboard
+ */
+export declare const copyToClipboard: (rawContent: string) => Promise<boolean>;
+/**
+ * Create a tint value from a hex color
+ */
+export declare const tintFromColor: (hex: string, percent: number) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
 	"exports": {
@@ -102,6 +102,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
 		"@chromatic-com/storybook": "^5.0.1",
+		"@csstools/postcss-global-data": "^3.1.0",
 		"@rollup/plugin-alias": "^5.1.1",
 		"@rollup/plugin-babel": "^6.0.4",
 		"@rollup/plugin-commonjs": "^28.0.2",
@@ -127,6 +128,7 @@
 		"happy-dom": "^20.7.0",
 		"jsdom": "^28.1.0",
 		"playwright": "^1.58.2",
+		"postcss-custom-media": "^11.0.6",
 		"rollup": "^4.32.0",
 		"rollup-plugin-json": "^4.0.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
@@ -138,7 +140,8 @@
 		"typescript": "^5.7.3",
 		"vite": "^6.0.11",
 		"vite-plugin-svgr": "^4.3.0",
-		"vitest": "^4.0.18"
+		"vitest": "^4.0.18",
+		"zustand": "^5.0.0"
 	},
 	"peerDependencies": {
 		"motion": "^11.15.0",

package/dist/cjs/chunks/EditorButtonBar-Gaxq4gul.js

@@ -1,244 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var hooks_useTheme = require('../hooks/useTheme.js');
-require('../theme/colors.js');
-require('../hooks/useWindow.js');
-var hooks_useObserveResize = require('../hooks/useObserveResize.js');
-var DropDown = require('./DropDown-D9sf_m2I.js');
-var IconButton = require('./IconButton-CjiNliPL.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.EditorButtonBar-module_wrapper__mfv-c {\n\twidth: 100%;\n}\n\n.EditorButtonBar-module_right__G2tBZ {\n}\n\n.EditorButtonBar-module_left__9omfV {\n\tflex: 1;\n}\n\n.EditorButtonBar-module_buttonGroup__p0aEd {\n\tgap: 4px;\n\tdiv.EditorButtonBar-module_divider__T5y5c {\n\t\theight: 20px;\n\t\tmin-height: 100%;\n\t\twidth: 1px;\n\t\tmin-width: 1px;\n\t\tmax-width: 1px;\n\t\tbackground: var(--core-surface-secondary);\n\t\tmargin: 0 8px;\n\t}\n}\n";
-var css = {"wrapper":"EditorButtonBar-module_wrapper__mfv-c flexBox-module_rowStart__nJZnW","right":"EditorButtonBar-module_right__G2tBZ flexBox-module_rowStart__nJZnW","left":"EditorButtonBar-module_left__9omfV flexBox-module_rowStart__nJZnW","buttonGroup":"EditorButtonBar-module_buttonGroup__p0aEd flexBox-module_rowStart__nJZnW"};
-styleInject_es.styleInject(css_248z);
-
-var FormattingOption;
-(function (FormattingOption) {
-    FormattingOption["hilight"] = "hilight";
-    FormattingOption["bold"] = "bold";
-    FormattingOption["italic"] = "italic";
-    FormattingOption["underline"] = "underline";
-    FormattingOption["strikethrough"] = "strikethrough";
-    FormattingOption["list"] = "list";
-    FormattingOption["orderedList"] = "ordered list";
-    FormattingOption["taskList"] = "task list";
-    FormattingOption["sinkList"] = "sink list";
-    FormattingOption["raiseList"] = "raise list";
-    FormattingOption["undo"] = "undo";
-    FormattingOption["redo"] = "redo";
-    FormattingOption["download"] = "download";
-    FormattingOption["more"] = "more";
-    FormattingOption["copy"] = "copy";
-    FormattingOption["link"] = "link";
-})(FormattingOption || (FormattingOption = {}));
-
-const coreButtons = {
-    link: {
-        icon: 'link',
-        toolTip: 'Link',
-        command: 'link',
-        id: FormattingOption.link,
-    },
-    hilight: {
-        icon: 'hilight',
-        toolTip: 'Highlight',
-        command: 'hilight',
-        id: FormattingOption.hilight,
-    },
-    bold: {
-        icon: 'bold',
-        toolTip: 'Bold',
-        command: 'bold',
-        id: FormattingOption.bold,
-        shortcut: { modifier: 'meta', key: 'b' },
-    },
-    italic: {
-        icon: 'italic',
-        toolTip: 'Italic',
-        command: 'italic',
-        id: FormattingOption.italic,
-        shortcut: { modifier: 'meta', key: 'i' },
-    },
-    underline: {
-        icon: 'underline',
-        toolTip: 'Underline',
-        command: 'underline',
-        id: FormattingOption.underline,
-        shortcut: { modifier: 'meta', key: 'u' },
-    },
-    strikethrough: {
-        icon: 'strike',
-        toolTip: 'Strikethrough',
-        command: 'strike',
-        id: FormattingOption.strikethrough,
-        shortcut: { modifier: 'meta', key: 's' },
-    },
-    list: {
-        icon: 'bullet list',
-        toolTip: 'List',
-        command: 'ulist',
-        id: FormattingOption.list,
-    },
-    orderedList: {
-        icon: 'numbered list',
-        toolTip: 'Ordered list',
-        command: 'olist',
-        id: FormattingOption.orderedList,
-    },
-    taskList: {
-        icon: 'task list',
-        toolTip: 'Task list',
-        command: 'task',
-        id: FormattingOption.taskList,
-    },
-    sinkList: {
-        icon: 'sink',
-        toolTip: 'Sink list item',
-        command: 'sink',
-        id: FormattingOption.sinkList,
-    },
-    raiseList: {
-        icon: 'lift',
-        toolTip: 'Raise list item',
-        command: 'raise',
-        id: FormattingOption.raiseList,
-    },
-    undo: {
-        icon: 'undo',
-        toolTip: 'Undo',
-        command: 'undo',
-        id: FormattingOption.undo,
-    },
-    redo: {
-        icon: 'redo',
-        toolTip: 'Redo',
-        command: 'redo',
-        id: FormattingOption.redo,
-    },
-    copy: {
-        icon: 'copy',
-        toolTip: 'Copy',
-        command: 'copy',
-        id: FormattingOption.copy,
-    },
-    download: {
-        icon: 'download',
-        toolTip: 'Download',
-        command: 'download',
-        id: FormattingOption.download,
-    },
-    more: {
-        icon: 'more',
-        toolTip: 'More Options',
-        command: 'more',
-        id: FormattingOption.more,
-    },
-};
-const styles = [
-    { label: 'Heading 1', value: 'h1', alt: 'h1' },
-    { label: 'Heading 2', value: 'h2', alt: 'h2' },
-    { label: 'Heading 3', value: 'h3', alt: 'h3' },
-    { label: 'Body', value: 'p', alt: 'p' },
-];
-const buttonGroups = {
-    format: {
-        buttons: [
-            coreButtons.hilight,
-            coreButtons.bold,
-            coreButtons.italic,
-            coreButtons.underline,
-            coreButtons.strikethrough,
-            coreButtons.link,
-        ],
-    },
-    lists: {
-        buttons: [coreButtons.list, coreButtons.orderedList, coreButtons.taskList],
-    },
-    listEdit: {
-        buttons: [coreButtons.sinkList, coreButtons.raiseList],
-    },
-    undo: {
-        buttons: [coreButtons.undo, coreButtons.redo],
-    },
-    more: {
-        buttons: [coreButtons.more],
-    },
-};
-const editControls = {
-    regular: {
-        styles,
-        buttons: [
-            buttonGroups.format,
-            buttonGroups.lists,
-            buttonGroups.listEdit,
-            buttonGroups.undo,
-        ],
-        download: coreButtons.download,
-    },
-    small: {
-        buttons: [buttonGroups.format, buttonGroups.more],
-        download: coreButtons.download,
-    },
-    medium: {
-        styles,
-        buttons: [buttonGroups.format, buttonGroups.lists],
-        download: coreButtons.download,
-    },
-};
-
-const EditorButtonBar = React.memo((props) => {
-    var _a;
-    const { onCommand = () => null, onToolTip = () => null, shortSize = 500, mediumSize = 664, state = 'auto', activeStyle = 'p', disabledFormats = [], activeFormats } = props, divAttributes = tslib_es6.__rest(props, ["onCommand", "onToolTip", "shortSize", "mediumSize", "state", "activeStyle", "disabledFormats", "activeFormats"]);
-    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? ` ${className}` : '';
-    const [barState, setBarState] = React.useState('regular');
-    const ref = React.useRef(null);
-    const size = hooks_useObserveResize.useObserveResize(ref);
-    React.useEffect(() => {
-        if (state !== 'auto')
-            setBarState(state);
-        else if (size.width < shortSize)
-            setBarState('small');
-        else if (size.width < mediumSize)
-            setBarState('medium');
-        else
-            setBarState('regular');
-    }, [size, shortSize, mediumSize, state]);
-    const handleStyleChange = React.useCallback((option) => {
-        switch (option.value) {
-            case 'h1':
-                onCommand('h1', undefined);
-                break;
-            case 'h2':
-                onCommand('h2', undefined);
-                break;
-            case 'h3':
-                onCommand('h3', undefined);
-                break;
-            case 'p':
-                onCommand('p', undefined);
-                break;
-        }
-    }, [onCommand]);
-    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: divStyle, ref: ref }, rest, { children: [jsxRuntime.jsxs("div", { className: css.left, children: [(editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles) && (jsxRuntime.jsx(DropDown.DropDown, { options: editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles, placeholder: false, unframed: true, width: '100px', selectedValue: activeStyle, onChange: (_index, option) => handleStyleChange(option) })), (_a = editControls === null || editControls === void 0 ? void 0 : editControls[barState].buttons) === null || _a === void 0 ? void 0 : _a.map((group, index) => {
-                        return (jsxRuntime.jsx(RenderGroup, { onCommand: onCommand, onToolTip: onToolTip, buttonGroup: group, activeFormats: activeFormats, disabledFormats: disabledFormats, state: barState }, `button-group-${group.name}${index}`));
-                    })] }), (editControls === null || editControls === void 0 ? void 0 : editControls[barState].download) && (jsxRuntime.jsxs("div", { className: css.right, children: [jsxRuntime.jsx(IconButton.IconButton, { icon: coreButtons.copy.icon, tooltip: coreButtons.copy.toolTip, hover: disabledFormats.includes('download'), toggle: false, onToolTip: onToolTip, disabled: disabledFormats.includes('copy'), onClick: (e) => onCommand(coreButtons.copy.command, e) }), jsxRuntime.jsx(IconButton.IconButton, { icon: coreButtons.download.icon, tooltip: coreButtons.download.toolTip, hover: !disabledFormats.includes('download'), toggle: false, onToolTip: onToolTip, disabled: disabledFormats.includes('download'), onClick: (e) => onCommand(coreButtons.download.command, e) })] }))] })));
-});
-const RenderGroup = React.memo((props) => {
-    var _a;
-    const { onCommand = () => null, onToolTip = () => null, buttonGroup, activeFormats, state = 'default', disabledFormats = [], } = props;
-    const theme = hooks_useTheme.useTheme();
-    return (jsxRuntime.jsxs("div", { className: css.buttonGroup, children: [state !== 'small' && jsxRuntime.jsx("div", { className: "divider" }), (_a = buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.buttons) === null || _a === void 0 ? void 0 : _a.map((button, index) => {
-                const active = (button === null || button === void 0 ? void 0 : button.id) ? activeFormats === null || activeFormats === void 0 ? void 0 : activeFormats.includes(button.id) : false;
-                const bgColor = active
-                    ? theme.current.colors['core-surface-secondary']
-                    : 'transparent';
-                return (jsxRuntime.jsx(IconButton.IconButton, { icon: button === null || button === void 0 ? void 0 : button.icon, tooltip: button === null || button === void 0 ? void 0 : button.toolTip, onToolTip: onToolTip, hover: !disabledFormats.includes(button.id || 'none'), toggle: false, bgColor: bgColor, onClick: (e) => onCommand(button === null || button === void 0 ? void 0 : button.command, e), disabled: disabledFormats.includes(button.id || 'none'), frameSize: 30, iconSize: 20 }, `button-${button === null || button === void 0 ? void 0 : button.icon}-${index}`));
-            })] }));
-});
-
-exports.EditorButtonBar = EditorButtonBar;