@fpkit/acss 1.0.0 → 2.1.0

package/libs/index.d.ts

@@ -1,10 +1,11 @@
 export { Button, ButtonProps } from './components/button.js';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
+import React, { ReactNode } from 'react';
+import { I as IconProps } from './icons-287fce3a.js';
+export { a as Icon, b as IconProps } from './icons-287fce3a.js';
 export { default as Field, FieldProps } from './components/form/fields.js';
 export { default as Input } from './components/form/inputs.js';
-export { default as Icon, IconProps } from './components/icons/icon.js';
-import React, { ReactNode } from 'react';
-export { L as Link, a as LinkProps, L as To } from './link-5192f411.js';
+export { default as Link, default as To } from './components/link/link.js';
 export { List } from './components/list/list.js';
 export { Modal, ModalProps } from './components/modal.js';
 export { default as Popover, PopoverProps } from './components/popover/popover.js';
@@ -20,6 +21,161 @@ export { default as Breadcrumb, BreadcrumbProps, CustomRoute, useBreadcrumbSegme
 export { I as InputProps, T as TextareaProps } from './form.types-d25ebfac.js';
 export { L as ListItemProps } from './list.types-d26de310.js';
 
+/**
+ * Valid severity levels for alerts.
+ * Each severity has associated colors, icons, and ARIA attributes.
+ */
+type Severity = "default" | "info" | "success" | "warning" | "error";
+/**
+ * Props for the Alert component.
+ */
+type AlertProps = {
+    /**
+     * Whether the alert is open.
+     */
+    open: boolean;
+    /**
+     * The severity level of the alert.
+     * @default "default"
+     */
+    severity?: Severity;
+    /**
+     * The main message content.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional title for the alert.
+     */
+    title?: string;
+    /**
+     * Whether the alert can be dismissed.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when alert is dismissed.
+     */
+    onDismiss?: () => void;
+    /**
+     * Size of the severity icon in pixels.
+     * Allows customization of icon size for different contexts.
+     * @default 24
+     * @example
+     * ```tsx
+     * <Alert iconSize={32} severity="error">Larger icon</Alert>
+     * <Alert iconSize={16} severity="info">Smaller icon</Alert>
+     * ```
+     */
+    iconSize?: number;
+    /**
+     * Whether to hide the severity icon.
+     * When true, only text content is displayed.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Additional props to pass to the Icon component.
+     * Allows fine-grained control over icon appearance.
+     * @example
+     * ```tsx
+     * <Alert iconProps={{ className: 'custom-icon', 'aria-label': 'Custom' }}>
+     *   Alert with custom icon props
+     * </Alert>
+     * ```
+     */
+    iconProps?: IconProps;
+    /**
+     * Duration in milliseconds before the alert automatically dismisses.
+     * Set to 0 or undefined to disable auto-dismiss.
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Alert autoHideDuration={5000}>Success message</Alert>
+     * ```
+     */
+    autoHideDuration?: number;
+    /**
+     * Whether to pause auto-dismiss when the alert is hovered or focused.
+     * Complies with WCAG 2.2.1 (Timing Adjustable).
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Semantic heading level for the title (2-6).
+     * When undefined, uses <strong> element instead of heading.
+     * Use this to maintain proper heading hierarchy on the page.
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Alert titleLevel={2} title="Section Alert">...</Alert>
+     * <Alert titleLevel={3} title="Subsection Alert">...</Alert>
+     * ```
+     */
+    titleLevel?: 2 | 3 | 4 | 5 | 6;
+    /**
+     * Custom action buttons to display in the alert.
+     * @example
+     * ```tsx
+     * <Alert actions={<><Button>Undo</Button><Button>Dismiss</Button></>}>
+     *   File deleted
+     * </Alert>
+     * ```
+     */
+    actions?: React.ReactNode;
+    /**
+     * Whether to automatically focus the alert when it becomes visible.
+     * Useful for critical alerts that require immediate attention.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Visual variant of the alert.
+     * - outlined: Border with lighter background (default)
+     * - filled: Solid colored background
+     * - soft: No border, subtle background
+     * @default "outlined"
+     */
+    variant?: "outlined" | "filled" | "soft";
+    /**
+     * Content rendering mode for alert children.
+     * Determines how the children content is wrapped in the alert message area.
+     * - "text": Wraps children in a paragraph tag (default, for simple text content)
+     * - "node": Renders children directly without wrapper (for complex layouts, lists, or custom components)
+     * @default "text"
+     * @example Simple text content (uses default "text" mode)
+     * ```tsx
+     * <Alert severity="info">
+     *   This is a simple text message that will be wrapped in a paragraph.
+     * </Alert>
+     * ```
+     * @example Complex content with list
+     * ```tsx
+     * <Alert severity="warning" contentType="node">
+     *   <p>Please review the following items:</p>
+     *   <ul>
+     *     <li>Check your email settings</li>
+     *     <li>Update your password</li>
+     *     <li>Enable two-factor authentication</li>
+     *   </ul>
+     * </Alert>
+     * ```
+     * @example Custom component layout
+     * ```tsx
+     * <Alert severity="success" contentType="node">
+     *   <div className="custom-layout">
+     *     <p>Operation completed successfully!</p>
+     *     <div className="stats">
+     *       <span>Items processed: 150</span>
+     *       <span>Time elapsed: 2.5s</span>
+     *     </div>
+     *   </div>
+     * </Alert>
+     * ```
+     */
+    contentType?: "text" | "node";
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children">;
+declare const Alert: React.FC<AlertProps>;
+
 /**
  * Props for the Img component.
  *
@@ -328,6 +484,241 @@ declare const Img: {
     displayName: string;
 };
 
+/**
+ * Props for the Link component.
+ *
+ * The Link component renders accessible anchor elements with enhanced security,
+ * styling variants, and WCAG 2.1 AA compliance. It supports both traditional
+ * text links and button-styled links for call-to-action scenarios.
+ *
+ * ## Accessibility Considerations
+ *
+ * - External links automatically include `rel="noopener noreferrer"` for security
+ * - Links should have descriptive text or `aria-label` for screen readers
+ * - Focus indicators must meet WCAG 2.4.7 contrast requirements (3:1 minimum)
+ * - Button-styled links maintain semantic `<a>` element for proper navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic link
+ * <Link href="/about">About Us</Link>
+ *
+ * // External link with prefetch
+ * <Link href="https://example.com" target="_blank" prefetch>
+ *   Visit Example
+ * </Link>
+ *
+ * // Button-styled link
+ * <Link href="/signup" btnStyle="primary">
+ *   <b>Sign Up Now</b>
+ * </Link>
+ * ```
+ */
+type LinkProps = {
+    /**
+     * The URL that the hyperlink points to.
+     * Can be relative or absolute, internal or external.
+     *
+     * @example
+     * ```tsx
+     * href="/products"
+     * href="https://example.com"
+     * href="mailto:hello@example.com"
+     * href="tel:+1234567890"
+     * ```
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL.
+     *
+     * - `_self` (default): Current browsing context
+     * - `_blank`: New tab/window (automatically adds security attributes)
+     * - `_parent`: Parent browsing context
+     * - `_top`: Top-level browsing context
+     *
+     * Note: When `target="_blank"`, `rel="noopener noreferrer"` is automatically
+     * added for security unless explicitly overridden.
+     *
+     * @example
+     * ```tsx
+     * target="_blank" // Opens in new tab with security
+     * ```
+     */
+    target?: string;
+    /**
+     * Relationship between current document and linked URL.
+     *
+     * Common values:
+     * - `noopener`: Prevents window.opener access (security)
+     * - `noreferrer`: Prevents referrer header (privacy)
+     * - `nofollow`: Hints search engines not to follow (SEO)
+     * - `prefetch`: Hints to prefetch the resource (performance)
+     *
+     * Note: For `target="_blank"`, this component automatically merges
+     * `noopener noreferrer` with any user-provided values for security.
+     *
+     * @example
+     * ```tsx
+     * rel="nofollow noopener"
+     * rel="author"
+     * ```
+     */
+    rel?: string;
+    /**
+     * Content to display inside the link.
+     *
+     * For accessibility, ensure link text is descriptive and meaningful.
+     * Avoid generic text like "click here" or "read more" without context.
+     *
+     * @example
+     * ```tsx
+     * // ✅ Good: Descriptive link text
+     * <Link href="/products">View all products</Link>
+     *
+     * // ❌ Bad: Generic link text without context
+     * <Link href="/products">Click here</Link>
+     *
+     * // ✅ Good: Icon with accessible label
+     * <Link href="/home" aria-label="Return to homepage">
+     *   <HomeIcon aria-hidden="true" />
+     * </Link>
+     * ```
+     */
+    children: React.ReactNode;
+    /**
+     * Inline CSS styles to apply to the link element.
+     * Can be used to override CSS custom properties.
+     *
+     * @example
+     * ```tsx
+     * styles={{
+     *   '--link-color': '#ff0000',
+     *   '--link-decoration': 'underline',
+     * }}
+     * ```
+     */
+    styles?: React.CSSProperties;
+    /**
+     * Hints to the browser to prefetch the linked resource.
+     *
+     * When `true` and `target="_blank"`, adds `rel="prefetch"` along with
+     * security attributes. This can improve perceived performance but should
+     * be used judiciously as it consumes bandwidth.
+     *
+     * Note: Browser support varies. Modern browsers may ignore this hint.
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * <Link href="/next-page" prefetch>Next Page</Link>
+     * ```
+     */
+    prefetch?: boolean;
+    /**
+     * Applies button-like styling to the link.
+     *
+     * When set, the link renders with button styling including padding,
+     * borders, and hover effects while maintaining semantic anchor behavior.
+     *
+     * Common values:
+     * - `"btn"`: Standard button styling
+     * - `"pill"`: Rounded pill button styling
+     *
+     * Alternative: Wrap children in `<b>` or `<i>` tags for automatic styling:
+     * - `<b>`: Applies button styling
+     * - `<i>`: Applies pill styling
+     *
+     * @example
+     * ```tsx
+     * // Using btnStyle prop
+     * <Link href="/signup" btnStyle="btn">Sign Up</Link>
+     *
+     * // Using child wrapper (automatic detection)
+     * <Link href="/signup"><b>Sign Up</b></Link>
+     * <Link href="/signup"><i>Pill Button</i></Link>
+     * ```
+     */
+    btnStyle?: string;
+    /**
+     * Event handler called when the link is clicked or activated.
+     *
+     * **Recommended for most use cases**, especially analytics and tracking.
+     * This event fires for:
+     * - Mouse clicks
+     * - Touch/tap interactions
+     * - Keyboard activation (Enter key)
+     * - Assistive technology activation
+     *
+     * Use `onClick` when you need to track ALL user activations, including
+     * keyboard users. This ensures full accessibility coverage.
+     *
+     * @param event - The mouse event
+     * @example
+     * ```tsx
+     * // ✅ RECOMMENDED: onClick tracks all activation methods
+     * <Link
+     *   href="/products"
+     *   onClick={(e) => {
+     *     trackEvent('link_click', { href: '/products' });
+     *   }}
+     * >
+     *   Products
+     * </Link>
+     * ```
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Event handler called when a pointer device button is pressed on the link.
+     *
+     * Use this for specific pointer interactions like:
+     * - Drag-and-drop detection
+     * - Touch gesture recognition
+     * - Distinguishing input types (mouse vs touch vs pen)
+     * - Providing early visual feedback before click completes
+     *
+     * **⚠️ Accessibility Note**: Unlike `onClick`, this does NOT fire for
+     * keyboard activation (Enter key). If you need to track all user interactions
+     * including keyboard users, use `onClick` instead.
+     *
+     * @param event - The pointer event
+     * @example
+     * ```tsx
+     * // Use onPointerDown for pointer-specific interactions
+     * <Link
+     *   href="/products"
+     *   onPointerDown={(e) => {
+     *     // Distinguish between mouse (2), touch (5), and pen (3)
+     *     console.log('Pointer type:', e.pointerType);
+     *   }}
+     * >
+     *   Products
+     * </Link>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // ✅ Use both handlers together for comprehensive tracking
+     * <Link
+     *   href="/products"
+     *   onClick={(e) => trackAllActivations(e)}
+     *   onPointerDown={(e) => provideFeedback(e)}
+     * >
+     *   Products
+     * </Link>
+     * ```
+     */
+    onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;
+    /**
+     * Icon element to display in the link (used by IconLink).
+     *
+     * @example
+     * ```tsx
+     * <IconLink href="/home" icon={<HomeIcon />} />
+     * ```
+     */
+    icon?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<"a">, 'style'>;
+
 /**
  * Props for the TextToSpeechComponent.
  * @interface TextToSpeechComponentProps
@@ -955,4 +1346,4 @@ type FPComponent = {
  */
 declare const FP: FPComponent;
 
-export { Article, Aside, Badge, BadgeProps, FP as Box, Caption, ComponentProps$1 as ComponentProps, Details, FP, Footer, Header, Img, ImgProps, Landmarks, Main, Section, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr };
+export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, FP as Box, Caption, ComponentProps$1 as ComponentProps, Details, FP, Footer, Header, Img, ImgProps, Landmarks, LinkProps, Main, Section, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };

package/libs/index.js

@@ -1,42 +1,44 @@
-import { b } from './chunk-IRLFZ3OL.js';
+import { b as b$2 } from './chunk-IRLFZ3OL.js';
 export { a as Textarea } from './chunk-IRLFZ3OL.js';
 export { a as Field } from './chunk-HRRHPLER.js';
 export { a as Caption, i as TBL, f as Table, c as Tbody, e as Td, b as Thead, d as Tr } from './chunk-Y2PFDELK.js';
-export { a as Dialog } from './chunk-X3JCTEPD.js';
+export { a as Dialog } from './chunk-QKHPHMG2.js';
 export { c as Nav, b as NavItem, a as NavList } from './chunk-FVROL3V5.js';
 export { b as List } from './chunk-IEB64SWY.js';
 export { b as Popover } from './chunk-23ANBDCR.js';
 export { a as Text } from './chunk-IQ76HGVP.js';
 export { b as Heading, a as Title } from './chunk-ZFJ4U45S.js';
-export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-X5LGFCWG.js';
+export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-UJAQVHWC.js';
 import './chunk-GCGKYLDG.js';
 import { b as b$1 } from './chunk-5QD3DWFI.js';
 export { a as Icon } from './chunk-5QD3DWFI.js';
 export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-KK47SYZI.js';
-export { a as Modal } from './chunk-7XPFW7CB.js';
-export { a as Button } from './chunk-OVWLQYMK.js';
+export { a as Modal } from './chunk-43TK2ICH.js';
+import { b } from './chunk-KVKQLRJG.js';
+export { a as Button } from './chunk-KVKQLRJG.js';
 export { a as Input } from './chunk-F5EYMVQM.js';
 export { a as Box, a as FP } from './chunk-6SAHIYCZ.js';
 import './chunk-BFK62VX5.js';
 import './chunk-75QHTLFO.js';
-export { a as Link, b as To } from './chunk-UEPAWMDF.js';
+export { a as Link, d as To } from './chunk-NNTBIHSD.js';
 import { a } from './chunk-HHLNOC5T.js';
-import u, { useCallback, useMemo, useState, useEffect } from 'react';
+export { a as UI } from './chunk-HHLNOC5T.js';
+import v, { useCallback, useMemo, useState, useEffect } from 'react';
 
-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=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.createElement("span",{className:"sr-only"},t):null};var Pe=(e,t)=>({info:v.createElement(b$1.InfoSolid,{...t}),success:v.createElement(b$1.SuccessSolid,{...t}),warning:v.createElement(b$1.WarnSolid,{...t}),error:v.createElement(b$1.AlertSolid,{...t}),default:v.createElement(b$1.AlertSquareSolid,{...t})})[e],R=({severity:e,iconProps:t,hideIcon:r})=>{if(r)return null;let o=Pe(e,t);return v.createElement(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.createElement(a,{as:r,className:"alert-title"},e)};var z=({children:e,contentType:t})=>t==="node"?v.createElement(v.Fragment,null,e):v.createElement(a,{as:"p"},e);var H=({actions:e})=>e?v.createElement(a,{as:"div",className:"alert-actions"},e):null;var X=v.memo(({onDismiss:e,iconSize:t=16})=>v.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},v.createElement(b$1,null,v.createElement(b$1.Close,{size:t})))),J=X;X.displayName="DismissButton";var Ee={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},k=v.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.createElement(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.createElement(M,{severity:e}),v.createElement(R,{severity:e,iconProps:S,hideIcon:f}),v.createElement(a,{as:"div",className:"alert-message"},v.createElement(D,{title:m,titleLevel:I}),v.createElement(z,{contentType:g},y),v.createElement(H,{actions:T})),o&&v.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.useState(e),[I,y]=v.useState(e),[g,T]=v.useState(!1),f=v.useCallback(()=>{m(!1),setTimeout(()=>{y(!1),t?.();},300);},[t]);v.useEffect(()=>{e?(y(!0),m(!0)):m(!1);},[e]),v.useEffect(()=>{if(!o||!l||g)return;let x=setTimeout(()=>{f();},o);return ()=>clearTimeout(x)},[o,l,g,f]),v.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.useEffect(()=>{i&&l&&c.current&&c.current.focus();},[i,l,c]);let S=v.useCallback(()=>{s&&o&&T(!0);},[s,o]),C=v.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.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.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=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.createElement(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]=useState([]),[n,r]=useState(e),[i,c]=useState(!1),[m,d]=useState(!1),[T,x]=useState(null);return 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.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:s},e),U=u.memo(pe),L=({label:e,isSpeaking:s,isPaused:t,onSpeak:n,onPause:r,onResume:i,onCancel:c})=>u.createElement(a,{as:"div","data-tts":!0},e&&u.createElement("p",null,e),!s&&u.createElement(U,{"aria-label":"Speak",onClick:n},u.createElement(b$1.PlaySolid,{size:16})),s&&!t&&u.createElement(U,{"aria-label":"Pause",onClick:r},u.createElement(b$1.PauseSolid,{size:16})),t&&u.createElement(U,{"aria-label":"Resume",onClick:i},u.createElement(b$1.ResumeSolid,{size:16})),u.createElement(U,{"aria-label":"Stop",onClick:c},u.createElement(b$1.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]=useState(e);console.log(h()),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.createElement(u.Fragment,null,s&&u.createElement(b,{value:I,onChange:p}),u.createElement(H,{label:c,isSpeaking:P,isPaused:C,onSpeak:o,onPause:T,onResume:x,onCancel:y}))};z.displayName="TextToSpeechComponent";var S=e=>u.createElement(u.Fragment,null,e),ce=({id:e,children:s,headerBackground:t,styles:n,classes:r,...i})=>u.createElement(a,{as:"header",id:e,styles:n,className:r,...i},t,u.createElement(a,{as:"section"},s)),me=({id:e,children:s,styles:t,classes:n,...r})=>u.createElement(a,{as:"main",id:e,styles:t,...r,className:n},s),de=({id:e,classes:s,children:t,styles:n={},...r})=>u.createElement(a,{as:"footer",id:e,className:s,styles:n,...r},u.createElement(a,{as:"section"},t||"Copyright \xA9 2022")),fe=({id:e,children:s,styles:t={},classes:n,...r})=>u.createElement(a,{as:"aside",id:e,styles:t,className:n,...r},u.createElement(a,{as:"section"},s)),ue=({id:e,children:s,styles:t,classes:n,...r})=>u.createElement(a,{as:"section",id:e,styles:t,className:n,...r},s),ge=({id:e,children:s,styles:t,classes:n,...r})=>u.createElement(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.createElement(a,{as:"sup",id:e,styles:s,className:t,"data-badge":r||void 0,role:"status",...i},u.createElement(a,{as:"span"},n));A.displayName="Badge";var xe=({elm:e="span",role:s="note",variant:t,children:n,styles:r,...i})=>u.createElement(a,{as:e,role:s,"data-tag":t||void 0,styles:r,...i},n);xe.displayName="Tag";var ye=u.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=useCallback(h=>{m?.(h);},[m]),C=useCallback(h=>{d?.(h);},[d]);return u.createElement(a,{as:"details",styles:t,classes:n,onToggle:C,ref:y,open:c,"aria-label":r,name:i,...x},u.createElement(a,{as:"summary",onPointerDown:P},s,e),u.createElement(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.createElement(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]=useState([]),[o,s]=useState(e),[i,c]=useState(!1),[l,m]=useState(!1),[I,y]=useState(null);return 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.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),L=v.memo(Le),_=({label:e,isSpeaking:t,isPaused:r,onSpeak:o,onPause:s,onResume:i,onCancel:c})=>v.createElement(a,{as:"div","data-tts":!0},e&&v.createElement("p",null,e),!t&&v.createElement(L,{"aria-label":"Speak",onClick:o},v.createElement(b$1.PlaySolid,{size:16})),t&&!r&&v.createElement(L,{"aria-label":"Pause",onClick:s},v.createElement(b$1.PauseSolid,{size:16})),r&&v.createElement(L,{"aria-label":"Resume",onClick:i},v.createElement(b$1.ResumeSolid,{size:16})),v.createElement(L,{"aria-label":"Stop",onClick:c},v.createElement(b$1.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]=useState(e);console.log(S()),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.createElement(v.Fragment,null,t&&v.createElement(b$2,{value:x,onChange:p}),v.createElement(q,{label:c,isSpeaking:T,isPaused:f,onSpeak:a,onPause:I,onResume:y,onCancel:g}))};Q.displayName="TextToSpeechComponent";var A=e=>v.createElement(v.Fragment,null,e),Be=({id:e,children:t,headerBackground:r,styles:o,classes:s,...i})=>v.createElement(a,{as:"header",id:e,styles:o,className:s,...i},r,v.createElement(a,{as:"section"},t)),$e=({id:e,children:t,styles:r,classes:o,...s})=>v.createElement(a,{as:"main",id:e,styles:r,...s,className:o},t),Me=({id:e,classes:t,children:r,styles:o={},...s})=>v.createElement(a,{as:"footer",id:e,className:t,styles:o,...s},v.createElement(a,{as:"section"},r||"Copyright \xA9 2022")),Re=({id:e,children:t,styles:r={},classes:o,...s})=>v.createElement(a,{as:"aside",id:e,styles:r,className:o,...s},v.createElement(a,{as:"section"},t)),De=({id:e,children:t,styles:r,classes:o,...s})=>v.createElement(a,{as:"section",id:e,styles:r,className:o,...s},t),Fe=({id:e,children:t,styles:r,classes:o,...s})=>v.createElement(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.createElement(a,{as:"sup",id:e,styles:t,className:r,"data-badge":s||void 0,role:"status",...i},v.createElement(a,{as:"span"},o));ee.displayName="Badge";var He=({elm:e="span",role:t="note",variant:r,children:o,styles:s,...i})=>v.createElement(a,{as:e,role:t,"data-tag":r||void 0,styles:s,...i},o);He.displayName="Tag";var _e=v.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=useCallback(S=>{l?.(S);},[l]),f=useCallback(S=>{m?.(S);},[m]);return v.createElement(a,{as:"details",styles:r,classes:o,onToggle:f,ref:g,open:c,"aria-label":s,name:i,...y},v.createElement(a,{as:"summary",onPointerDown:T},t,e),v.createElement(a,{as:"section"},I))});_e.displayName="Details";
 
-export { ge as Article, fe as Aside, A as Badge, ye as Details, de as Footer, ce as Header, V as Img, S as Landmarks, me as Main, ue as Section, xe as Tag, z as TextToSpeech };
+export { K as Alert, Fe as Article, Re as Aside, ee as Badge, _e as Details, Me as Footer, Be as Header, Y as Img, A as Landmarks, $e as Main, De as Section, He as Tag, Q as TextToSpeech };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map