@fpkit/acss 1.0.0 → 2.1.0

package/libs/components/link/link.d.ts

@@ -1,3 +1,131 @@
-import 'react';
-export { L as Link, L as default } from '../../link-5192f411.js';
-import '../../ui-d01b50d4.js';
+import React from 'react';
+
+/**
+ * Link - A semantic, accessible anchor component with enhanced security and styling.
+ *
+ * The Link component renders accessible `<a>` elements with automatic security
+ * attributes for external links, customizable styling variants, and full WCAG 2.1
+ * AA compliance. It supports traditional text links, button-styled links, and
+ * programmatic focus management via ref forwarding.
+ *
+ * ## Features
+ *
+ * - 🔒 **Automatic Security**: External links get `rel="noopener noreferrer"`
+ * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML
+ * - 🎨 **Flexible Styling**: Text links, button links, and pill variants
+ * - ⚡ **Performance**: Optional prefetch hints for faster navigation
+ * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll
+ * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types
+ *
+ * ## Accessibility
+ *
+ * - ✅ Semantic `<a>` element for proper keyboard navigation
+ * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)
+ * - ✅ Screen readers announce link purpose and destination
+ * - ✅ External links include security attributes automatically
+ * - ✅ Supports `aria-label` for icon-only or ambiguous links
+ * - ✅ Ref forwarding enables skip-link patterns
+ *
+ * @example
+ * // Basic internal link
+ * <Link href="/about">About Us</Link>
+ *
+ * @example
+ * // External link with automatic security
+ * <Link href="https://example.com" target="_blank">
+ *   Visit Example
+ * </Link>
+ *
+ * @example
+ * // Button-styled call-to-action link
+ * <Link href="/signup">
+ *   <b>Get Started</b>
+ * </Link>
+ *
+ * @example
+ * // Icon-only link with accessible label
+ * <Link href="/settings" aria-label="Open settings">
+ *   <SettingsIcon aria-hidden="true" />
+ * </Link>
+ *
+ * @example
+ * // Analytics tracking with onClick (includes keyboard users)
+ * <Link
+ *   href="/products"
+ *   onClick={(e) => trackEvent('link_click', { href: '/products' })}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // Skip link with ref forwarding for focus management
+ * const mainRef = useRef<HTMLAnchorElement>(null);
+ *
+ * <Link ref={mainRef} href="#main-content">
+ *   Skip to main content
+ * </Link>
+ *
+ * @example
+ * // Custom styled link with CSS variables
+ * <Link
+ *   href="/products"
+ *   styles={{
+ *     '--link-color': '#0066cc',
+ *     '--link-decoration': 'underline',
+ *   }}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // ✅ GOOD: Descriptive link text
+ * <Link href="/docs/installation">
+ *   Read installation guide
+ * </Link>
+ *
+ * @example
+ * // ❌ BAD: Generic link text (poor for screen readers)
+ * <Link href="/docs/installation">
+ *   Click here
+ * </Link>
+ *
+ * @see {@link LinkProps} for complete prop documentation
+ */
+declare const Link: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const IconLink: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const LinkButton: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { IconLink, Link, LinkButton, Link as default };

package/libs/components/link/link.js

@@ -1,4 +1,4 @@
-export { a as Link, b as default } from '../../chunk-UEPAWMDF.js';
+export { b as IconLink, a as Link, c as LinkButton, d as default } from '../../chunk-NNTBIHSD.js';
 import '../../chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=link.js.map

package/libs/components/modal.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkDKTHCQ5P_cjs = require('../chunk-DKTHCQ5P.cjs');
-require('../chunk-GT77BX4L.cjs');
+var chunkX5RKCLDC_cjs = require('../chunk-X5RKCLDC.cjs');
+require('../chunk-E4OSROCA.cjs');
 require('../chunk-PNWIRCG3.cjs');
 require('../chunk-TON2YGMD.cjs');
 require('../chunk-ENTCUJ3A.cjs');
