entangle-ui 0.7.0 → 0.8.1

package/dist/tokens/tokens.light.css

@@ -0,0 +1,98 @@
+/* Entangle UI light theme — token export (v0.8.1) */
+/* Generated by scripts/export-tokens.ts — do not edit by hand. */
+.etui-theme-light {
+  --etui-color-accent-error: #d32f2f;
+  --etui-color-accent-primary: #0066cc;
+  --etui-color-accent-secondary: #004a99;
+  --etui-color-accent-success: #2e7d32;
+  --etui-color-accent-warning: #a64500;
+  --etui-color-backdrop: rgba(0, 0, 0, 0.4);
+  --etui-color-bg-elevated: #ffffff;
+  --etui-color-bg-inset: #f8f8fa;
+  --etui-color-bg-primary: #ffffff;
+  --etui-color-bg-secondary: #f5f5f7;
+  --etui-color-bg-tertiary: #ebebee;
+  --etui-color-border-default: #e0e0e3;
+  --etui-color-border-error: #d32f2f;
+  --etui-color-border-focus: #0066cc;
+  --etui-color-border-success: #2e7d32;
+  --etui-color-surface-active: #e6e6ea;
+  --etui-color-surface-default: #ffffff;
+  --etui-color-surface-disabled: #f5f5f7;
+  --etui-color-surface-hover: #f0f0f3;
+  --etui-color-surface-row-hover: #f5f5f7;
+  --etui-color-surface-row: #ffffff;
+  --etui-color-surface-white-overlay: rgba(0, 0, 0, 0.06);
+  --etui-color-text-disabled: #b0b0b0;
+  --etui-color-text-muted: #6b6b6b;
+  --etui-color-text-primary: #1a1a1a;
+  --etui-color-text-secondary: #4a4a4a;
+  --etui-font-family-mono: SF Mono, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --etui-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --etui-font-size-lg: 14px;
+  --etui-font-size-md: 12px;
+  --etui-font-size-sm: 11px;
+  --etui-font-size-xl: 16px;
+  --etui-font-size-xs: 10px;
+  --etui-font-size-xxs: 9px;
+  --etui-font-weight-medium: 500;
+  --etui-font-weight-normal: 400;
+  --etui-font-weight-semibold: 600;
+  --etui-line-height-normal: 1.4;
+  --etui-line-height-relaxed: 1.6;
+  --etui-line-height-tight: 1.2;
+  --etui-radius-lg: 6px;
+  --etui-radius-md: 4px;
+  --etui-radius-none: 0px;
+  --etui-radius-sm: 2px;
+  --etui-shadow-focus: 0 0 0 2px rgba(0, 102, 204, 0.3);
+  --etui-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.10);
+  --etui-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --etui-shadow-separator-bottom: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --etui-shadow-separator-left: -1px 0 2px rgba(0, 0, 0, 0.04);
+  --etui-shadow-separator-right: 1px 0 2px rgba(0, 0, 0, 0.04);
+  --etui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --etui-shadow-thumb: 0 0 2px rgba(0, 0, 0, 0.15);
+  --etui-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --etui-shell-dock-border-bar-bg: #f5f5f7;
+  --etui-shell-dock-border-bar-size: 28px;
+  --etui-shell-dock-drop-overlay: rgba(0, 102, 204, 0.15);
+  --etui-shell-dock-splitter-color: #e0e0e3;
+  --etui-shell-dock-splitter-hover-color: #0066cc;
+  --etui-shell-dock-splitter-size: 4px;
+  --etui-shell-dock-tab-active-bg: #ffffff;
+  --etui-shell-dock-tab-active-text: #1a1a1a;
+  --etui-shell-dock-tab-bg: #f5f5f7;
+  --etui-shell-dock-tab-height: 28px;
+  --etui-shell-dock-tab-hover-bg: #ebebee;
+  --etui-shell-dock-tab-text: #4a4a4a;
+  --etui-shell-menubar-active-bg: #0066cc;
+  --etui-shell-menubar-bg: #f5f5f7;
+  --etui-shell-menubar-height: 28px;
+  --etui-shell-menubar-hover-bg: #ebebee;
+  --etui-shell-menubar-shortcut-text: #6b6b6b;
+  --etui-shell-menubar-text: #1a1a1a;
+  --etui-shell-statusbar-bg: #0066cc;
+  --etui-shell-statusbar-height-md: 26px;
+  --etui-shell-statusbar-height: 22px;
+  --etui-shell-statusbar-text: #ffffff;
+  --etui-shell-toolbar-bg: #f5f5f7;
+  --etui-shell-toolbar-height-md: 40px;
+  --etui-shell-toolbar-height-sm: 32px;
+  --etui-shell-toolbar-separator: #e0e0e3;
+  --etui-spacing-lg: 12px;
+  --etui-spacing-md: 8px;
+  --etui-spacing-sm: 4px;
+  --etui-spacing-xl: 16px;
+  --etui-spacing-xs: 2px;
+  --etui-spacing-xxl: 24px;
+  --etui-spacing-xxxl: 32px;
+  --etui-transition-fast: 100ms ease-out;
+  --etui-transition-normal: 200ms ease-out;
+  --etui-transition-slow: 300ms ease-out;
+  --etui-z-base: 1;
+  --etui-z-dropdown: 1000;
+  --etui-z-modal: 1100;
+  --etui-z-popover: 1000;
+  --etui-z-tooltip: 1000;
+}

