@fpkit/acss 0.5.13 → 0.6.0

package/libs/hooks.d.cts

@@ -1,7 +1,7 @@
 export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.cjs';
 import 'react';
-import './ui-645f95b5.js';
-import './components/link/link.cjs';
+import './ui-d01b50d4.js';
+import './link-5192f411.js';
 
 type Position = {
     /**
@@ -34,4 +34,138 @@ declare const usePopover: (elementRef: React.RefObject<HTMLElement | HTMLDivElem
     handlePointerLeave: () => void;
 };
 
-export { usePopover };
+/**
+ * Event handler mapping type for disabled state management.
+ * Maps event names to their handler functions for any HTML element.
+ *
+ * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)
+ */
+type DisabledEventHandlers<T extends HTMLElement> = {
+    onClick?: (event: React.MouseEvent<T>) => void;
+    onChange?: (event: React.ChangeEvent<T>) => void;
+    onBlur?: (event: React.FocusEvent<T>) => void;
+    onFocus?: (event: React.FocusEvent<T>) => void;
+    onPointerDown?: (event: React.PointerEvent<T>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<T>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<T>) => void;
+    onMouseDown?: (event: React.MouseEvent<T>) => void;
+    onMouseUp?: (event: React.MouseEvent<T>) => void;
+    onTouchStart?: (event: React.TouchEvent<T>) => void;
+    onTouchEnd?: (event: React.TouchEvent<T>) => void;
+};
+/**
+ * Props returned by the useDisabledState hook containing ARIA attributes and styling.
+ */
+interface DisabledProps {
+    /** ARIA attribute indicating disabled state */
+    'aria-disabled': boolean;
+    /** CSS class name for disabled state styling */
+    className: string;
+    /** Optional tabIndex to remove element from tab order when disabled */
+    tabIndex?: -1;
+}
+/**
+ * Configuration options for useDisabledState hook.
+ *
+ * @template T - The HTML element type
+ */
+interface UseDisabledStateOptions<T extends HTMLElement> {
+    /** Event handlers to wrap with disabled logic */
+    handlers?: Partial<DisabledEventHandlers<T>>;
+    /** Existing className to merge with disabled class */
+    className?: string;
+    /** Custom disabled className (default: 'is-disabled') */
+    disabledClassName?: string;
+    /** Whether to call preventDefault on disabled events (default: true) */
+    preventDefault?: boolean;
+    /** Whether to call stopPropagation on disabled events (default: true) */
+    stopPropagation?: boolean;
+    /** Make element non-focusable when disabled via tabIndex=-1 (default: false for a11y) */
+    removeFromTabOrder?: boolean;
+}
+/**
+ * Return type for the useDisabledState hook.
+ *
+ * @template T - The HTML element type
+ */
+interface UseDisabledStateReturn<T extends HTMLElement> {
+    /** Props to spread on the element for disabled state */
+    disabledProps: DisabledProps;
+    /** Wrapped event handlers that respect disabled state */
+    handlers: Partial<DisabledEventHandlers<T>>;
+}
+/**
+ * Manages accessible disabled state for form elements using aria-disabled pattern.
+ *
+ * This hook implements WCAG 2.1 Level AA compliant disabled state management by:
+ * - Using `aria-disabled` instead of native `disabled` attribute (keeps elements focusable)
+ * - Preventing all interaction events when disabled
+ * - Applying accessible styling via `.is-disabled` class
+ * - Maintaining keyboard focusability for screen reader discovery
+ *
+ * **Why aria-disabled instead of disabled attribute?**
+ * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)
+ * - Screen readers can discover and announce disabled state
+ * - Enables tooltips and contextual help on disabled elements
+ * - Better visual styling control for WCAG contrast compliance
+ *
+ * **Performance Optimizations:**
+ * - Single memoization pass for all handlers and props
+ * - Stable handler references using refs (only recreate on disabled state change)
+ * - Automatic className merging to reduce consumer boilerplate
+ *
+ * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)
+ *
+ * @param {boolean | undefined} disabled - Whether the element should be disabled. Undefined treated as false.
+ * @param {Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T>} handlersOrOptions -
+ *   Event handlers to wrap OR configuration options object (for backward compatibility)
+ *
+ * @returns {UseDisabledStateReturn<T>} Object containing disabledProps and wrapped handlers
+ *
+ * @example
+ * // Basic button usage (legacy API - still supported)
+ * const MyButton = ({ disabled, onClick, children }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, { onClick });
+ *   return <button {...disabledProps} {...handlers}>{children}</button>;
+ * };
+ *
+ * @example
+ * // Enhanced API with className merging
+ * const MyButton = ({ disabled, onClick, className, children }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, {
+ *     handlers: { onClick },
+ *     className,
+ *   });
+ *   return <button {...disabledProps} {...handlers}>{children}</button>;
+ * };
+ *
+ * @example
+ * // Custom configuration
+ * const MyInput = ({ disabled, onChange, className }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, {
+ *     handlers: { onChange },
+ *     className,
+ *     disabledClassName: 'custom-disabled',
+ *     preventDefault: true,
+ *     stopPropagation: false,
+ *   });
+ *   return <input {...disabledProps} {...handlers} />;
+ * };
+ *
+ * @example
+ * // Remove from tab order when disabled
+ * const MyButton = ({ disabled, onClick }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, {
+ *     handlers: { onClick },
+ *     removeFromTabOrder: true, // Adds tabIndex=-1 when disabled
+ *   });
+ *   return <button {...disabledProps} {...handlers}>Click me</button>;
+ * };
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum WCAG 1.4.3 - Contrast (Minimum)}
+ */
+declare function useDisabledState<T extends HTMLElement = HTMLElement>(disabled: boolean | undefined, handlersOrOptions?: Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T>): UseDisabledStateReturn<T>;
+
+export { DisabledEventHandlers, DisabledProps, UseDisabledStateReturn, useDisabledState, usePopover };

package/libs/hooks.d.ts

@@ -1,7 +1,7 @@
 export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
 import 'react';
-import './ui-645f95b5.js';
-import './components/link/link.js';
+import './ui-d01b50d4.js';
+import './link-5192f411.js';
 
 type Position = {
     /**
@@ -34,4 +34,138 @@ declare const usePopover: (elementRef: React.RefObject<HTMLElement | HTMLDivElem
     handlePointerLeave: () => void;
 };
 
-export { usePopover };
+/**
+ * Event handler mapping type for disabled state management.
+ * Maps event names to their handler functions for any HTML element.
+ *
+ * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)
+ */
+type DisabledEventHandlers<T extends HTMLElement> = {
+    onClick?: (event: React.MouseEvent<T>) => void;
+    onChange?: (event: React.ChangeEvent<T>) => void;
+    onBlur?: (event: React.FocusEvent<T>) => void;
+    onFocus?: (event: React.FocusEvent<T>) => void;
+    onPointerDown?: (event: React.PointerEvent<T>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<T>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<T>) => void;
+    onMouseDown?: (event: React.MouseEvent<T>) => void;
+    onMouseUp?: (event: React.MouseEvent<T>) => void;
+    onTouchStart?: (event: React.TouchEvent<T>) => void;
+    onTouchEnd?: (event: React.TouchEvent<T>) => void;
+};
+/**
+ * Props returned by the useDisabledState hook containing ARIA attributes and styling.
+ */
+interface DisabledProps {
+    /** ARIA attribute indicating disabled state */
+    'aria-disabled': boolean;
+    /** CSS class name for disabled state styling */
+    className: string;
+    /** Optional tabIndex to remove element from tab order when disabled */
+    tabIndex?: -1;
+}
+/**
+ * Configuration options for useDisabledState hook.
+ *
+ * @template T - The HTML element type
+ */
+interface UseDisabledStateOptions<T extends HTMLElement> {
+    /** Event handlers to wrap with disabled logic */
+    handlers?: Partial<DisabledEventHandlers<T>>;
+    /** Existing className to merge with disabled class */
+    className?: string;
+    /** Custom disabled className (default: 'is-disabled') */
+    disabledClassName?: string;
+    /** Whether to call preventDefault on disabled events (default: true) */
+    preventDefault?: boolean;
+    /** Whether to call stopPropagation on disabled events (default: true) */
+    stopPropagation?: boolean;
+    /** Make element non-focusable when disabled via tabIndex=-1 (default: false for a11y) */
+    removeFromTabOrder?: boolean;
+}
+/**
+ * Return type for the useDisabledState hook.
+ *
+ * @template T - The HTML element type
+ */
+interface UseDisabledStateReturn<T extends HTMLElement> {
+    /** Props to spread on the element for disabled state */
+    disabledProps: DisabledProps;
+    /** Wrapped event handlers that respect disabled state */
+    handlers: Partial<DisabledEventHandlers<T>>;
+}
+/**
+ * Manages accessible disabled state for form elements using aria-disabled pattern.
+ *
+ * This hook implements WCAG 2.1 Level AA compliant disabled state management by:
+ * - Using `aria-disabled` instead of native `disabled` attribute (keeps elements focusable)
+ * - Preventing all interaction events when disabled
+ * - Applying accessible styling via `.is-disabled` class
+ * - Maintaining keyboard focusability for screen reader discovery
+ *
+ * **Why aria-disabled instead of disabled attribute?**
+ * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)
+ * - Screen readers can discover and announce disabled state
+ * - Enables tooltips and contextual help on disabled elements
+ * - Better visual styling control for WCAG contrast compliance
+ *
+ * **Performance Optimizations:**
+ * - Single memoization pass for all handlers and props
+ * - Stable handler references using refs (only recreate on disabled state change)
+ * - Automatic className merging to reduce consumer boilerplate
+ *
+ * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)
+ *
+ * @param {boolean | undefined} disabled - Whether the element should be disabled. Undefined treated as false.
+ * @param {Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T>} handlersOrOptions -
+ *   Event handlers to wrap OR configuration options object (for backward compatibility)
+ *
+ * @returns {UseDisabledStateReturn<T>} Object containing disabledProps and wrapped handlers
+ *
+ * @example
+ * // Basic button usage (legacy API - still supported)
+ * const MyButton = ({ disabled, onClick, children }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, { onClick });
+ *   return <button {...disabledProps} {...handlers}>{children}</button>;
+ * };
+ *
+ * @example
+ * // Enhanced API with className merging
+ * const MyButton = ({ disabled, onClick, className, children }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, {
+ *     handlers: { onClick },
+ *     className,
+ *   });
+ *   return <button {...disabledProps} {...handlers}>{children}</button>;
+ * };
+ *
+ * @example
+ * // Custom configuration
+ * const MyInput = ({ disabled, onChange, className }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, {
+ *     handlers: { onChange },
+ *     className,
+ *     disabledClassName: 'custom-disabled',
+ *     preventDefault: true,
+ *     stopPropagation: false,
+ *   });
+ *   return <input {...disabledProps} {...handlers} />;
+ * };
+ *
+ * @example
+ * // Remove from tab order when disabled
+ * const MyButton = ({ disabled, onClick }) => {
+ *   const { disabledProps, handlers } = useDisabledState(disabled, {
+ *     handlers: { onClick },
+ *     removeFromTabOrder: true, // Adds tabIndex=-1 when disabled
+ *   });
+ *   return <button {...disabledProps} {...handlers}>Click me</button>;
+ * };
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum WCAG 1.4.3 - Contrast (Minimum)}
+ */
+declare function useDisabledState<T extends HTMLElement = HTMLElement>(disabled: boolean | undefined, handlersOrOptions?: Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T>): UseDisabledStateReturn<T>;
+
+export { DisabledEventHandlers, DisabledProps, UseDisabledStateReturn, useDisabledState, usePopover };

package/libs/hooks.js

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

package/libs/icons.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk3MKLDCKQ_cjs = require('./chunk-3MKLDCKQ.cjs');
-require('./chunk-L75OQKEI.cjs');
+var chunk6WTC4JXH_cjs = require('./chunk-6WTC4JXH.cjs');
+require('./chunk-ENTCUJ3A.cjs');
 
 
 
 Object.defineProperty(exports, 'Icon', {
 	enumerable: true,
-	get: function () { return chunk3MKLDCKQ_cjs.a; }
+	get: function () { return chunk6WTC4JXH_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=icons.cjs.map

package/libs/icons.d.cts

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

package/libs/icons.d.ts

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

package/libs/icons.js

@@ -1,4 +1,4 @@
-export { a as Icon } from './chunk-772NRB75.js';
-import './chunk-KUKIVRC2.js';
+export { a as Icon } from './chunk-5QD3DWFI.js';
+import './chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=icons.js.map

package/libs/index.cjs

@@ -1,31 +1,33 @@
 'use strict';
 
-var chunkM5RRNTVX_cjs = require('./chunk-M5RRNTVX.cjs');
-var chunkAHDJGCG5_cjs = require('./chunk-AHDJGCG5.cjs');
-var chunkLT5KZ2QW_cjs = require('./chunk-LT5KZ2QW.cjs');
-var chunkD4YLRWAO_cjs = require('./chunk-D4YLRWAO.cjs');
-var chunk2LTJ7HHX_cjs = require('./chunk-2LTJ7HHX.cjs');
-var chunkXTQKWY7W_cjs = require('./chunk-XTQKWY7W.cjs');
+var chunkWXBFBWYF_cjs = require('./chunk-WXBFBWYF.cjs');
+var chunkO3JIHC5M_cjs = require('./chunk-O3JIHC5M.cjs');
+var chunkUS2I5GI7_cjs = require('./chunk-US2I5GI7.cjs');
+var chunkQVW6W76L_cjs = require('./chunk-QVW6W76L.cjs');
+var chunkO5XAJ7BY_cjs = require('./chunk-O5XAJ7BY.cjs');
+var chunkGUJSMQ3V_cjs = require('./chunk-GUJSMQ3V.cjs');
 var chunkG55UJ53G_cjs = require('./chunk-G55UJ53G.cjs');
-var chunkB7F5FS6D_cjs = require('./chunk-B7F5FS6D.cjs');
-var chunkPQ2K3BM6_cjs = require('./chunk-PQ2K3BM6.cjs');
-var chunkOK5QEIMD_cjs = require('./chunk-OK5QEIMD.cjs');
+var chunkW2UIN7EV_cjs = require('./chunk-W2UIN7EV.cjs');
+var chunk2NRIP6RB_cjs = require('./chunk-2NRIP6RB.cjs');
+var chunkT4T6GWYQ_cjs = require('./chunk-T4T6GWYQ.cjs');
 require('./chunk-PDD4N5P5.cjs');
-var chunk3MKLDCKQ_cjs = require('./chunk-3MKLDCKQ.cjs');
-var chunkP2DC76ZZ_cjs = require('./chunk-P2DC76ZZ.cjs');
-var chunkROZI23GS_cjs = require('./chunk-ROZI23GS.cjs');
-var chunkJ32EZPYD_cjs = require('./chunk-J32EZPYD.cjs');
-var chunkIYUN2EW3_cjs = require('./chunk-IYUN2EW3.cjs');
-var chunkS7BABR7Z_cjs = require('./chunk-S7BABR7Z.cjs');
-var chunk5S4ORA4C_cjs = require('./chunk-5S4ORA4C.cjs');
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var chunk6WTC4JXH_cjs = require('./chunk-6WTC4JXH.cjs');
+var chunkW5TKWBFC_cjs = require('./chunk-W5TKWBFC.cjs');
+var chunkDKTHCQ5P_cjs = require('./chunk-DKTHCQ5P.cjs');
+var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunk4BZKFPEC_cjs = require('./chunk-4BZKFPEC.cjs');
+var chunkE2AJURUW_cjs = require('./chunk-E2AJURUW.cjs');
+require('./chunk-PNWIRCG3.cjs');
+require('./chunk-TON2YGMD.cjs');
+var chunk33PNJ4LO_cjs = require('./chunk-33PNJ4LO.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var u = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var u__default = /*#__PURE__*/_interopDefault(u);
 
-var M=({src:e="//",alt:t,width:s=480,height:n,styles:r,loading:l="lazy",placeholder:m,fetchpriority:c="low",decoding:d="auto",srcSet:T,sizes:x,onError:y,onLoad:P,...C})=>{let h=u.useMemo(()=>{let o=typeof s=="number"?s:480,p=typeof n=="number"?n:Math.round(o*.75),i=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${o} ${p}">
+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}">
       <defs>
         <linearGradient id="grad-${o}-${p}" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
@@ -37,63 +39,63 @@ var M=({src:e="//",alt:t,width:s=480,height:n,styles:r,loading:l="lazy",placehol
       <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(i)}`},[s,n]),w=m??h;return u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"img",src:e,alt:t,width:s,height:n||"auto",loading:l,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,...c&&{fetchpriority:c}})};M.displayName="Img";var V=e=>{let[t,s]=u.useState([]),[n,r]=u.useState(e),[l,m]=u.useState(!1),[c,d]=u.useState(!1),[T,x]=u.useState(null);return u.useEffect(()=>{let f=()=>{let o=window.speechSynthesis.getVoices();s(o);let p=o.find(i=>i.name==="Google US English");if(p)r(p);else {let i=o.find($=>$.lang.startsWith("en-"));i&&r(i);}};return f(),window.speechSynthesis.onvoiceschanged=f,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(f,o={},p)=>{let i=new SpeechSynthesisUtterance(f);i.lang=o.lang??"en-US",i.pitch=o.pitch??1,i.rate=o.rate??1,i.voice=n??o.voice??null,i.onend=()=>{m(!1),d(!1),p&&p();},"speechSynthesis"in window?(window.speechSynthesis.speak(i),x(i),m(!0),d(!1)):console.error("Speech synthesis not supported");},pause:()=>{l&&!c&&(window.speechSynthesis.pause(),d(!0));},resume:()=>{l&&c&&(window.speechSynthesis.resume(),d(!1));},cancel:()=>{l&&(window.speechSynthesis.cancel(),m(!1),d(!1));},isSpeaking:l,isPaused:c,availableVoices:t,changeVoice:f=>{r(f);},currentVoice:n,getAvailableLanguages:()=>[...new Set(t.map(f=>f.lang))]}};var pe=({children:e,onClick:t})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),U=u__default.default.memo(pe),L=({label:e,isSpeaking:t,isPaused:s,onSpeak:n,onPause:r,onResume:l,onCancel:m})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"div","data-tts":!0},e&&u__default.default.createElement("p",null,e),!t&&u__default.default.createElement(U,{"aria-label":"Speak",onClick:n},u__default.default.createElement(chunk3MKLDCKQ_cjs.b.PlaySolid,{size:16})),t&&!s&&u__default.default.createElement(U,{"aria-label":"Pause",onClick:r},u__default.default.createElement(chunk3MKLDCKQ_cjs.b.PauseSolid,{size:16})),s&&u__default.default.createElement(U,{"aria-label":"Resume",onClick:l},u__default.default.createElement(chunk3MKLDCKQ_cjs.b.ResumeSolid,{size:16})),u__default.default.createElement(U,{"aria-label":"Stop",onClick:m},u__default.default.createElement(chunk3MKLDCKQ_cjs.b.StopSolid,{size:16})));L.displayName="TextToSpeechControls";L.TTSButton=U;var H=L;var z=({initialText:e="",showTextInput:t=!1,voice:s,pitch:n=1,rate:r=1,language:l,label:m,onEnd:c})=>{let{speak:d,pause:T,resume:x,cancel:y,isSpeaking:P,isPaused:C,getAvailableLanguages:h,availableVoices:w}=V(),[I,f]=u.useState(e);console.log(h()),u.useEffect(()=>{f(e);},[e]);let o=()=>{I.trim()!==""&&d(I,{voice:s,pitch:n,rate:r},i);},p=$=>{f($.target.value);},i=()=>{c&&c();};return u__default.default.createElement(u__default.default.Fragment,null,t&&u__default.default.createElement(chunkM5RRNTVX_cjs.b,{value:I,onChange:p}),u__default.default.createElement(H,{label:m,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:t,headerBackground:s,styles:n,classes:r,...l})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"header",id:e,styles:n,className:r,...l},s,u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"section"},t)),me=({id:e,children:t,styles:s,classes:n,...r})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"main",id:e,styles:s,...r,className:n},t),de=({id:e,classes:t,children:s,styles:n={},...r})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"footer",id:e,className:t,styles:n,...r},u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"section"},s||"Copyright \xA9 2022")),fe=({id:e,children:t,styles:s={},classes:n,...r})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"aside",id:e,styles:s,className:n,...r},u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"section"},t)),ue=({id:e,children:t,styles:s,classes:n,...r})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"section",id:e,styles:s,className:n,...r},t),ge=({id:e,children:t,styles:s,classes:n,...r})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"article",id:e,styles:s,className:n,...r},t);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:t,classes:s,children:n,variant:r,...l})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"sup",id:e,styles:t,className:s,"data-badge":r||void 0,role:"status",...l},u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"span"},n));A.displayName="Badge";var xe=({elm:e="span",role:t="note",children:s,styles:n,...r})=>u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:e,role:t,styles:n,...r},s);xe.displayName="Tag";var ye=u__default.default.forwardRef(({summary:e,icon:t,styles:s,classes:n,ariaLabel:r,name:l,open:m,onPointerDown:c,onToggle:d,children:T,...x},y)=>{let P=u.useCallback(h=>{c?.(h);},[c]),C=u.useCallback(h=>{d?.(h);},[d]);return u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"details",styles:s,classes:n,onToggle:C,ref:y,open:m,"aria-label":r,name:l,...x},u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"summary",onPointerDown:P},t,e),u__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"section"},T))});ye.displayName="Details";
+    </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";
 
 Object.defineProperty(exports, 'Textarea', {
     enumerable: true,
-    get: function () { return chunkM5RRNTVX_cjs.a; }
+    get: function () { return chunkWXBFBWYF_cjs.a; }
 });
 Object.defineProperty(exports, 'Field', {
     enumerable: true,
-    get: function () { return chunkAHDJGCG5_cjs.a; }
+    get: function () { return chunkO3JIHC5M_cjs.a; }
 });
 Object.defineProperty(exports, 'Caption', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.a; }
+    get: function () { return chunkUS2I5GI7_cjs.a; }
 });
 Object.defineProperty(exports, 'TBL', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.i; }
+    get: function () { return chunkUS2I5GI7_cjs.i; }
 });
 Object.defineProperty(exports, 'Table', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.f; }
+    get: function () { return chunkUS2I5GI7_cjs.f; }
 });
 Object.defineProperty(exports, 'Tbody', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.c; }
+    get: function () { return chunkUS2I5GI7_cjs.c; }
 });
 Object.defineProperty(exports, 'Td', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.e; }
+    get: function () { return chunkUS2I5GI7_cjs.e; }
 });
 Object.defineProperty(exports, 'Thead', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.b; }
+    get: function () { return chunkUS2I5GI7_cjs.b; }
 });
 Object.defineProperty(exports, 'Tr', {
     enumerable: true,
-    get: function () { return chunkLT5KZ2QW_cjs.d; }
+    get: function () { return chunkUS2I5GI7_cjs.d; }
 });
 Object.defineProperty(exports, 'Dialog', {
     enumerable: true,
-    get: function () { return chunkD4YLRWAO_cjs.a; }
+    get: function () { return chunkQVW6W76L_cjs.a; }
 });
 Object.defineProperty(exports, 'Nav', {
     enumerable: true,
-    get: function () { return chunk2LTJ7HHX_cjs.c; }
+    get: function () { return chunkO5XAJ7BY_cjs.c; }
 });
 Object.defineProperty(exports, 'NavItem', {
     enumerable: true,
-    get: function () { return chunk2LTJ7HHX_cjs.b; }
+    get: function () { return chunkO5XAJ7BY_cjs.b; }
 });
 Object.defineProperty(exports, 'NavList', {
     enumerable: true,
-    get: function () { return chunk2LTJ7HHX_cjs.a; }
+    get: function () { return chunkO5XAJ7BY_cjs.a; }
 });
 Object.defineProperty(exports, 'List', {
     enumerable: true,
-    get: function () { return chunkXTQKWY7W_cjs.b; }
+    get: function () { return chunkGUJSMQ3V_cjs.b; }
 });
 Object.defineProperty(exports, 'Popover', {
     enumerable: true,
@@ -101,71 +103,71 @@ Object.defineProperty(exports, 'Popover', {
 });
 Object.defineProperty(exports, 'Text', {
     enumerable: true,
-    get: function () { return chunkB7F5FS6D_cjs.a; }
+    get: function () { return chunkW2UIN7EV_cjs.a; }
 });
 Object.defineProperty(exports, 'Heading', {
     enumerable: true,
-    get: function () { return chunkPQ2K3BM6_cjs.b; }
+    get: function () { return chunk2NRIP6RB_cjs.b; }
 });
 Object.defineProperty(exports, 'Title', {
     enumerable: true,
-    get: function () { return chunkPQ2K3BM6_cjs.a; }
+    get: function () { return chunk2NRIP6RB_cjs.a; }
 });
 Object.defineProperty(exports, 'Breadcrumb', {
     enumerable: true,
-    get: function () { return chunkOK5QEIMD_cjs.b; }
+    get: function () { return chunkT4T6GWYQ_cjs.b; }
 });
 Object.defineProperty(exports, 'useBreadcrumbSegments', {
     enumerable: true,
-    get: function () { return chunkOK5QEIMD_cjs.a; }
+    get: function () { return chunkT4T6GWYQ_cjs.a; }
 });
 Object.defineProperty(exports, 'Icon', {
     enumerable: true,
-    get: function () { return chunk3MKLDCKQ_cjs.a; }
+    get: function () { return chunk6WTC4JXH_cjs.a; }
 });
 Object.defineProperty(exports, 'Card', {
     enumerable: true,
-    get: function () { return chunkP2DC76ZZ_cjs.d; }
+    get: function () { return chunkW5TKWBFC_cjs.d; }
 });
 Object.defineProperty(exports, 'CardContent', {
     enumerable: true,
-    get: function () { return chunkP2DC76ZZ_cjs.b; }
+    get: function () { return chunkW5TKWBFC_cjs.b; }
 });
 Object.defineProperty(exports, 'CardFooter', {
     enumerable: true,
-    get: function () { return chunkP2DC76ZZ_cjs.c; }
+    get: function () { return chunkW5TKWBFC_cjs.c; }
 });
 Object.defineProperty(exports, 'CardTitle', {
     enumerable: true,
-    get: function () { return chunkP2DC76ZZ_cjs.a; }
+    get: function () { return chunkW5TKWBFC_cjs.a; }
 });
 Object.defineProperty(exports, 'Modal', {
     enumerable: true,
-    get: function () { return chunkROZI23GS_cjs.a; }
+    get: function () { return chunkDKTHCQ5P_cjs.a; }
 });
 Object.defineProperty(exports, 'Button', {
     enumerable: true,
-    get: function () { return chunkJ32EZPYD_cjs.a; }
+    get: function () { return chunkGT77BX4L_cjs.a; }
 });
 Object.defineProperty(exports, 'Input', {
     enumerable: true,
-    get: function () { return chunkIYUN2EW3_cjs.a; }
+    get: function () { return chunk4BZKFPEC_cjs.a; }
 });
 Object.defineProperty(exports, 'Box', {
     enumerable: true,
-    get: function () { return chunkS7BABR7Z_cjs.a; }
+    get: function () { return chunkE2AJURUW_cjs.a; }
 });
 Object.defineProperty(exports, 'FP', {
     enumerable: true,
-    get: function () { return chunkS7BABR7Z_cjs.a; }
+    get: function () { return chunkE2AJURUW_cjs.a; }
 });
 Object.defineProperty(exports, 'Link', {
     enumerable: true,
-    get: function () { return chunk5S4ORA4C_cjs.a; }
+    get: function () { return chunk33PNJ4LO_cjs.a; }
 });
 Object.defineProperty(exports, 'To', {
     enumerable: true,
-    get: function () { return chunk5S4ORA4C_cjs.b; }
+    get: function () { return chunk33PNJ4LO_cjs.b; }
 });
 exports.Article = ge;
 exports.Aside = fe;
@@ -173,7 +175,7 @@ exports.Badge = A;
 exports.Details = ye;
 exports.Footer = de;
 exports.Header = ce;
-exports.Img = M;
+exports.Img = V;
 exports.Landmarks = S;
 exports.Main = me;
 exports.Section = ue;