@@ -10,7 +10,7 @@ require('../chunk-ENTCUJ3A.cjs');
 
 Object.defineProperty(exports, 'Modal', {
 	enumerable: true,
-	get: function () { return chunkDKTHCQ5P_cjs.a; }
+	get: function () { return chunkX5RKCLDC_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=modal.cjs.map

package/libs/components/modal.js

@@ -1,5 +1,5 @@
-export { a as Modal } from '../chunk-7XPFW7CB.js';
-import '../chunk-OVWLQYMK.js';
+export { a as Modal } from '../chunk-43TK2ICH.js';
+import '../chunk-KVKQLRJG.js';
 import '../chunk-BFK62VX5.js';
 import '../chunk-75QHTLFO.js';
 import '../chunk-HHLNOC5T.js';

package/libs/hooks.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkT4T6GWYQ_cjs = require('./chunk-T4T6GWYQ.cjs');
+var chunkR7NLLZU2_cjs = require('./chunk-R7NLLZU2.cjs');
 var chunkPDD4N5P5_cjs = require('./chunk-PDD4N5P5.cjs');
 var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
-require('./chunk-33PNJ4LO.cjs');
+require('./chunk-5PJYLVFY.cjs');
 require('./chunk-ENTCUJ3A.cjs');
 
 
 
 Object.defineProperty(exports, 'useBreadcrumbSegments', {
 	enumerable: true,
-	get: function () { return chunkT4T6GWYQ_cjs.a; }
+	get: function () { return chunkR7NLLZU2_cjs.a; }
 });
 Object.defineProperty(exports, 'usePopover', {
 	enumerable: true,

package/libs/hooks.d.cts

@@ -1,7 +1,7 @@
 export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.cjs';
 import 'react';
 import './ui-d01b50d4.js';
-import './link-5192f411.js';
+import './components/link/link.cjs';
 
 type Position = {
     /**

package/libs/hooks.d.ts

@@ -1,7 +1,7 @@
 export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
 import 'react';
 import './ui-d01b50d4.js';
-import './link-5192f411.js';
+import './components/link/link.js';
 
 type Position = {
     /**

package/libs/hooks.js

@@ -1,7 +1,7 @@
-export { a as useBreadcrumbSegments } from './chunk-X5LGFCWG.js';
+export { a as useBreadcrumbSegments } from './chunk-UJAQVHWC.js';
 export { a as usePopover } from './chunk-GCGKYLDG.js';
 export { a as useDisabledState } from './chunk-75QHTLFO.js';
-import './chunk-UEPAWMDF.js';
+import './chunk-NNTBIHSD.js';
 import './chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=hooks.js.map

package/libs/icons-287fce3a.d.ts

@@ -0,0 +1,445 @@
+import { C as ComponentProps } from './component-props-67d978a2.js';
+import React from 'react';
+import { U as UI } from './ui-d01b50d4.js';
+
+/**
+ * Props for individual icon SVG components (e.g., Icon.Code, Icon.Home).
+ *
+ * These props control the visual presentation of SVG icons. Icon components
+ * are decorative by default and should be wrapped in the `Icon` container
+ * component which handles accessibility concerns.
+ *
+ * @property {string} [fill] - SVG fill color (CSS color value)
+ * @property {number} [size] - Icon size in pixels (sets both width and height)
+ * @property {string} [strokeColor] - SVG stroke color (CSS color value)
+ * @property {string} [strokeWidth] - SVG stroke width (e.g., '2px', '1.5')
+ * @property {string} [role] - ARIA role (use 'img' for semantic icons)
+ * @property {string} [aria-label] - Accessible label for standalone icons
+ * @property {boolean} [aria-hidden] - Hide from screen readers (default: true via Icon wrapper)
+ * @property {string} [alt] - @deprecated Use aria-label instead. Legacy prop for accessible label.
+ * @property {number} [width] - Explicit width in pixels (overrides size)
+ * @property {number} [height] - Explicit height in pixels (overrides size)
+ *
+ * @example
+ * ```tsx
+ * // Decorative icon with custom styling
+ * <Icon>
+ *   <Icon.Code size={24} fill="blue" />
+ *   View Code
+ * </Icon>
+ *
+ * // Standalone semantic icon
+ * <Icon aria-hidden={false} aria-label="Code snippet">
+ *   <Icon.Code size={20} />
+ * </Icon>
+ * ```
+ */
+interface IconProps$1 extends Partial<ComponentProps> {
+    /** SVG fill color */
+    fill?: string;
+    /** Icon size in pixels (sets both width and height) */
+    size?: number;
+    /** SVG stroke color */
+    strokeColor?: string;
+    /** SVG stroke width */
+    strokeWidth?: string;
+    /** ARIA role (use 'img' for semantic icons) */
+    role?: string;
+    /** Accessible label (required for standalone icons) */
+    'aria-label'?: string;
+    /** Hide from screen readers (default: true) */
+    'aria-hidden'?: boolean;
+    /**
+     * @deprecated Use aria-label instead. This prop exists for backward compatibility.
+     * The alt attribute is only valid for img elements, not SVG.
+     */
+    alt?: string;
+    /** Explicit width in pixels */
+    width?: number;
+    /** Explicit height in pixels */
+    height?: number;
+}
+
+declare function Star({ size, fill, strokeColor, styles, role, alt, ...props }: Pick<IconProps$1, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): React.JSX.Element;
+declare namespace Star {
+    var displayName: string;
+}
+
+type IconProps = React.ComponentProps<typeof UI> & {
+    /**
+     * Controls screen reader visibility.
+     * - `true` (default): Hides icon from screen readers (decorative icon)
+     * - `false`: Makes icon visible to screen readers (semantic icon)
+     *
+     * **When to use decorative (aria-hidden="true", default):**
+     * - Icon accompanies visible text (e.g., button with icon + label)
+     * - Icon is purely visual decoration
+     *
+     * **When to use semantic (aria-hidden="false"):**
+     * - Icon is the only content (e.g., icon-only button)
+     * - Must provide `aria-label` or `aria-labelledby` for accessible name
+     *
+     * @default true
+     * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
+     */
+    "aria-hidden"?: boolean;
+    /**
+     * Accessible label for semantic icons.
+     * Required when icon is standalone (not accompanied by visible text).
+     *
+     * @example
+     * ```tsx
+     * // ✅ GOOD: Icon-only button with accessible name
+     * <button>
+     *   <Icon aria-hidden={false} aria-label="Close dialog">
+     *     <Icon.Remove />
+     *   </Icon>
+     * </button>
+     *
+     * // ✅ GOOD: Icon with visible text (default decorative)
+     * <button>
+     *   <Icon><Icon.Add /></Icon>
+     *   Add Item
+     * </button>
+     * ```
+     */
+    "aria-label"?: string;
+    /**
+     * Semantic role override.
+     * Use `role="img"` when icon conveys meaning and is not decorative.
+     *
+     * @default undefined (no role for decorative icons)
+     */
+    role?: string;
+};
+/**
+ * Icon wrapper component that enforces accessibility best practices.
+ *
+ * **Default behavior (decorative icon):**
+ * - Hidden from screen readers (`aria-hidden="true"`)
+ * - Used when icon accompanies visible text
+ *
+ * **Semantic icon pattern:**
+ * - Set `aria-hidden={false}` to expose to screen readers
+ * - Must provide `aria-label` for accessible name
+ * - Consider `role="img"` for complex SVG icons
+ *
+ * @param {IconProps} props - Component props
+ * @returns {React.ReactElement} Accessible icon wrapper
+ *
+ * @example
+ * // ✅ Decorative icon with text (default)
+ * <button>
+ *   <Icon><Icon.Save /></Icon>
+ *   Save Changes
+ * </button>
+ *
+ * @example
+ * // ✅ Semantic icon-only button
+ * <button aria-label="Close dialog">
+ *   <Icon aria-hidden={false}>
+ *     <Icon.Remove />
+ *   </Icon>
+ * </button>
+ *
+ * @example
+ * // ❌ BAD: Icon-only button without accessible name
+ * <button>
+ *   <Icon><Icon.Remove /></Icon>
+ * </button>
+ */
+declare const Icon: {
+    ({ id, classes, children, styles, "aria-hidden": ariaHidden, "aria-label": ariaLabel, role, ...props }: IconProps): React.JSX.Element;
+    displayName: string;
+    Add: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        styles: {
+            fill: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+        displayName: string;
+    };
+    ArrowDown: {
+        ({ fill, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size">): React.JSX.Element;
+        styles: {
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+        displayName: string;
+    };
+    ArrowLeft: {
+        ({ strokeColor, fill, size, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        styles: {
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+        displayName: string;
+    };
+    ArrowRight: {
+        ({ size, fill, strokeColor, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+    };
+    ArrowUp: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Chat: {
+        ({ size, strokeColor, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        styles: {
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+        displayName: string;
+    };
+    Code: {
+        ({ strokeColor, fill, size, styles, role, alt, ...props }?: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        styles: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Copy: {
+        ({ size, strokeColor, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+        styles: {
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Down: {
+        ({ size, fill, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Home: {
+        ({ strokeColor, fill, size, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Info: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    InfoSolid: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    AlertSolid: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    Left: {
+        ({ fill, size, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            fill: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Minus: {
+        ({ size, fill, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            fill: string;
+        };
+    };
+    Pause: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    PauseSolid: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Play: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    PlaySolid: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Remove: {
+        ({ size, fill, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            fill: string;
+        };
+    };
+    Resume: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    ResumeSolid: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Right: {
+        ({ size, fill, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            fill: string;
+        };
+    };
+    Star: typeof Star;
+    Stop: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        }; /**
+         * Controls screen reader visibility.
+         * - `true` (default): Hides icon from screen readers (decorative icon)
+         * - `false`: Makes icon visible to screen readers (semantic icon)
+         *
+         * **When to use decorative (aria-hidden="true", default):**
+         * - Icon accompanies visible text (e.g., button with icon + label)
+         * - Icon is purely visual decoration
+         *
+         * **When to use semantic (aria-hidden="false"):**
+         * - Icon is the only content (e.g., icon-only button)
+         * - Must provide `aria-label` or `aria-labelledby` for accessible name
+         *
+         * @default true
+         * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
+         */
+    };
+    StopSolid: {
+        ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        style: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    Up: {
+        ({ size, fill, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+    };
+    User: {
+        ({ size, fill, strokeColor, styles, alt, role, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        styles: {
+            fill: string;
+            stroke: string;
+            display: string;
+            alignItems: string;
+            width: string;
+        };
+        displayName: string;
+    };
+    styles: {
+        display: string;
+        direction: string;
+        gap: string;
+        placeItems: string;
+        width: string;
+    };
+    QuestionSolid: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    WarnSolid: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    SuccessSolid: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    AlertSquareSolid: {
+        ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        ({ size, fill, styles, role, alt, ...props }: Pick<IconProps$1, "styles" | "role" | "fill" | "alt" | "size" | "strokeColor">): React.JSX.Element;
+        displayName: string;
+        styles: {
+            fill: string;
+        };
+    };
+};
+
+export { IconProps$1 as I, Icon as a, IconProps as b };

package/libs/icons.d.cts

@@ -1,4 +1,4 @@
-export { default as Icon, IconProps } from './components/icons/icon.cjs';
+export { a as Icon, b as IconProps } from './icons-287fce3a.js';
 import './component-props-67d978a2.js';
 import 'react';
 import './ui-d01b50d4.js';

package/libs/icons.d.ts

@@ -1,4 +1,4 @@
-export { default as Icon, IconProps } from './components/icons/icon.js';
+export { a as Icon, b as IconProps } from './icons-287fce3a.js';
 import './component-props-67d978a2.js';
 import 'react';
 import './ui-d01b50d4.js';