@fpkit/acss 0.5.12 → 0.5.13

package/libs/heading-3648c538.d.ts

@@ -0,0 +1,250 @@
+import React__default from 'react';
+import { U as UI } from './ui-645f95b5.js';
+
+/**
+ * Valid HTML heading levels for semantic document structure.
+ *
+ * @remarks
+ * Heading levels establish the document outline and hierarchy for screen readers.
+ * Always maintain proper heading order (don't skip levels) for WCAG 2.1 compliance.
+ *
+ * @example
+ * // ✅ GOOD: Proper heading hierarchy
+ * <Title level="h1">Main Page Title</Title>
+ * <Title level="h2">Section Heading</Title>
+ * <Title level="h3">Subsection Heading</Title>
+ *
+ * @example
+ * // ❌ BAD: Skipping heading levels
+ * <Title level="h1">Main Title</Title>
+ * <Title level="h4">Skipped h2 and h3</Title>
+ */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Props for the Title component.
+ *
+ * @typeParam TLevel - The heading level to render (h1-h6)
+ *
+ * @property {HeadingLevel} level - The semantic heading level (h1-h6). Defaults to "h2".
+ * @property {React.ReactNode} children - The text or elements to render inside the heading.
+ * @property {string} [id] - Unique identifier for the heading, useful for anchor links.
+ * @property {React.CSSProperties} [styles] - Inline styles to apply to the heading.
+ * @property {string} [ui] - Data attribute for UI framework styling hooks.
+ * @property {string} [className] - CSS class names to apply.
+ *
+ * @remarks
+ * This interface extends the polymorphic UI component props, providing full access
+ * to native HTML heading attributes and ARIA properties for accessibility.
+ *
+ * For AI assistants: This component ensures semantic HTML structure for document
+ * outlines, which is critical for screen reader navigation and SEO.
+ */
+type TitleProps$1 = {
+    /**
+     * The semantic heading level to render.
+     *
+     * @default "h2"
+     *
+     * @remarks
+     * Choose the appropriate level based on your document structure:
+     * - h1: Page title (typically one per page)
+     * - h2: Major sections
+     * - h3-h6: Subsections and nested content
+     *
+     * WCAG 2.1 requires proper heading hierarchy for screen reader users.
+     */
+    level?: HeadingLevel;
+    /**
+     * The content to display in the heading.
+     *
+     * @remarks
+     * Can be text, elements, or a combination. Ensure text content is meaningful
+     * and descriptive for users navigating with screen readers.
+     */
+    children: React__default.ReactNode;
+    /**
+     * Unique identifier for the heading element.
+     *
+     * @remarks
+     * Useful for:
+     * - Creating anchor links to sections
+     * - ARIA relationships (aria-labelledby, aria-describedby)
+     * - Testing and automation
+     */
+    id?: string;
+    /**
+     * Data attribute for UI framework styling hooks.
+     *
+     * @remarks
+     * Used by fpkit's CSS system to apply component-specific styles.
+     * Automatically prefixed with "data-ui" when rendered.
+     */
+    ui?: string;
+    /**
+     * CSS class names to apply to the heading.
+     *
+     * @remarks
+     * Prefer using the `ui` prop for fpkit styling, and this for
+     * utility classes or custom overrides.
+     */
+    className?: string;
+} & React__default.ComponentPropsWithoutRef<typeof UI>;
+/**
+ * Title - A semantic heading component for document structure and hierarchy.
+ *
+ * The Title component renders semantic HTML headings (h1-h6) with proper
+ * accessibility support. It ensures WCAG 2.1 AA compliance by maintaining
+ * semantic document structure for screen readers and assistive technologies.
+ *
+ * ## Key Features
+ *
+ * - **Semantic HTML**: Renders actual heading elements (h1-h6) for proper document outline
+ * - **Accessibility**: Full ARIA support and keyboard navigation
+ * - **Flexible Styling**: Supports fpkit's UI system, custom classes, and inline styles
+ * - **Type Safety**: Fully typed with TypeScript for developer experience
+ * - **Performance**: Memoized to prevent unnecessary re-renders
+ *
+ * ## Accessibility Considerations
+ *
+ * ### WCAG 2.1 AA Compliance
+ *
+ * - **1.3.1 Info and Relationships (Level A)**: Semantic heading elements preserve
+ *   document structure for screen readers
+ * - **2.4.6 Headings and Labels (Level AA)**: Headings should be descriptive and
+ *   properly ordered
+ * - **2.4.10 Section Headings (Level AAA)**: Use headings to organize content
+ *
+ * ### Best Practices
+ *
+ * 1. **Maintain Heading Hierarchy**: Don't skip levels (e.g., h1 → h3)
+ * 2. **One h1 Per Page**: Use h1 for the main page title only
+ * 3. **Descriptive Text**: Headings should clearly describe the following content
+ * 4. **Avoid Empty Headings**: Always provide meaningful text content
+ *
+ * ## Usage Examples
+ *
+ * @example
+ * // Basic usage with default h2
+ * <Title>Section Heading</Title>
+ *
+ * @example
+ * // Page title with explicit h1
+ * <Title level="h1">Welcome to Our Application</Title>
+ *
+ * @example
+ * // Subsection with custom styling
+ * <Title
+ *   level="h3"
+ *   id="getting-started"
+ *   className="text-primary"
+ * >
+ *   Getting Started
+ * </Title>
+ *
+ * @example
+ * // With fpkit UI data attribute
+ * <Title level="h2" ui="section-title">
+ *   Features Overview
+ * </Title>
+ *
+ * @example
+ * // Accessible heading with aria-label for context
+ * <Title level="h2" aria-label="User dashboard overview">
+ *   Dashboard
+ * </Title>
+ *
+ * @example
+ * // Complex heading with mixed content
+ * <Title level="h2" id="stats">
+ *   <Icon name="chart" aria-hidden="true" />
+ *   <span>Statistics</span>
+ * </Title>
+ *
+ * @example
+ * // ✅ GOOD: Proper heading hierarchy
+ * <Title level="h1">Page Title</Title>
+ * <Title level="h2">Main Section</Title>
+ * <Title level="h3">Subsection</Title>
+ *
+ * @example
+ * // ❌ BAD: Skipping heading levels (accessibility violation)
+ * <Title level="h1">Page Title</Title>
+ * <Title level="h4">Skipped h2 and h3</Title>
+ *
+ * @param {TitleProps} props - Component props
+ * @returns {React.ReactElement} A semantic heading element
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html WCAG 1.3.1}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html WCAG 2.4.6}
+ */
+declare const Title: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<TitleProps$1, "ref"> & React__default.RefAttributes<HTMLHeadingElement>>>;
+
+/**
+ * @deprecated Use `Title` component instead. This component will be removed in v3.0.0.
+ *
+ * @remarks
+ * The `Heading` component has been deprecated in favor of the new `Title` component
+ * which offers improved API design and better accessibility features.
+ *
+ * **Migration Guide:**
+ * - Rename `Heading` → `Title`
+ * - Rename prop `type` → `level`
+ * - Default level changed from `h3` → `h2` (update if you relied on the default)
+ *
+ * @example
+ * // Before (deprecated):
+ * <Heading type="h2">Section Title</Heading>
+ *
+ * // After:
+ * <Title level="h2">Section Title</Title>
+ *
+ * @see {@link Title} for the new component
+ */
+type TitleProps = {
+    /**
+     * @deprecated Use `level` prop on the `Title` component instead.
+     */
+    children: React__default.ReactNode;
+    /**
+     * @deprecated Use `level` prop on the `Title` component instead.
+     */
+    type?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * @deprecated Use `ui` prop on the `Title` component.
+     */
+    ui?: string;
+} & Omit<React__default.ComponentPropsWithoutRef<typeof Title>, 'level'>;
+/**
+ * Heading - Deprecated component wrapper for Title.
+ *
+ * @deprecated Use {@link Title} component instead. Will be removed in v3.0.0.
+ *
+ * This component provides backwards compatibility for existing code using
+ * the old `Heading` component API. It forwards all props to the new `Title`
+ * component with appropriate prop name mapping.
+ *
+ * **Breaking Changes in v3.0.0:**
+ * - This component will be removed
+ * - Migrate to `Title` component before upgrading
+ *
+ * **Migration Steps:**
+ * 1. Replace all `<Heading>` imports with `<Title>`
+ * 2. Rename `type` prop to `level`
+ * 3. Review default behavior (default changed from h3 to h2)
+ *
+ * @example
+ * // Old API (still works but deprecated):
+ * import { Heading } from '@fpkit/acss';
+ * <Heading type="h2">Section</Heading>
+ *
+ * @example
+ * // New API (recommended):
+ * import { Title } from '@fpkit/acss';
+ * <Title level="h2">Section</Title>
+ *
+ * @param {TitleProps} props - Component props (maps old API to new)
+ * @returns {React.ReactElement} The rendered Title component
+ */
+declare const Heading: React__default.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & React__default.RefAttributes<HTMLHeadingElement>>;
+
+export { HeadingLevel as H, Title as T, TitleProps$1 as a, Heading as b, TitleProps as c };