package/dist/types/components/Icons/AddIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Add icon component for create/add actions.
+ *
+ * A standard plus icon commonly used for adding new items,
+ * creating content, and expand functionality in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AddIcon />
+ *
+ * // With custom size and color
+ * <AddIcon size="lg" color="primary" />
+ *
+ * // In an add button
+ * <Button icon={<AddIcon />}>Add Item</Button>
+ * ```
+ */
+declare const AddIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { AddIcon };

package/dist/types/components/Icons/AiChatIcon.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * AI Chat icon component for AI assistant chat interfaces.
+ *
+ * A chat bubble with a sparkle accent, commonly used for
+ * AI chat panels, assistant toggles, and conversational
+ * AI features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AiChatIcon />
+ *
+ * // With custom size and color
+ * <AiChatIcon size="lg" color="accent" />
+ *
+ * // In a toolbar toggle
+ * <Toolbar.Toggle icon={<AiChatIcon size="sm" />} tooltip="AI Chat" />
+ * ```
+ */
+declare const AiChatIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { AiChatIcon };

package/dist/types/components/Icons/AiSparklesIcon.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * AI sparkles icon component representing artificial intelligence.
+ *
+ * Three 4-pointed sparkle stars at different sizes,
+ * commonly used for AI features, generative tools,
+ * and smart suggestions in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AiSparklesIcon />
+ *
+ * // With custom size and color
+ * <AiSparklesIcon size="lg" color="primary" />
+ *
+ * // In an AI action button
+ * <Button icon={<AiSparklesIcon />}>Generate</Button>
+ * ```
+ */
+declare const AiSparklesIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { AiSparklesIcon };

package/dist/types/components/Icons/ArrowDownIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Down icon component for downward navigation and expansion.
+ *
+ * A standard downward-pointing arrow commonly used for dropdown menus,
+ * expanding content, and downward navigation in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowDownIcon />
+ *
+ * // With custom size and color
+ * <ArrowDownIcon size="lg" color="primary" />
+ *
+ * // In a dropdown button
+ * <Button icon={<ArrowDownIcon />}>Expand</Button>
+ * ```
+ */
+declare const ArrowDownIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowDownIcon };

package/dist/types/components/Icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Left icon component for leftward navigation and back actions.
+ *
+ * A standard leftward-pointing arrow commonly used for back buttons,
+ * previous navigation, and leftward movement in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowLeftIcon />
+ *
+ * // With custom size and color
+ * <ArrowLeftIcon size="lg" color="primary" />
+ *
+ * // In a back button
+ * <Button icon={<ArrowLeftIcon />}>Back</Button>
+ * ```
+ */
+declare const ArrowLeftIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowLeftIcon };

package/dist/types/components/Icons/ArrowRightIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Right icon component for rightward navigation and forward actions.
+ *
+ * A standard rightward-pointing arrow commonly used for next buttons,
+ * forward navigation, and rightward movement in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowRightIcon />
+ *
+ * // With custom size and color
+ * <ArrowRightIcon size="lg" color="primary" />
+ *
+ * // In a next button
+ * <Button icon={<ArrowRightIcon />}>Next</Button>
+ * ```
+ */
+declare const ArrowRightIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowRightIcon };

package/dist/types/components/Icons/ArrowUpIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Up icon component for upward navigation and collapse actions.
+ *
+ * A standard upward-pointing arrow commonly used for collapse buttons,
+ * upward navigation, and minimizing content in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowUpIcon />
+ *
+ * // With custom size and color
+ * <ArrowUpIcon size="lg" color="primary" />
+ *
+ * // In a collapse button
+ * <Button icon={<ArrowUpIcon />}>Collapse</Button>
+ * ```
+ */
+declare const ArrowUpIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowUpIcon };

package/dist/types/components/Icons/BookmarkIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Bookmark icon component for saving and marking content.
+ *
+ * A standard bookmark icon commonly used for saving items,
+ * marking favorites, and bookmarking content in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BookmarkIcon />
+ *
+ * // With custom size and color
+ * <BookmarkIcon size="lg" color="accent" />
+ *
+ * // In a bookmark button
+ * <Button icon={<BookmarkIcon />}>Bookmark</Button>
+ * ```
+ */
+declare const BookmarkIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { BookmarkIcon };

