@fpkit/acss 2.0.0 → 2.1.0

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';

package/libs/index.cjs

@@ -21,25 +21,25 @@ require('./chunk-PNWIRCG3.cjs');
 require('./chunk-TON2YGMD.cjs');
 var chunk5PJYLVFY_cjs = require('./chunk-5PJYLVFY.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
-var u = require('react');
+var v = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var u__default = /*#__PURE__*/_interopDefault(u);
+var v__default = /*#__PURE__*/_interopDefault(v);
 
-var V=({src:e="//",alt:s,width:t=480,height:n,styles:r,loading:i="lazy",placeholder:c,fetchpriority:m="low",decoding:d="auto",srcSet:T,sizes:x,onError:y,onLoad:P,...C})=>{let h=u.useMemo(()=>{let o=typeof t=="number"?t:480,p=typeof n=="number"?n:Math.round(o*.75),l=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${o} ${p}">
+var ve={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},M=({severity:e})=>{let t=ve[e];return t?v__default.default.createElement("span",{className:"sr-only"},t):null};var Pe=(e,t)=>({info:v__default.default.createElement(chunk6WTC4JXH_cjs.b.InfoSolid,{...t}),success:v__default.default.createElement(chunk6WTC4JXH_cjs.b.SuccessSolid,{...t}),warning:v__default.default.createElement(chunk6WTC4JXH_cjs.b.WarnSolid,{...t}),error:v__default.default.createElement(chunk6WTC4JXH_cjs.b.AlertSolid,{...t}),default:v__default.default.createElement(chunk6WTC4JXH_cjs.b.AlertSquareSolid,{...t})})[e],R=({severity:e,iconProps:t,hideIcon:r})=>{if(r)return null;let o=Pe(e,t);return v__default.default.createElement(chunkENTCUJ3A_cjs.a,{"aria-hidden":"true",className:"alert-icon"},o)};var D=({title:e,titleLevel:t})=>{if(!e)return null;let r=t?`h${t}`:"strong";return v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:r,className:"alert-title"},e)};var z=({children:e,contentType:t})=>t==="node"?v__default.default.createElement(v__default.default.Fragment,null,e):v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"p"},e);var H=({actions:e})=>e?v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",className:"alert-actions"},e):null;var X=v__default.default.memo(({onDismiss:e,iconSize:t=16})=>v__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},v__default.default.createElement(chunk6WTC4JXH_cjs.b,null,v__default.default.createElement(chunk6WTC4JXH_cjs.b.Close,{size:t})))),J=X;X.displayName="DismissButton";var Ee={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},k=v__default.default.forwardRef(({severity:e,variant:t,isVisible:r,dismissible:o,onDismiss:s,onInteractionStart:i,onInteractionEnd:c,autoFocus:l,title:m,titleLevel:I,children:y,contentType:g,actions:T,hideIcon:f,iconProps:S,...C},x)=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",ref:x,role:"alert","aria-live":Ee[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":r,"data-variant":t,tabIndex:l?-1:void 0,onMouseEnter:i,onMouseLeave:c,onFocus:i,onBlur:c,...C},v__default.default.createElement(M,{severity:e}),v__default.default.createElement(R,{severity:e,iconProps:S,hideIcon:f}),v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",className:"alert-message"},v__default.default.createElement(D,{title:m,titleLevel:I}),v__default.default.createElement(z,{contentType:g},y),v__default.default.createElement(H,{actions:T})),o&&v__default.default.createElement(J,{onDismiss:s})));k.displayName="AlertView";var Ae=({open:e,onDismiss:t,dismissible:r,autoHideDuration:o,pauseOnHover:s,autoFocus:i,alertRef:c})=>{let[l,m]=v__default.default.useState(e),[I,y]=v__default.default.useState(e),[g,T]=v__default.default.useState(!1),f=v__default.default.useCallback(()=>{m(!1),setTimeout(()=>{y(!1),t?.();},300);},[t]);v__default.default.useEffect(()=>{e?(y(!0),m(!0)):m(!1);},[e]),v__default.default.useEffect(()=>{if(!o||!l||g)return;let x=setTimeout(()=>{f();},o);return ()=>clearTimeout(x)},[o,l,g,f]),v__default.default.useEffect(()=>{if(!r||!l)return;let x=u=>{u.key==="Escape"&&f();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[r,l,f]),v__default.default.useEffect(()=>{i&&l&&c.current&&c.current.focus();},[i,l,c]);let S=v__default.default.useCallback(()=>{s&&o&&T(!0);},[s,o]),C=v__default.default.useCallback(()=>{s&&o&&T(!1);},[s,o]);return {isVisible:l,shouldRender:I,handleDismiss:f,handleInteractionStart:S,handleInteractionEnd:C}},K=({open:e,severity:t="default",children:r,title:o,dismissible:s=!1,onDismiss:i,iconSize:c,iconProps:l,hideIcon:m,autoHideDuration:I,pauseOnHover:y=!0,titleLevel:g=3,actions:T,autoFocus:f=!1,variant:S="outlined",contentType:C="text",...x})=>{let u=v__default.default.useRef(null),{isVisible:a,shouldRender:p,handleDismiss:d,handleInteractionStart:U,handleInteractionEnd:oe}=Ae({open:e,onDismiss:i,dismissible:s,autoHideDuration:I,pauseOnHover:y,autoFocus:f,alertRef:u});if(!p)return null;let re={size:c||16,...l};return v__default.default.createElement(k,{ref:u,severity:t,variant:S,isVisible:a,dismissible:s,onDismiss:d,onInteractionStart:U,onInteractionEnd:oe,autoFocus:f,title:o,titleLevel:g,contentType:C,actions:T,hideIcon:m,iconProps:re,...x},r)};K.displayName="Alert";var Y=({src:e="//",alt:t,width:r=480,height:o,styles:s,loading:i="lazy",placeholder:c,fetchpriority:l="low",decoding:m="auto",srcSet:I,sizes:y,onError:g,onLoad:T,...f})=>{let S=v.useMemo(()=>{let a=typeof r=="number"?r:480,p=typeof o=="number"?o:Math.round(a*.75),d=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${a} ${p}">
       <defs>
-        <linearGradient id="grad-${o}-${p}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <linearGradient id="grad-${a}-${p}" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
           <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1" />
           <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
         </linearGradient>
       </defs>
-      <rect width="${o}" height="${p}" fill="url(#grad-${o}-${p})"/>
-      <circle cx="${o*.15}" cy="${p*.2}" r="${Math.min(o,p)*.08}" fill="rgba(255,255,255,0.2)"/>
-      <path d="M0,${p*.75} Q${o*.25},${p*.65} ${o*.5},${p*.75} T${o},${p*.75} L${o},${p} L0,${p} Z" fill="rgba(0,0,0,0.15)"/>
-      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="${Math.max(16,Math.min(o,p)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${o}\xD7${p}</text>
-    </svg>`;return `data:image/svg+xml,${encodeURIComponent(l)}`},[t,n]),w=c??h;return u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"img",src:e,alt:s,width:t,height:n||"auto",loading:i,style:r,srcSet:T,sizes:x,onError:o=>{y&&y(o),o.defaultPrevented||o.currentTarget.src!==w&&(o.currentTarget.src=w);},onLoad:o=>{P?.(o);},decoding:d,...C,...m&&{fetchpriority:m}})};V.displayName="Img";var M=e=>{let[s,t]=u.useState([]),[n,r]=u.useState(e),[i,c]=u.useState(!1),[m,d]=u.useState(!1),[T,x]=u.useState(null);return u.useEffect(()=>{let f=()=>{let o=window.speechSynthesis.getVoices();t(o);let p=o.find(l=>l.name==="Google US English");if(p)r(p);else {let l=o.find($=>$.lang.startsWith("en-"));l&&r(l);}};return f(),window.speechSynthesis.onvoiceschanged=f,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(f,o={},p)=>{let l=new SpeechSynthesisUtterance(f);l.lang=o.lang??"en-US",l.pitch=o.pitch??1,l.rate=o.rate??1,l.voice=n??o.voice??null,l.onend=()=>{c(!1),d(!1),p&&p();},"speechSynthesis"in window?(window.speechSynthesis.speak(l),x(l),c(!0),d(!1)):console.error("Speech synthesis not supported");},pause:()=>{i&&!m&&(window.speechSynthesis.pause(),d(!0));},resume:()=>{i&&m&&(window.speechSynthesis.resume(),d(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),c(!1),d(!1));},isSpeaking:i,isPaused:m,availableVoices:s,changeVoice:f=>{r(f);},currentVoice:n,getAvailableLanguages:()=>[...new Set(s.map(f=>f.lang))]}};var pe=({children:e,onClick:s})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:s},e),U=u__default.default.memo(pe),L=({label:e,isSpeaking:s,isPaused:t,onSpeak:n,onPause:r,onResume:i,onCancel:c})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div","data-tts":!0},e&&u__default.default.createElement("p",null,e),!s&&u__default.default.createElement(U,{"aria-label":"Speak",onClick:n},u__default.default.createElement(chunk6WTC4JXH_cjs.b.PlaySolid,{size:16})),s&&!t&&u__default.default.createElement(U,{"aria-label":"Pause",onClick:r},u__default.default.createElement(chunk6WTC4JXH_cjs.b.PauseSolid,{size:16})),t&&u__default.default.createElement(U,{"aria-label":"Resume",onClick:i},u__default.default.createElement(chunk6WTC4JXH_cjs.b.ResumeSolid,{size:16})),u__default.default.createElement(U,{"aria-label":"Stop",onClick:c},u__default.default.createElement(chunk6WTC4JXH_cjs.b.StopSolid,{size:16})));L.displayName="TextToSpeechControls";L.TTSButton=U;var H=L;var z=({initialText:e="",showTextInput:s=!1,voice:t,pitch:n=1,rate:r=1,language:i,label:c,onEnd:m})=>{let{speak:d,pause:T,resume:x,cancel:y,isSpeaking:P,isPaused:C,getAvailableLanguages:h,availableVoices:w}=M(),[I,f]=u.useState(e);console.log(h()),u.useEffect(()=>{f(e);},[e]);let o=()=>{I.trim()!==""&&d(I,{voice:t,pitch:n,rate:r},l);},p=$=>{f($.target.value);},l=()=>{m&&m();};return u__default.default.createElement(u__default.default.Fragment,null,s&&u__default.default.createElement(chunkWXBFBWYF_cjs.b,{value:I,onChange:p}),u__default.default.createElement(H,{label:c,isSpeaking:P,isPaused:C,onSpeak:o,onPause:T,onResume:x,onCancel:y}))};z.displayName="TextToSpeechComponent";var S=e=>u__default.default.createElement(u__default.default.Fragment,null,e),ce=({id:e,children:s,headerBackground:t,styles:n,classes:r,...i})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"header",id:e,styles:n,className:r,...i},t,u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},s)),me=({id:e,children:s,styles:t,classes:n,...r})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"main",id:e,styles:t,...r,className:n},s),de=({id:e,classes:s,children:t,styles:n={},...r})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"footer",id:e,className:s,styles:n,...r},u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},t||"Copyright \xA9 2022")),fe=({id:e,children:s,styles:t={},classes:n,...r})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"aside",id:e,styles:t,className:n,...r},u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},s)),ue=({id:e,children:s,styles:t,classes:n,...r})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",id:e,styles:t,className:n,...r},s),ge=({id:e,children:s,styles:t,classes:n,...r})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"article",id:e,styles:t,className:n,...r},s);S.displayName="Landmarks";S.Header=ce;S.Main=me;S.Footer=de;S.Aside=fe;S.Section=ue;S.Article=ge;var A=({id:e,styles:s,classes:t,children:n,variant:r,...i})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"sup",id:e,styles:s,className:t,"data-badge":r||void 0,role:"status",...i},u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"span"},n));A.displayName="Badge";var xe=({elm:e="span",role:s="note",variant:t,children:n,styles:r,...i})=>u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:e,role:s,"data-tag":t||void 0,styles:r,...i},n);xe.displayName="Tag";var ye=u__default.default.forwardRef(({summary:e,icon:s,styles:t,classes:n,ariaLabel:r,name:i,open:c,onPointerDown:m,onToggle:d,children:T,...x},y)=>{let P=u.useCallback(h=>{m?.(h);},[m]),C=u.useCallback(h=>{d?.(h);},[d]);return u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"details",styles:t,classes:n,onToggle:C,ref:y,open:c,"aria-label":r,name:i,...x},u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"summary",onPointerDown:P},s,e),u__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},T))});ye.displayName="Details";
+      <rect width="${a}" height="${p}" fill="url(#grad-${a}-${p})"/>
+      <circle cx="${a*.15}" cy="${p*.2}" r="${Math.min(a,p)*.08}" fill="rgba(255,255,255,0.2)"/>
+      <path d="M0,${p*.75} Q${a*.25},${p*.65} ${a*.5},${p*.75} T${a},${p*.75} L${a},${p} L0,${p} Z" fill="rgba(0,0,0,0.15)"/>
+      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="${Math.max(16,Math.min(a,p)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${a}\xD7${p}</text>
+    </svg>`;return `data:image/svg+xml,${encodeURIComponent(d)}`},[r,o]),C=c??S;return v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"img",src:e,alt:t,width:r,height:o||"auto",loading:i,style:s,srcSet:I,sizes:y,onError:a=>{g&&g(a),a.defaultPrevented||a.currentTarget.src!==C&&(a.currentTarget.src=C);},onLoad:a=>{T?.(a);},decoding:m,...f,...l&&{fetchpriority:l}})};Y.displayName="Img";var j=e=>{let[t,r]=v.useState([]),[o,s]=v.useState(e),[i,c]=v.useState(!1),[l,m]=v.useState(!1),[I,y]=v.useState(null);return v.useEffect(()=>{let u=()=>{let a=window.speechSynthesis.getVoices();r(a);let p=a.find(d=>d.name==="Google US English");if(p)s(p);else {let d=a.find(U=>U.lang.startsWith("en-"));d&&s(d);}};return u(),window.speechSynthesis.onvoiceschanged=u,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(u,a={},p)=>{let d=new SpeechSynthesisUtterance(u);d.lang=a.lang??"en-US",d.pitch=a.pitch??1,d.rate=a.rate??1,d.voice=o??a.voice??null,d.onend=()=>{c(!1),m(!1),p&&p();},"speechSynthesis"in window?(window.speechSynthesis.speak(d),y(d),c(!0),m(!1)):console.error("Speech synthesis not supported");},pause:()=>{i&&!l&&(window.speechSynthesis.pause(),m(!0));},resume:()=>{i&&l&&(window.speechSynthesis.resume(),m(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),c(!1),m(!1));},isSpeaking:i,isPaused:l,availableVoices:t,changeVoice:u=>{s(u);},currentVoice:o,getAvailableLanguages:()=>[...new Set(t.map(u=>u.lang))]}};var Le=({children:e,onClick:t})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),L=v__default.default.memo(Le),_=({label:e,isSpeaking:t,isPaused:r,onSpeak:o,onPause:s,onResume:i,onCancel:c})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div","data-tts":!0},e&&v__default.default.createElement("p",null,e),!t&&v__default.default.createElement(L,{"aria-label":"Speak",onClick:o},v__default.default.createElement(chunk6WTC4JXH_cjs.b.PlaySolid,{size:16})),t&&!r&&v__default.default.createElement(L,{"aria-label":"Pause",onClick:s},v__default.default.createElement(chunk6WTC4JXH_cjs.b.PauseSolid,{size:16})),r&&v__default.default.createElement(L,{"aria-label":"Resume",onClick:i},v__default.default.createElement(chunk6WTC4JXH_cjs.b.ResumeSolid,{size:16})),v__default.default.createElement(L,{"aria-label":"Stop",onClick:c},v__default.default.createElement(chunk6WTC4JXH_cjs.b.StopSolid,{size:16})));_.displayName="TextToSpeechControls";_.TTSButton=L;var q=_;var Q=({initialText:e="",showTextInput:t=!1,voice:r,pitch:o=1,rate:s=1,language:i,label:c,onEnd:l})=>{let{speak:m,pause:I,resume:y,cancel:g,isSpeaking:T,isPaused:f,getAvailableLanguages:S,availableVoices:C}=j(),[x,u]=v.useState(e);console.log(S()),v.useEffect(()=>{u(e);},[e]);let a=()=>{x.trim()!==""&&m(x,{voice:r,pitch:o,rate:s},d);},p=U=>{u(U.target.value);},d=()=>{l&&l();};return v__default.default.createElement(v__default.default.Fragment,null,t&&v__default.default.createElement(chunkWXBFBWYF_cjs.b,{value:x,onChange:p}),v__default.default.createElement(q,{label:c,isSpeaking:T,isPaused:f,onSpeak:a,onPause:I,onResume:y,onCancel:g}))};Q.displayName="TextToSpeechComponent";var A=e=>v__default.default.createElement(v__default.default.Fragment,null,e),Be=({id:e,children:t,headerBackground:r,styles:o,classes:s,...i})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"header",id:e,styles:o,className:s,...i},r,v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},t)),$e=({id:e,children:t,styles:r,classes:o,...s})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"main",id:e,styles:r,...s,className:o},t),Me=({id:e,classes:t,children:r,styles:o={},...s})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"footer",id:e,className:t,styles:o,...s},v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},r||"Copyright \xA9 2022")),Re=({id:e,children:t,styles:r={},classes:o,...s})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"aside",id:e,styles:r,className:o,...s},v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},t)),De=({id:e,children:t,styles:r,classes:o,...s})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",id:e,styles:r,className:o,...s},t),Fe=({id:e,children:t,styles:r,classes:o,...s})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"article",id:e,styles:r,className:o,...s},t);A.displayName="Landmarks";A.Header=Be;A.Main=$e;A.Footer=Me;A.Aside=Re;A.Section=De;A.Article=Fe;var ee=({id:e,styles:t,classes:r,children:o,variant:s,...i})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"sup",id:e,styles:t,className:r,"data-badge":s||void 0,role:"status",...i},v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"span"},o));ee.displayName="Badge";var He=({elm:e="span",role:t="note",variant:r,children:o,styles:s,...i})=>v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:e,role:t,"data-tag":r||void 0,styles:s,...i},o);He.displayName="Tag";var _e=v__default.default.forwardRef(({summary:e,icon:t,styles:r,classes:o,ariaLabel:s,name:i,open:c,onPointerDown:l,onToggle:m,children:I,...y},g)=>{let T=v.useCallback(S=>{l?.(S);},[l]),f=v.useCallback(S=>{m?.(S);},[m]);return v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"details",styles:r,classes:o,onToggle:f,ref:g,open:c,"aria-label":s,name:i,...y},v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"summary",onPointerDown:T},t,e),v__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section"},I))});_e.displayName="Details";
 
 Object.defineProperty(exports, 'Textarea', {
     enumerable: true,
@@ -169,17 +169,22 @@ Object.defineProperty(exports, 'To', {
     enumerable: true,
     get: function () { return chunk5PJYLVFY_cjs.d; }
 });
-exports.Article = ge;
-exports.Aside = fe;
-exports.Badge = A;
-exports.Details = ye;
-exports.Footer = de;
-exports.Header = ce;
-exports.Img = V;
-exports.Landmarks = S;
-exports.Main = me;
-exports.Section = ue;
-exports.Tag = xe;
-exports.TextToSpeech = z;
+Object.defineProperty(exports, 'UI', {
+    enumerable: true,
+    get: function () { return chunkENTCUJ3A_cjs.a; }
+});
+exports.Alert = K;
+exports.Article = Fe;
+exports.Aside = Re;
+exports.Badge = ee;
+exports.Details = _e;
+exports.Footer = Me;
+exports.Header = Be;
+exports.Img = Y;
+exports.Landmarks = A;
+exports.Main = $e;
+exports.Section = De;
+exports.Tag = He;
+exports.TextToSpeech = Q;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map