package/libs/hooks.cjs

@@ -1,9 +1,16 @@
 'use strict';
 
+var chunkOK5QEIMD_cjs = require('./chunk-OK5QEIMD.cjs');
 var chunkPDD4N5P5_cjs = require('./chunk-PDD4N5P5.cjs');
+require('./chunk-5S4ORA4C.cjs');
+require('./chunk-L75OQKEI.cjs');
 
 
 
+Object.defineProperty(exports, 'useBreadcrumbSegments', {
+	enumerable: true,
+	get: function () { return chunkOK5QEIMD_cjs.a; }
+});
 Object.defineProperty(exports, 'usePopover', {
 	enumerable: true,
 	get: function () { return chunkPDD4N5P5_cjs.a; }

package/libs/hooks.d.cts

@@ -1,3 +1,8 @@
+export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.cjs';
+import 'react';
+import './ui-645f95b5.js';
+import './components/link/link.cjs';
+
 type Position = {
     /**
      * @description This is the top position of the popover.

package/libs/hooks.d.ts

@@ -1,3 +1,8 @@
+export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
+import 'react';
+import './ui-645f95b5.js';
+import './components/link/link.js';
+
 type Position = {
     /**
      * @description This is the top position of the popover.

package/libs/hooks.js

@@ -1,3 +1,6 @@
+export { a as useBreadcrumbSegments } from './chunk-GZ4QFPRY.js';
 export { a as usePopover } from './chunk-GCGKYLDG.js';
+import './chunk-TYRCEX2L.js';
+import './chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=hooks.js.map

package/libs/icons.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkKKLTUJFB_cjs = require('./chunk-KKLTUJFB.cjs');
-require('./chunk-6TE5QEVE.cjs');
+var chunk3MKLDCKQ_cjs = require('./chunk-3MKLDCKQ.cjs');
+require('./chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Icon', {
 	enumerable: true,
-	get: function () { return chunkKKLTUJFB_cjs.a; }
+	get: function () { return chunk3MKLDCKQ_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 'react';
-import './ui-9a6f9f8d.js';
+import './ui-645f95b5.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 'react';
-import './ui-9a6f9f8d.js';
+import './ui-645f95b5.js';

package/libs/icons.js

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

package/libs/index.cjs

@@ -1,162 +1,183 @@
 'use strict';
 
-var chunkECLD37WN_cjs = require('./chunk-ECLD37WN.cjs');
-var chunkLL7HTLMS_cjs = require('./chunk-LL7HTLMS.cjs');
-var chunk6BVXFW7U_cjs = require('./chunk-6BVXFW7U.cjs');
+var chunkM5RRNTVX_cjs = require('./chunk-M5RRNTVX.cjs');
+var chunkAHDJGCG5_cjs = require('./chunk-AHDJGCG5.cjs');
 var chunkLT5KZ2QW_cjs = require('./chunk-LT5KZ2QW.cjs');
-var chunk7K76RW2A_cjs = require('./chunk-7K76RW2A.cjs');
-var chunkDV56L5YX_cjs = require('./chunk-DV56L5YX.cjs');
-var chunkQVV34QEH_cjs = require('./chunk-QVV34QEH.cjs');
+var chunkD4YLRWAO_cjs = require('./chunk-D4YLRWAO.cjs');
+var chunk2LTJ7HHX_cjs = require('./chunk-2LTJ7HHX.cjs');
+var chunkXTQKWY7W_cjs = require('./chunk-XTQKWY7W.cjs');
 var chunkG55UJ53G_cjs = require('./chunk-G55UJ53G.cjs');
-var chunkE3XP6BEX_cjs = require('./chunk-E3XP6BEX.cjs');
-require('./chunk-M5QL5TAE.cjs');
+var chunkB7F5FS6D_cjs = require('./chunk-B7F5FS6D.cjs');
+var chunkPQ2K3BM6_cjs = require('./chunk-PQ2K3BM6.cjs');
+var chunkOK5QEIMD_cjs = require('./chunk-OK5QEIMD.cjs');
 require('./chunk-PDD4N5P5.cjs');
-var chunkKKLTUJFB_cjs = require('./chunk-KKLTUJFB.cjs');
-var chunkBV5CLH44_cjs = require('./chunk-BV5CLH44.cjs');
-var chunkICCKQ2GC_cjs = require('./chunk-ICCKQ2GC.cjs');
-var chunkLHVJKDMA_cjs = require('./chunk-LHVJKDMA.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 chunkX3EVB7VS_cjs = require('./chunk-X3EVB7VS.cjs');
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
-var l = require('react');
+var chunk5S4ORA4C_cjs = require('./chunk-5S4ORA4C.cjs');
+var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var u = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var l__default = /*#__PURE__*/_interopDefault(l);
+var u__default = /*#__PURE__*/_interopDefault(u);
 
-var F=({src:e="//",alt:o,width:t=480,height:n,styles:s,loading:i="lazy",placeholder:c=`https://via.placeholder.com/${t}?text=PLACEHOLDER`,fetchpriority:a="low",decoding:m="auto",imgLoaded:x,imgError:S,...y})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"img",src:e,alt:o,width:t,height:n||"auto",loading:i,style:s,onError:h=>{if(S){S?.(h);return}h.currentTarget.src!==c&&(h.currentTarget.src=c);},onLoad:h=>{x?.(h);},fetchPriority:a,decoding:m,...y});F.displayName="Img";var z=e=>{let[o,t]=l.useState([]),[n,s]=l.useState(e),[i,c]=l.useState(!1),[a,m]=l.useState(!1),[x,S]=l.useState(null);return l.useEffect(()=>{let d=()=>{let f=window.speechSynthesis.getVoices();t(f);let g=f.find(p=>p.name==="Google US English");if(g)s(g);else {let p=f.find(E=>E.lang.startsWith("en-"));p&&s(p);}};return d(),window.speechSynthesis.onvoiceschanged=d,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(d,f={},g)=>{let p=new SpeechSynthesisUtterance(d);p.lang=f.lang??"en-US",p.pitch=f.pitch??1,p.rate=f.rate??1,p.voice=n??f.voice??null,p.onend=()=>{c(!1),m(!1),g&&g();},"speechSynthesis"in window?(window.speechSynthesis.speak(p),S(p),c(!0),m(!1)):console.error("Speech synthesis not supported");},pause:()=>{i&&!a&&(window.speechSynthesis.pause(),m(!0));},resume:()=>{i&&a&&(window.speechSynthesis.resume(),m(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),c(!1),m(!1));},isSpeaking:i,isPaused:a,availableVoices:o,changeVoice:d=>{s(d);},currentVoice:n,getAvailableLanguages:()=>[...new Set(o.map(d=>d.lang))]}};var oe=({children:e,onClick:o})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:o},e),U=l__default.default.memo(oe),N=({label:e,isSpeaking:o,isPaused:t,onSpeak:n,onPause:s,onResume:i,onCancel:c})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"div","data-tts":!0},e&&l__default.default.createElement("p",null,e),!o&&l__default.default.createElement(U,{"aria-label":"Speak",onClick:n},l__default.default.createElement(chunkKKLTUJFB_cjs.b.PlaySolid,{size:16})),o&&!t&&l__default.default.createElement(U,{"aria-label":"Pause",onClick:s},l__default.default.createElement(chunkKKLTUJFB_cjs.b.PauseSolid,{size:16})),t&&l__default.default.createElement(U,{"aria-label":"Resume",onClick:i},l__default.default.createElement(chunkKKLTUJFB_cjs.b.ResumeSolid,{size:16})),l__default.default.createElement(U,{"aria-label":"Stop",onClick:c},l__default.default.createElement(chunkKKLTUJFB_cjs.b.StopSolid,{size:16})));N.displayName="TextToSpeechControls";N.TTSButton=U;var A=N;var H=({initialText:e="",showTextInput:o=!1,voice:t,pitch:n=1,rate:s=1,language:i,label:c,onEnd:a})=>{let{speak:m,pause:x,resume:S,cancel:y,isSpeaking:P,isPaused:I,getAvailableLanguages:h,availableVoices:C}=z(),[k,d]=l.useState(e);console.log(h()),l.useEffect(()=>{d(e);},[e]);let f=()=>{k.trim()!==""&&m(k,{voice:t,pitch:n,rate:s},p);},g=E=>{d(E.target.value);},p=()=>{a&&a();};return l__default.default.createElement(l__default.default.Fragment,null,o&&l__default.default.createElement(chunkLL7HTLMS_cjs.b,{value:k,onChange:g}),l__default.default.createElement(A,{label:c,isSpeaking:P,isPaused:I,onSpeak:f,onPause:x,onResume:S,onCancel:y}))};H.displayName="TextToSpeechComponent";var T=e=>l__default.default.createElement(l__default.default.Fragment,null,e),ne=({id:e,children:o,headerBackground:t,styles:n,classes:s,...i})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"header",id:e,styles:n,className:s,...i},t,l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section"},o)),re=({id:e,children:o,styles:t,classes:n,...s})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"main",id:e,styles:t,...s,className:n},o),ae=({id:e,classes:o,children:t,styles:n={},...s})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"footer",id:e,className:o,styles:n,...s},l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section"},t||"Copyright \xA9 2022")),pe=({id:e,children:o,styles:t={},classes:n,...s})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"aside",id:e,styles:t,className:n,...s},l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section"},o)),ie=({id:e,children:o,styles:t,classes:n,...s})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section",id:e,styles:t,className:n,...s},o),ce=({id:e,children:o,styles:t,classes:n,...s})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"article",id:e,styles:t,className:n,...s},o);T.displayName="Landmarks";T.Header=ne;T.Main=re;T.Footer=ae;T.Aside=pe;T.Section=ie;T.Article=ce;var me=({elm:e="span",role:o="note",children:t,styles:n,...s})=>l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:e,role:o,styles:n,...s},t);me.displayName="Tag";var de=({summary:e,icon:o,styles:t,classes:n,ariaLabel:s,name:i,open:c,onPointerDown:a,onToggle:m,children:x,ref:S,...y})=>{let P={...t},I=C=>{a&&a?.(C),a&&a?.(C);};return l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"details",style:P,className:n,onToggle:C=>{m&&a?.(C);},ref:S,open:c,"aria-label":s||"Details dropdown",name:i,...y},l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"summary",onPointerDown:I},o,e),l__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section"},x))};de.displayName="Details";
+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}">
+      <defs>
+        <linearGradient id="grad-${o}-${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(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";
 