package/dist/types/components/Icons/CalendarIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Calendar icon component for date and scheduling functionality.
+ *
+ * A standard calendar icon commonly used for date pickers,
+ * scheduling, and time-related features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CalendarIcon />
+ *
+ * // With custom size and color
+ * <CalendarIcon size="lg" color="primary" />
+ *
+ * // In a date picker
+ * <Button icon={<CalendarIcon />}>Select Date</Button>
+ * ```
+ */
+declare const CalendarIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CalendarIcon };

package/dist/types/components/Icons/CheckIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Check icon component for confirmation and selection states.
+ *
+ * A standard checkmark icon commonly used for checkboxes, confirmation dialogs,
+ * completed tasks, and success states in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CheckIcon />
+ *
+ * // With custom size and color
+ * <CheckIcon size="lg" color="success" />
+ *
+ * // In a confirmation button
+ * <Button icon={<CheckIcon />}>Confirm</Button>
+ * ```
+ */
+declare const CheckIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CheckIcon };

package/dist/types/components/Icons/ChevronDownIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Down icon component for dropdown and expansion indicators.
+ *
+ * A subtle downward chevron commonly used for dropdown menus,
+ * accordion expansion, and subtle directional cues in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronDownIcon />
+ *
+ * // With custom size and color
+ * <ChevronDownIcon size="sm" color="muted" />
+ *
+ * // In a dropdown
+ * <Select icon={<ChevronDownIcon />}>Options</Select>
+ * ```
+ */
+declare const ChevronDownIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ChevronDownIcon };

package/dist/types/components/Icons/ChevronUpIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Up icon component for collapse and upward indicators.
+ *
+ * A subtle upward chevron commonly used for collapsing content,
+ * accordion collapse, and subtle directional cues in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronUpIcon />
+ *
+ * // With custom size and color
+ * <ChevronUpIcon size="sm" color="muted" />
+ *
+ * // In a collapsible section
+ * <Button icon={<ChevronUpIcon />}>Collapse</Button>
+ * ```
+ */
+declare const ChevronUpIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ChevronUpIcon };

package/dist/types/components/Icons/CircleIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Circle icon component for radio buttons and dot indicators.
+ *
+ * A standard circle icon commonly used for radio button selections,
+ * dot indicators, and circular markers in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CircleIcon />
+ *
+ * // With custom size and color
+ * <CircleIcon size="lg" color="primary" />
+ *
+ * // In a radio selection
+ * <Button icon={<CircleIcon />}>Option</Button>
+ * ```
+ */
+declare const CircleIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CircleIcon };

package/dist/types/components/Icons/ClockIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Clock icon component for time and scheduling functionality.
+ *
+ * A standard clock icon commonly used for time displays,
+ * scheduling features, and temporal indicators in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ClockIcon />
+ *
+ * // With custom size and color
+ * <ClockIcon size="lg" color="primary" />
+ *
+ * // In a time picker
+ * <Button icon={<ClockIcon />}>Set Time</Button>
+ * ```
+ */
+declare const ClockIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ClockIcon };

package/dist/types/components/Icons/CloseIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Close icon component for dismissing and closing actions.
+ *
+ * A standard X icon commonly used for closing modals,
+ * dismissing notifications, and cancel actions in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CloseIcon />
+ *
+ * // With custom size and color
+ * <CloseIcon size="sm" color="muted" />
+ *
+ * // In a close button
+ * <IconButton icon={<CloseIcon />} aria-label="Close" />
+ * ```
+ */
+declare const CloseIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CloseIcon };

package/dist/types/components/Icons/CodeIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Code icon component for code and development actions.
+ *
+ * A standard code brackets icon commonly used for code editing,
+ * development tools, and programming features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeIcon />
+ *
+ * // With custom size and color
+ * <CodeIcon size="md" color="accent" />
+ *
+ * // In a code context
+ * <Button icon={<CodeIcon />}>View Code</Button>
+ * ```
+ */
+declare const CodeIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CodeIcon };

package/dist/types/components/Icons/CopyIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Copy icon component for duplication and clipboard actions.
+ *
+ * A standard copy icon commonly used for copying content,
+ * duplicating items, and clipboard operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CopyIcon />
+ *
+ * // With custom size and color
+ * <CopyIcon size="md" color="primary" />
+ *
+ * // In a copy button
+ * <Button icon={<CopyIcon />}>Copy</Button>
+ * ```
+ */
+declare const CopyIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CopyIcon };