-Object.defineProperty(exports, 'Breadcrumb', {
-	enumerable: true,
-	get: function () { return chunkECLD37WN_cjs.a; }
-});
 Object.defineProperty(exports, 'Textarea', {
-	enumerable: true,
-	get: function () { return chunkLL7HTLMS_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkM5RRNTVX_cjs.a; }
 });
 Object.defineProperty(exports, 'Field', {
-	enumerable: true,
-	get: function () { return chunk6BVXFW7U_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkAHDJGCG5_cjs.a; }
 });
 Object.defineProperty(exports, 'Caption', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.a; }
 });
 Object.defineProperty(exports, 'TBL', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.i; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.i; }
 });
 Object.defineProperty(exports, 'Table', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.f; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.f; }
 });
 Object.defineProperty(exports, 'Tbody', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.c; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.c; }
 });
 Object.defineProperty(exports, 'Td', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.e; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.e; }
 });
 Object.defineProperty(exports, 'Thead', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.b; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.b; }
 });
 Object.defineProperty(exports, 'Tr', {
-	enumerable: true,
-	get: function () { return chunkLT5KZ2QW_cjs.d; }
+    enumerable: true,
+    get: function () { return chunkLT5KZ2QW_cjs.d; }
 });
 Object.defineProperty(exports, 'Dialog', {
-	enumerable: true,
-	get: function () { return chunk7K76RW2A_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkD4YLRWAO_cjs.a; }
 });
 Object.defineProperty(exports, 'Nav', {
-	enumerable: true,
-	get: function () { return chunkDV56L5YX_cjs.c; }
+    enumerable: true,
+    get: function () { return chunk2LTJ7HHX_cjs.c; }
 });
 Object.defineProperty(exports, 'NavItem', {
-	enumerable: true,
-	get: function () { return chunkDV56L5YX_cjs.b; }
+    enumerable: true,
+    get: function () { return chunk2LTJ7HHX_cjs.b; }
 });
 Object.defineProperty(exports, 'NavList', {
-	enumerable: true,
-	get: function () { return chunkDV56L5YX_cjs.a; }
+    enumerable: true,
+    get: function () { return chunk2LTJ7HHX_cjs.a; }
 });
 Object.defineProperty(exports, 'List', {
-	enumerable: true,
-	get: function () { return chunkQVV34QEH_cjs.b; }
+    enumerable: true,
+    get: function () { return chunkXTQKWY7W_cjs.b; }
 });
 Object.defineProperty(exports, 'Popover', {
-	enumerable: true,
-	get: function () { return chunkG55UJ53G_cjs.b; }
+    enumerable: true,
+    get: function () { return chunkG55UJ53G_cjs.b; }
 });
 Object.defineProperty(exports, 'Text', {
-	enumerable: true,
-	get: function () { return chunkE3XP6BEX_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkB7F5FS6D_cjs.a; }
+});
+Object.defineProperty(exports, 'Heading', {
+    enumerable: true,
+    get: function () { return chunkPQ2K3BM6_cjs.b; }
 });
 Object.defineProperty(exports, 'Title', {
-	enumerable: true,
-	get: function () { return chunkE3XP6BEX_cjs.b; }
+    enumerable: true,
+    get: function () { return chunkPQ2K3BM6_cjs.a; }
+});
+Object.defineProperty(exports, 'Breadcrumb', {
+    enumerable: true,
+    get: function () { return chunkOK5QEIMD_cjs.b; }
+});
+Object.defineProperty(exports, 'useBreadcrumbSegments', {
+    enumerable: true,
+    get: function () { return chunkOK5QEIMD_cjs.a; }
 });
 Object.defineProperty(exports, 'Icon', {
-	enumerable: true,
-	get: function () { return chunkKKLTUJFB_cjs.a; }
+    enumerable: true,
+    get: function () { return chunk3MKLDCKQ_cjs.a; }
 });
 Object.defineProperty(exports, 'Card', {
-	enumerable: true,
-	get: function () { return chunkBV5CLH44_cjs.d; }
+    enumerable: true,
+    get: function () { return chunkP2DC76ZZ_cjs.d; }
 });
 Object.defineProperty(exports, 'CardContent', {
-	enumerable: true,
-	get: function () { return chunkBV5CLH44_cjs.b; }
+    enumerable: true,
+    get: function () { return chunkP2DC76ZZ_cjs.b; }
 });
 Object.defineProperty(exports, 'CardFooter', {
-	enumerable: true,
-	get: function () { return chunkBV5CLH44_cjs.c; }
+    enumerable: true,
+    get: function () { return chunkP2DC76ZZ_cjs.c; }
 });
 Object.defineProperty(exports, 'CardTitle', {
-	enumerable: true,
-	get: function () { return chunkBV5CLH44_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkP2DC76ZZ_cjs.a; }
 });
 Object.defineProperty(exports, 'Modal', {
-	enumerable: true,
-	get: function () { return chunkICCKQ2GC_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkROZI23GS_cjs.a; }
 });
 Object.defineProperty(exports, 'Button', {
-	enumerable: true,
-	get: function () { return chunkLHVJKDMA_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkJ32EZPYD_cjs.a; }
 });
 Object.defineProperty(exports, 'Input', {
-	enumerable: true,
-	get: function () { return chunkIYUN2EW3_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkIYUN2EW3_cjs.a; }
 });
 Object.defineProperty(exports, 'Box', {
-	enumerable: true,
-	get: function () { return chunkS7BABR7Z_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkS7BABR7Z_cjs.a; }
 });
 Object.defineProperty(exports, 'FP', {
-	enumerable: true,
-	get: function () { return chunkS7BABR7Z_cjs.a; }
+    enumerable: true,
+    get: function () { return chunkS7BABR7Z_cjs.a; }
 });
 Object.defineProperty(exports, 'Link', {
-	enumerable: true,
-	get: function () { return chunkX3EVB7VS_cjs.a; }
+    enumerable: true,
+    get: function () { return chunk5S4ORA4C_cjs.a; }
 });
 Object.defineProperty(exports, 'To', {
-	enumerable: true,
-	get: function () { return chunkX3EVB7VS_cjs.b; }
-});
-exports.Article = ce;
-exports.Aside = pe;
-exports.Details = de;
-exports.Footer = ae;
-exports.Header = ne;
-exports.Img = F;
-exports.Landmarks = T;
-exports.Main = re;
-exports.Section = ie;
-exports.Tag = me;
-exports.TextToSpeech = H;
+    enumerable: true,
+    get: function () { return chunk5S4ORA4C_cjs.b; }
+});
+exports.Article = ge;
+exports.Aside = fe;
+exports.Badge = A;
+exports.Details = ye;
+exports.Footer = de;
+exports.Header = ce;
+exports.Img = M;
+exports.Landmarks = S;
+exports.Main = me;
+exports.Section = ue;
+exports.Tag = xe;
+exports.TextToSpeech = z;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map